基於python-flask的用戶登錄頁面開發
前言
前幾篇博客介紹了如何利用sql讀取數據庫，並利用ajax交互數據，最后用flask和echarts進行可視化的操作，核心流程其實就是前端向后端發起請求，索要數據。而想要完成一個具有詳細增刪改查功能的系統，除了需要從前端到后端拿數據來渲染頁面之外，還需要用后端讀取前端發送的數據，進行操作（如查詢）。
因此，本文介紹一下如何用前端發送數據，並用后端來接收和進行判斷。
核心代碼
HTML
<!--
* @Description: 成績查詢系統--flask增刪改查示例
* @Author: LJW
* @Date: 2021-03-19 00:19:55
* @LastEditTime: 2021-03-19 16:02:44
* @LastEditors: LJW
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/style.css">
<script src="../static/js/jquery-1.11.1.min.js"></script>
<title>成績查詢系統</title>
</head>
<body>
<form action="">
<div id='login'>
<p>登錄</p>
<div id='username'>
<input type="text" placeholder="輸入用戶名" name="username" id="usernameclass">
</div>
<div id='password'>
<input type="text" placeholder="輸入密碼" name="password" id="passwordclass">
</div>
<div id='update'>
<button>
<input type="submit" value="登錄">
</button>
</div>
</div>
</form>
<img src="../static/jpg/2.jpg" style="width:100%;height:100%">
<script type="text/javascript">
function getData() {
var username = $('#usernameclass').val();
var password = $('#passwordclass').val();
// login
$.ajax({
cache: false,
type: "POST",
url: "/mainPage", //把表單數據發送到/main
//JSON封裝發送的數據
data: JSON.stringify({
"username": username,
"password": password
}),
async: false,
dataType : "json", // 服務器返回的數據形式, 如果是render_template就是html / 一般是json
success: function(res) {
alert("登錄成功!");
alert(res);
window.location.href='test'; // error，無法主動跳轉
//下一行加上window.event.returnvalue=false，撲捉到這個時間，隨后判為false，停止對操作，便可以解決問題。
window.event.returnValue=false;
},
error: function(err, type) {
alert("密碼輸錯 或 有BUG導致請求發送失敗咯!");
console.log("ajax錯誤類型：" + type); //查看錯誤類型
console.log(err);
}
});
}
$("button").click(function(){
getData()
});
</script>
</body>
</html>
忽略CSS樣式表，HTML文本中界面部分主要有兩個用於輸入賬戶和密碼的input框，以及一個用於提交的button按鈕。核心部分是用jquery編寫代碼，在觸發button的click事件時，讀取input里的信息，然后用ajax方法發送賬戶和密碼，並通過success回調函數完成網頁的重定向。核心如下：
$.ajax()中有幾個參數需要注意：
- 前端發送的data需要用
JSON.stringify方法封裝為json格式，再發送給后端。 dataType是服務器端返回的數據格式（如果后端return的是json那這邊就是json，返回的是html那就是html）- 跳轉頁面的功能需要加上
window.event.returnValue=false;，撲捉到這個時間，隨后判為false，停止操作，便可以重定向。 error func中，可以設置err和type，以查看錯誤的原因。
<script type="text/javascript">
function getData() {
var username = $('#usernameclass').val();
var password = $('#passwordclass').val();
// login
$.ajax({
cache: false,
type: "POST",
url: "/mainPage", //把數據發送到/main
//JSON封裝發送的數據
data: JSON.stringify({
"username": username,
"password": password
}),
async: false,
dataType : "json", // 服務器返回的數據形式, 如果是render_template就是html / 一般是json
success: function(res) {
alert("登錄成功!");
alert(res);
window.location.href='test'; // error，無法主動跳轉
//下一行加上window.event.returnvalue=false，撲捉到這個時間，隨后判為false，停止對操作，便可以解決問題。
window.event.returnValue=false;
},
error: function(err, type) {
alert("密碼輸錯 或 有BUG導致請求發送失敗咯!");
console.log("ajax錯誤類型：" + type); //查看錯誤類型
console.log(err);
}
});
}
$("button").click(function(){
getData()
});
</script>
python-flask
這里的/mainPage路由用於發起請求，查看用戶名和密碼，如果成功則跳轉到main.html。/路由則是login頁面。
有幾個問題需要注意
-
使用的是POST請求，后台對應的讀取數據方法是
request.get_data，而request.form.get則是用於讀取post請求下的表單數據(form)，這里用不到。 -
前端發送的數據在用
request.get_data方法讀取后，需要用json.loads解析，因為發送的是json字符串。 -
return的返回值必須是json格式，可以用
jsonify或json.dumps()。 -
如果返回值是render_template的頁面時，ajax中dataType需要設置為html
-
此外，ajax請求可能無法使用flask的方法重定向頁面。因此本文使用javascript的方法完成了頁面重定向。
from flask import Flask, request, redirect, url_for
from flask import render_template
from flask import jsonify
import json
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('login.html')
# login
@app.route('/mainPage', methods=['POST'])
def main():
if request.method == 'POST':
# 使用json讀取請求體
data = json.loads(request.get_data(as_text=True))
print(data)
if data['username'] == 'ljw' and data['password'] == '123':
# 必須有返回值，且返回值必須是json格式
return jsonify('歡迎您！') # right
# return json.dumps('歡迎您！') # right
'''
@desc:重定向，此時ajax的dataType應該改成html而不是上面的json
此外，ajax請求可能沒法利用flask的方法重定向頁面
'''
# return redirect(url_for('test'))
# return render_template('main.html')
# error / 無法通過ajax方式返回html
# test
@app.route('/test')
def test():
return render_template('main.html')
if __name__ == '__main__':
app.run(debug=True, port=5000)
展示
后記
- 用戶登錄操作雖然簡單，但是卻包含了前端發送數據給后端進行判斷的操作。結合后台返回數據給前端的操作，便可以完成絕大多數包含增刪改查和ajax的實現的功能，完成交互操作。
- jquery操作可以完成簡單的dom操作和ajax操作，建議熟悉。
- 數據的交互格式以json為准。
- 以后將慢慢地寫一個增刪改查的完整系統，完成入門。
