通过flask搭建，简单的网站，实现注册登录效果，初步了解搭建网页的基本架构。

最新推荐文章于 2024-09-05 10:42:01 发布

皆过客，揽星河

最新推荐文章于 2024-09-05 10:42:01 发布

阅读量844

点赞数 17

分类专栏： flask 文章标签： flask python 后端前端 html5 用户登录

本文链接：https://blog.csdn.net/2301_79810514/article/details/138798226

版权

flask 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网站架构了解

通过flask搭建，简单的网站，实现注册登录效果，初步了解搭建网页的基本架构。

前提准备

html在开发中最主要的一些标签知识
flask中自带的接收信息给后台的语法

1）html基础标签的使用

<h1>用于强调文本内容，放大字体</h1>

/* 行内标签&&块状标签 */
1. 行内标签：字符多长就占多长的空间，内容会不断的添加在行后
<span>行内标签</span>

2. 块状标签，就独占一整行的内容空间
<div></div>  
<table></table>

3. input系列标签
<input type="text" />  这是一个文本框
<input type="password" />  这是一个密码框,用于输入密码
<input type="radio" /> 这是一个单选框，用于多选一
<input type="checkbox" /> 这是一个多选框，用于多选多
<input type="file" /> 这是一个文件上传按钮，点击后自动打开文件管理系统
<input type="submit" value="提交"/> 这是一个用于提交表单的按钮，在做用户注册和用户登录时经常用到
<input type="button" value="提交"/> 这是一个普通的按钮，经常和点击发生事件结合在一起，也就是信号与槽。
<input type="reset" value="重置" /> 当你账号和密码都出现错误的时候你可以点击重置按钮，实现清密码框的内容

4. 下拉框
1）单选，eg.选择一个你现在居住的城市
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
</select>

2）多选，eg.多选题
<select multiple>
    <option>选择A</option>
    <option>选择B</option>
    <option>选择C</option>
    <option>选择D</option>
</select>

5. 多行文本输入，这个文本框的右下角可以拉伸框的大小，然后行数可以是整数也可以是小数，而且rows设定的行数并不是只能输入这么多行的内容，而是在进入也面后，输入框的高度。
<textarea rows="行数"></textarea>

2）基于前面学的flask

用户发出get请求时，网页内容信息会拼接在网络路径上。
用户发出post请求，网页内容不会显示在网络路径上，因此安全性相对get较高，常用于注册和登录中的请求。

下面是注册的基础html界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<form method="post" action="/post/reg">
<div>
    用户名：<input type="text" name="user"/>
    密码：<input type="password" name="pwd"/>
</div>
    <div>
        
    性别：
    <input type="radio" name="gender" value="man">男
    <input type="radio" name="gender" value="woman">女
</div>
<div>
    爱好：
    <input type="checkbox" name="hobby" value="10">篮球
    <input type="checkbox" name="hobby" value="20">足球
    <input type="checkbox" name="hobby" value="30">乒乓球
    <input type="checkbox" name="hobby" value="40">棒球
</div>
<div>
    城市：
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>
</div>
<div>
    <div>擅长领域：</div>
    <select name="skill" multiple>
        <option value="100">打游戏</option>
        <option value="200">睡觉</option>
        <option value="300">吃饭</option>
        <option value="400">刷抖音</option>
    </select>
</div>
<div>
    备注：<textarea name="more"></textarea>
</div>
    <div>    <input type="submit" value="submit按钮"></div>
</form>
</body>
</html>

从以上代码可以看出，所有的内容都被标签所包裹
在标签的尖括号中，method指定了用户请求类型为post，action是将动态信息传递给了后台flask框架对应的引用下：
在实现性别选择的时候，会在input标签中加入name，且保证name赋值的内容相同，是为了，避免同时可选择男好女，这种逻辑错误！
可观察到，每个input的标签中都会有value，是因为，在将数据返回给后天的时候，通常用字典的格式，所以要有key，才能接住对应的值！
在input标签中都设置的有name是为了，在数据返回时，能找到对应想返回的内容

@app.route('/post/reg', methods=['POST'])
def post_register():
    # 1.接收用户通过POST形式发送过来的数据
    user = request.form.get('user')
    pwd = request.form.get('pwd')
    gender = request.form.get('gender')
    hobby = request.form.getlist('hobby')
    city = request.form.get('city')
    skill = request.form.getlist('skill')
    more = request.form.get('more')
    print(user, pwd, gender, hobby, city, skill, more)
    # 将用户信息写入文件中， 写如Excel或数据库中实现注册。

    # 2.给用户再返回结果
    return "注册成功"

观察上段代码可以发现，在获取用户输入内容信息时，有的用……get()而有的用……getlist()，所以在接收多行信息（多选内容）时用getlist()。
等后期学了Python和数据库的结合时，你就可以将用户信息存入数据库，下次登录通过输入的账号和密码与数据库的用户数据对比，若一样，则登录成功，若不一样则登录失败！
在设置登录界面也是有讲究的！首先用户看到登录的界面肯定是get请求，在输入完账号密码后，发送的肯定是post请求，所以flask的逻辑代码段就可以如下怎么写：

@app.route('/login', methods=['GET','POST'])
def login_register():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        user = request.form.get('username')
        pwd = request.form.get('password')
        print(user, pwd)
        return '登录成功'