初始flask交互

最新推荐文章于 2024-12-09 21:28:44 发布

xiaobai_qxjn

最新推荐文章于 2024-12-09 21:28:44 发布

阅读量207

点赞数 3

分类专栏： flask交互 python路由文章标签： flask python html5 list

本文链接：https://blog.youkuaiyun.com/xiaobai_qxjn/article/details/120337535

版权

flask交互同时被 2 个专栏收录

2 篇文章

订阅专栏

python路由

2 篇文章

订阅专栏

初始Flask交互

目的：完成界面注册信息加载到后台，并写入本地 csv

1.flask中的路由文件

setting.py 文件指定开发环境

ENV = "development"
DEBUG = True

from flask import Flask,render_template,redirect,request,url_for

import csv
import Setting

# 创建文件
file = "E:/python练习合集/Flask文件/test_0915/user.csv"
f = open(file,"a",encoding="utf-8")
f.close()

app = Flask(__name__)
app.config.from_object(Setting)

@app.route('/',methods=['GET','POST'])
def index():
    return render_template("index.html")

@app.route('/register/',methods=['GET','POST'],endpoint="r")
def register():
    # 如果界面为 Post
    return render_template("register.html")

# 登录成功之后返回数据
@app.route('/successful_pack/',methods=['GET','POST'],endpoint="sp")
def successful():
    user_massage = []
    if  request.method == 'POST':
        username = request.form.get("username")
        userpassword = request.form.get("password")
        userpassword_again = request.form.get("repassword")

        if  userpassword != userpassword_again:
            # 提示窗口
            return render_template("index.html")
        else:
            user_dict = {"用户名": username, "用户密码": userpassword}
            user_massage.append(user_dict)
            # 写入到后台的 csv 文件中去
            with open(file,"a",encoding="utf-8",newline="") as O:
                writer = csv.DictWriter(O,["用户名","用户密码"])
                writer.writerows(user_massage)
                O.close()
            return render_template("successful_page.html")
    return redirect(url_for("/"))

@app.route("/show/",methods=['GET','POST'],endpoint="s")
def show():
    # return "你"
    rootuser = request.form.get("rootname")
    rootpassword = request.form.get("rootpassword")

    if  rootuser == "root" and rootpassword == "root":
        with open(file,"r",encoding="GBK") as O:
            reader_dict_list = csv.DictReader(O)
            # print(reader_dict_list)
            return render_template("show.html", data_list=reader_dict_list)
            O.close()
    else:
        return redirect(url_for("rp"))

@app.route("/root_package/",methods=['GET','POST'],endpoint="rp")
def root_package():

    return render_template("root_register.html")


if __name__ == '__main__':
    app.run()

【“ 毛坯房的 ”HTML】

2.HTML

（1）首页界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <style type="text/css">
        a:link {
            font-family: "仿宋";
            font-size: 24px;
            font-weight: bolder;
            color: black;
            text-decoration: underline;
        }

        a:visited {
            font-family: "仿宋";
            font-size: 24px;
            font-weight: bolder;
            color: black;
            text-decoration: underline;
        }
        a:hover {
            font-family: "仿宋";
            font-size: 30px;
            font-weight: bolder;
            color: red;
        }
        a:active {
            font-family: "仿宋";
            font-size: 24px;
            font-weight: bolder;
            color: #000;
            text-decoration: underline;
        }

    </style>
</head>
<body bgcolor="#f0f8ff">
    <div>
        <p><a href="/"  >首页</a></p>
        <p><a href="/register/" class="a">注册</a></p>
        <p><a href="/root_package/" class="a">用户信息展示</a></p>
    </div>
</body>
</html>

在这里插入图片描述

（2）注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>
        .a{
            font-size: 15px;
            color: beige;
        }
    </style>
</head>
<body style="background-color: beige" >
    <form action="/successful_pack/" method="post">
        <table align="center" width="50%">
        <ul class="a" style="width: 100%">
            <p><input type="text" name="username" placeholder="name："></p>
            <p><input type="password" name="password" placeholder="password："></p>
            <p><input type="password" name="repassword" placeholder="password again"></p>
        </ul>
        <ul><input type="submit" value="提交"></ul>
    </table>
    </form>

</body>
</html>

在这里插入图片描述

如果注册的信息正确进入html，路由在访问这个 url 时便将数据进行收集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功界面</title>
    <style type="text/css">
        .b{
            color: black;
            font-size: 25px;

        }
                a:link {
            font-family: "仿宋";
            font-size: 24px;
            font-weight: bolder;
            color: black;
            text-decoration: underline;
        }

        a:visited {
            font-family: "仿宋";
            font-size: 24px;
            font-weight: bolder;
            color: black;
            text-decoration: underline;
        }
        a:hover {
            font-family: "仿宋";
            font-size: 30px;
            font-weight: bolder;
            color: red;
        }
        a:active {
            font-family: "仿宋";
            font-size: 24px;
            font-weight: bolder;
            color: #000;
            text-decoration: underline;
        }

    </style>
</head>
<body style="background-color: beige">
    <div>
        <ul class="b" >
            成功界面
        </ul>
        <a href="/">
            返回首页
        </a>
    </div>
</body>
</html>

（3）显示界面

注意：

（1）得先进入 root界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录页面</title>
</head>
<body style="background-color: beige">
    <form action="/show/" method="post">
        <table align="center" width="50%">
        <ul class="a" style="width: 100%">
            <p><input type="text" name="rootname" placeholder="rootname："></p>
            <p><input type="password" name="rootpassword" placeholder="rootpassword："></p>
        </ul>
        <ul><input type="submit" value="提交"></ul>
        </table>
    </form>
</body>
</html>

在这里插入图片描述

（2）show界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示界面</title>
</head>
<body style="background-color: beige">
    <table>
        {% for data_dict in data_list %}
{#            {{ data_dict }}#}
            <tr>
                <td>用户名:{{ data_dict.get("用户")}}</td>
                <td>用户密码：{{ data_dict.get("密码") }}</td>

            </tr>
        {% endfor %}

    </table>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示界面</title>
</head>
<body style="background-color: beige">
    <table>
        {% for data_dict in data_list %}
{#            {{ data_dict }}#}
            <tr>
                <td>用户名:{{ data_dict.get("用户")}}</td>
                <td>用户密码：{{ data_dict.get("密码") }}</td>

            </tr>
        {% endfor %}

    </table>

</body>
</html>