Flask是一個(gè)使用 Python 編寫的輕量級(jí) Web 應(yīng)用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎則使用 Jinja2 。在一般應(yīng)用或個(gè)人開(kāi)發(fā)中，可以很容易的寫出應(yīng)用。本篇就結(jié)合bootstrap，寫一個(gè)簡(jiǎn)單的login界面。

一、效果圖

無(wú)圖無(wú)真像，先上效果圖：

flask-bootstrap

flask-login

二、目錄結(jié)構(gòu)

該代碼寫時(shí)采用動(dòng)靜分離的方法進(jìn)行編寫，目錄樹如下：

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

三、入口run文件

動(dòng)態(tài)代碼只有一個(gè)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)

實(shí)際應(yīng)用中，根據(jù)需要，可以關(guān)閉debug模試。

四、靜態(tài)模塊

templates下有兩個(gè)模塊文件分別是login.html和index.html

login.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響應(yīng)式登錄界面模板</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>還沒(méi)注冊(cè)?</small> <a href="javascript:void(0)" ><small>注冊(cè)</small></a>
  </p>
 </div>
</div>
</form>
</div>
</div>
</div>
</div>
<div style="text-align:center;"><p>來(lái)源：<a href="http://www.dbjr.com.cn/" target="_blank">運(yùn)維之路</a></p></div>
</body>
</html>

index.html
index.html 模板中內(nèi)容如下：

<h1>welcome to www.dbjr.com.cn/ <h1>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: