首先，構造登錄頁面的模板
<head>
<style type="text/css">
.container{
width: 40%;
height: 50%;
font-size: 16px;
background: #F2F2F2;
border-radius: 7%;
}
#sub{font-size: 16px}
</style>
<script type="text/javascript" src = "{{url_for('static', filename='jquery.js')}}"></script>
<script type="text/javascript" src = "{{url_for('static', filename='bootstrap/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src = "{{url_for('static', filename='bootstrap/jquery.min.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}">
</head>
<div class="container">
<h2>登錄</h2>
<form action="{{ url_for('login')}}" method="post" name="login" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">賬號:</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="username"><br><br>
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密碼:</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="password"><br><br>
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<input class="form-control btn btn-primary" type="submit" id="sub">
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
{% if error %}
<p class="error">
<strong>Error:</strong>{{ error }}
</p>
{% endif %}
</div>
</div>
</form>
</div>
這裏使用到了bootstrap框架，也是爲了讓頁面看起來更美觀（因爲之前自己做的就是純html的頁面，說實話真的醜爆了），以前都沒接觸到前端框架，還得感謝經理幫我找。bootstrap需要自行下載並在前端頁面引入使用。這是一個非常簡單的頁面，主要使用form表單向後端傳遞用戶名和密碼等參數；只需要在form標籤裏指定後端接收的視圖函數以及接收方式就Ok了<form action="{{ url_for('login')}}" method="post" name="login" class="form-horizontal">。
前端設計完成後，看後端接收用戶名和密碼並進行處理，也就是去與數據庫做對比，如果通過則登錄成功，不通過則失敗，另外登錄成功還需要將session保存，其他頁面的訪問必須要先獲取到session,才能訪問。
from flask import render_template,redirect,url_for,request,session
from app import app
from .models import User, Case, Project, Module
@app.route('/login', methods=['GET', 'POST'])
def login():
error = None
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
user = User.query.filter_by(username=username).first()
pwd = User.query.filter_by(password=password).first()
if user is None:
error = '無效賬號'
elif pwd is None:
error = '無效密碼'
else:
session['logged_in'] = True
return redirect('index')
return render_template('login.html', title='登錄', error=error)
@app.route('/index')
def index():
return render_template('index.html')
加載完成後，打開http://127.0.0.1:5000/login頁面查看
如果登錄成功，可通過return redirect('index')重定向到index主頁
ok！簡單的登錄頁面完成了，下一步要引入模板繼承，這樣能免去重複造輪子，公用的東西只需要一次引用即可。