使用Flask框架实现一个简单的用户登录案例。
1.实现模板视图文件
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
text-align: center;
}
#main {
margin: 0 auto;
position: relative;
}
.login_box {
width: 320px;
height: 80px;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
border: 1px solid #ccc;
border-radius: 6px;
justify-content: space-around;
background: #F6F6F6;
flex-flow: row wrap;
padding: 18px;
}
.login_title {
width: 20%;
}
.login_controller {
width: 80%;
text-align: start;
}
.login_controller input {
width: 240px;
}
.login_submit {
width: 80%;
text-align: center;
}
.login_submit input {
width: 120px;
}
#login_msg {
margin: 0 auto;
width: 320px;
color: red;
padding: 5px;
}
</style>
</head>
<body>
<h1>用户登录</h1>
<hr>
<div id="main">
<form name="loginForm">
<div id="login_msg"></div>
<div class="login_box">
<div class="login_title">用户名:</div>
<div class="login_controller"><input type="text" name="username" id="username" value=""/></div>
<div class="login_title">密码:</div>
<div class="login_controller"><input type="password" name="password" id="password" value=""/></div>
<div class="login_submit"><input type="button" value="登录" onclick="doLogin()"></div>
</div>
</form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function doLogin() {
console.log("-----执行用户登录------")
login_user = {
username: $("#username").val(),
password: $("#password").val()
}
console.log("-----登录用户对象-----")
console.log(login_user)
$.ajax({
//请求方式
type: "POST",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "http://127.0.0.1:8080/users/auth",
//数据，json字符串
data: JSON.stringify(login_user),
//请求成功
success: function (resp) {
console.log(resp)
if (resp.code === 200) {
window.location.href = '/users/login_success'
}
if(resp.code === 400){
$("#login_msg").text(resp.msg)
}
},
//请求失败，包含具体的错误信息
error: function (err) {
console.log(err);
}
})
}
</script>
</body>
</html>
login_success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>登录成功</h1>
<hr>
</body>
</html>
2.实现用户业务接口
login_demo.py
# -*- coding: utf-8 -*-
# @Author: simoniu
# @Time : 2023/4/17 10:05
# @File : login_demo.py
# @Software : PyCharm
from flask import Flask, request, render_template, redirect, flash, abort, jsonify
import json
app = Flask(__name__)
# 模拟用户表的用户集合
users = {
'root': '123456',
'admin': '654321',
'zhangsan': '666666'
}
# 路由: http://ip:port
@app.route('/users/login')
def login():
return render_template('login.html')
# 需要用到POST方法;
# 通过route装饰器传递methods参数, 可以改变HTTP的方法;
@app.route('/users/auth', methods=['GET', 'POST'])
def auth():
# 1. 判断http方法, 如果是post;
if request.method == 'POST':
# 2. 获取前端用户表单提交的数据;
print('-----执行了/users/auth------')
# 接收处理json数据请求
data = json.loads(request.data) # 将json字符串转为dict
username = data['username']
password = data['password']
# 3. 判断用户名和密码是否正确?
if username in users:
# 跳转到另外一个页面
if password == users[username]:
print('-----登录成功----')
# 返回json对象
return jsonify(msg="登录成功", code=200)
else:
message = "用户密码错误"
return jsonify(msg=message, code=400)
else:
message = "用户不存在, 请注册"
return jsonify(msg=message, code=400)
# 4. 如果不是post方法, 用户没有提交数据, 则进入登录界面;
else:
message = "请求方式不正确，请使用POST请求！"
return jsonify(msg=message, code=400)
@app.route('/users/login_success')
def login_success():
return render_template('login_success.html')
@app.errorhandler(404)
def show_404_page(e):
return render_template('404.html'), 404
@app.errorhandler(500)
def show_500_page(e):
return render_template('500.html'), 500
# 抛出异常: abort
@app.route('/users/<id>')
def user(id):
if int(id) in range(1, 10):
return "hello user:" + str(id)
else:
abort(404)
if __name__ == '__main__':
app.run(host="127.0.0.1", port=8080, debug=True)