Flask笔记(1)前后端基本交互 - 登录验证

最新推荐文章于 2023-11-20 20:05:39 发布

way_hj

最新推荐文章于 2023-11-20 20:05:39 发布

阅读量715

点赞数

分类专栏： web开发 python 文章标签： flask python 前端

本文链接：https://blog.csdn.net/way_hj/article/details/127463623

版权

web开发同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

python

1 篇文章 0 订阅

订阅专栏

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测试功能。