1.创建目录结构及两个文件,后端python文件和前端html文件,如下图:
2. 后端python代码,server.py
from flask import Flask, request
import os
app = Flask(__name__)
# 获取当前文件的所在目录
curr_dir = os.path.dirname(os.path.abspath(__file__))
curr_html_dir = curr_dir + "\\html\\"
@app.route('/')
@app.route('/login')
def loginajax():
with open(curr_html_dir + "login.html", "r", encoding="utf-8") as f:
loginWeb = f.read()
return loginWeb
@app.route('/check_login', methods=["GET", "POST"])
def loginCheck():
if (request.method == "POST"):
user = request.form.get('user')
pwd = request.form.get('pwd')
if (request.method == "GET"):
user = request.args.get('user')
pwd = request.args.get('pwd')
if user == 'admin' and pwd == '123': # 这里可以根据数据库里的用户和密码来判断,因为是最简单的登录界面,数据库学的不是很好,所有没用。
return {"user": user, "pwd": pwd, "success": True, "msg": "登录成功"}
else:
return {"user": user, "pwd": pwd, "success": False, "msg": "登录失败!账号或密码错!"}
if __name__ == '__main__':
app.run(debug=True, host="127.0.0.1", port=5000)
3. 前端html代码,login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>标准表单</h3>
<form action="/check_login" method="post">
账号<input type="text" name="user" placeholder="user">
密码<input type="password" name="pwd" placeholder="pwd">
<input type="submit" value="登录">
</form>
<h3>jq异步</h3>
账号<input type="text" id="user" placeholder="user">
密码<input type="password" id="pwd" placeholder="pwd">
<button id="btn_login">登录</button>
</body>
<script>
$('#btn_login').on('click', function () {
$.ajax({
url: '/check_login',
type: 'post',
data: { 'user': $('#user').val(), 'pwd': $('#pwd').val() },
success: function (res) {
console.log(res)
}
})
})
</script>
</html>
4. 打开浏览器输入http://127.0.0.1:5000或http://127.0.0.1:5000/login测试功能。