bootstrap flask登录页面编写实例

2019-11-20 08:36:59

字体：大中小

来源：转载

供稿：网友

本文章来为各位介绍一个python的例子，这个就是bootstrap+flask写登录页面的例子，希望文章能够对各位有所帮助。

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。在一般应用或个人开发中，可以很容易的写出应用。本篇就结合bootstrap，写一个简单的login界面。

一、效果图

无图无真像，先上效果图：

flask-bootstrap

flask-login

二、目录结构

该代码写时采用动静分离的方法进行编写，目录树如下：

[root@jb51 login]# tree
.
├── run.py
├── static
│   └── css
│       ├── bootstrap.min.css
│       └── style.css
└── templates
    ├── index.html
    └── login.html

三、入口run文件

动态代码只有一个run.py文件，代码如下：

from flask import *app = Flask(__name__,static_url_path='/static')@app.route("/login",methods=['POST','GET'])def login(): error = None if request.method == 'POST': if request.form['username'] != 'admin' or request.form['password'] != 'admin123':  error= "sorry" else:  return redirect(url_for('index')) return render_template('login.html',error=error)@app.route("/index")def index(): return render_template('index.html')if __name__ == "__main__": app.run( host="0.0.0.0", port=80, debug=True)

实际应用中，根据需要，可以关闭debug模试。

四、静态模块

templates下有两个模块文件分别是login.html和index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" /><title>Bootstrap响应式登录界面模板</title><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}"></head><body><div class="box"><div class="login-box"><div class="login-title text-center"><h1><small>登录</small></h1></div><div class="login-content "><div class="form"><form action="#" method="post"><div class="form-group"> <div class="col-xs-12 ">  <div class="input-group">   <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>   <input type="text" id="username" name="username" class="form-control" placeholder="用户名">  </div> </div></div><div class="form-group"> <div class="col-xs-12 ">  <div class="input-group">   <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>   <input type="text" id="password" name="password" class="form-control" placeholder="密码">  </div> </div></div><div class="form-group form-actions"> <div class="col-xs-4 col-xs-offset-4 ">  <button type="submit" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-off"></span> 登录</button> </div></div><div class="form-group"> <div class="col-xs-6 link">  <p class="text-center remove-margin"><small>忘记密码？</small> <a href="javascript:void(0)" ><small>找回</small></a>  </p> </div> <div class="col-xs-6 link">  <p class="text-center remove-margin"><small>还没注册?</small> <a href="javascript:void(0)" ><small>注册</small></a>  </p> </div></div></form></div></div></div></div><div style="text-align:center;"><p>来源：<a href="//www.VeVB.COm/" target="_blank">运维之路</a></p></div></body></html>

index.html
index.html 模板中内容如下：

<h1>welcome to www.VeVB.COm/ <h1>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：bootstrap table复杂操作代码

下一篇：JS弹出窗口的运用与技巧大全