[Flask]Flask零基础项目---登录demo

借助Flask框架实现模拟用户登录操作；
一步一步的来实现这个登录接口

login.py

from flask import Flask, render_template,request

app = Flask(__name__, template_folder='login')


@app.route('/')
def hello_flask():
    data = request.get_data()
    print(data)
    return render_template("login.html")


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

template_folder='login' 登录用的html文件放在login文件夹下面；
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    <form action="/" method="post" >-->
    <form method="post" >
  	<table align="center" >
  		<tr>
  			<td>姓名:</td>
  			<td><input type="text" name="user" ></td>
  		</tr>
  		<tr>
  			<td>密码:</td>
  			<td><input type="password" name="password" ></td>
  		</tr>
  		<tr>
  			<td><input type="submit"  value="登录"></td>
  			<td>
  				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  				<input type="submit"  value="注册">
  				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset"  value="重置">
  			</td>
  		</tr>
  	</table>
  </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

运行login.py后端开启服务，在浏览器请求，前端报错，
请求前：
在这里插入图片描述
请求后：

后端并未出现明显异常；
后端日志：

Press CTRL+C to quit
b''
127.0.0.1 - - [27/Nov/2022 15:44:56] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [27/Nov/2022 15:45:00] "POST / HTTP/1.1" 405 -
1
2
3
4

b’’ :这个是我们print(data)这句代码打印的东西，从目前结果看来，后端并未收到前端实际传送回来的数据

从前端报错来看是分方法不允许，这是Flask自己的一种规范导致，路由的默认方法只支持GET方式，其他方式没有被设置；解决方法也比较简单，只需在路由的时候添加： @app.route('/', methods=['get', 'post'])

全部代码

from flask import Flask, render_template, request

app = Flask(__name__, template_folder='login')


@app.route('/', methods=['get', 'post'])
def hello_flask():
    data = request.get_data()
    print(data)
    return render_template("login.html")


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

启动服务后，前端输入用户名，密码，后端就可以收到数据，接下来对前端传过来的数据做个优化；
全部代码

from flask import Flask, render_template, request

app = Flask(__name__, template_folder='login')


@app.route('/', methods=['get', 'post'])
def hello_flask():
    user = request.form.get('user')
    password = request.form.get('password')
    print(user, '===', password)
    return render_template("login.html")


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

前端请求后，后端收到的数据

dd === 1212
1

这样看下来，前后端链路算是通了；

请求方法分离

这一部分主要是将get和post方法隔离开，避免影响逻辑出错

定义一个user_dicts ，模拟数据库查询用户名密码数据来做登录校验。

from flask import Flask, render_template, request

app = Flask(__name__, template_folder='login')

user_dicts = {"zhangsan": "aaa", "lisi": "bbb"}


@app.route('/', methods=['GET', 'POST'])
def hello_flask():
    print(request.method)
    if request.method == 'GET':
        return render_template("login.html")
    user = request.form.get('user')
    password = request.form.get('password')
    if user in user_dicts:
        if user_dicts[user] == password:
            return render_template("home.html")
        else:
            error_msg = {"data": "密码错误"}
    else:
        error_msg = {"data": "用户不存在"}

    return render_template("login.html", error_msg=error_msg)


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
</head>
<body>
<h1>Home page</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    <form action="/" method="post" >-->
    <form method="post" >
  	<!---name：里面的类容会提交给服务器--->
  	<!-----value:用于指定相应的显示信息--->
  	<!--实际开发过程中用户初始界面只需要用户名和用户密码提交就可以了-->
  	<table align="center" >
  		<tr>
  			<td>用户姓名:</td>
  			<td><input type="text" name="user" ></td>
  		</tr>
  		<tr>
  			<td>用户密码:</td>
  			<td><input type="password" name="password" ></td>
  		</tr>
  		<tr>
  			<td><input type="submit"  value="登录">
            {{ error_msg.data }}
            </td>
  			<td>
  				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset"  value="重置">
  			</td>
  		</tr>

  	</table>
  </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

输入一个错误密码的测试
在这里插入图片描述
输入一个用户不存在的测试

前端优化

出现异常字段标红
在这里插入图片描述
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    <form action="/" method="post" >-->
    <form method="post" >
  	<!---name：里面的类容会提交给服务器--->
  	<!-----value:用于指定相应的显示信息--->
  	<!--实际开发过程中用户初始界面只需要用户名和用户密码提交就可以了-->
  	<table align="center" >
  		<tr>
  			<td>用户姓名:</td>
  			<td><input type="text" name="user" ></td>
  		</tr>
  		<tr>
  			<td>用户密码:</td>
  			<td><input type="password" name="password" ></td>
  		</tr>
  		<tr>
  			<td><input type="submit"  value="登录">
            <span style="color: red">{{ error_msg.data }}</span>
            </td>
  			<td>
  				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset"  value="重置">
  			</td>
  		</tr>

  	</table>
  </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

短暂的周末又要飞过，加油每一天~~~

相关阅读:
Java-Enum常量特定方法
 EasyExcel3.0读(日期、数字或者自定义格式转换)
open vswitch源代码解析(二)flow table解析函数入口ovs_flow_tbl_lookup_stats
[附源码]java毕业设计企业公开招聘系统
 JS中的栈和堆
 电脑重装系统后Win10如何添加系统组件
 分布式服务的接口幂等性如何设计
 文举论金：黄金原油全面走势分析策略独家指导
 程序员做技术分享或公开演讲时的建议，希望能帮到大家
 物联网和互联网医院小程序：如何实现医疗设备的远程监测和管理？
原文地址：https://blog.csdn.net/qq_41604569/article/details/128065192