python 一点flask框架加一点html在本地登录注册_html登录注册界面代码怎么打

作者：菜鸟追梦旅行 | 2024-04-15 14:44:30

踩

html登录注册界面代码怎么打

一：1.登录界面html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <h1>用户登录</h1>
    <form action="/login" method="post">
            用户名：<input type="text" name="username">
                密码:<input type="text" name="password">
        <input type="submit" value="submit提交">
 
    </form>
</body>
</html>

2.注册界面html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
</head>
<body>
 
 
    <!--普通的网址跳转（url方法）和输入搜索（表单提交）一般都是get请求
    注册登录(表单提交）一般都是post请求
    其实本质上都可以，post请求你提交的数据不会和网址合并，看不出来，“藏起来了”
    get请求会合并在网址上，网址？后面就是数据参数了
    如果是表单提交，get方法和post方法明显区别就是是否会作为后面的参数合并前面的网址，
    -->
    <h1>用户注册</h1>
    <form method="post" action="/do/register">
        <!--这个i love you之间的空格拼接网址的时候会转换成%20-->
        <div>用户名：<input type="text" name="username"></div>
        <div>密码：<input type="password" name="password"></div>
 
        <div>性别：<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女</div>
          <div>
        爱好：<input type="checkbox">篮球
        <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" id="" >
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
            <option value="gz">广州</option>
        </select>
        <!--默认是最上面那个，单选，也可以用seleced直接选择默认的
        -->
 
        </div>
        <div>
        擅长领域：
        <select name="skill" id="" multiple>
            <option value="cf">吃饭</option>
            <option value="sz">睡觉</option>
            <option value="pwz">泡妹子</option>
            <option value="khs">看黑丝</option>
        </select>
        <!--默认是最上面那个，单选，也可以用seleced直接选择默认的单选
        可以加上multiple,然后按住shift就可以多选了-->
 
 
        </div>
        <input type="submit" value="submit提交">
        <!--这个submit提交input按钮一点要在form表单里才能提交到拼接了action的网址-->
         <div>
        备注：
        <textarea name="more" id="" cols="50%" rows="20%">
                时光流转，星河长明
        </textarea>
         </div>
    </form>
 
 
 
 
 
    <div>
        <input type="button" value="button提交">
        <input type="submit" value="submit提交">
    </div>
 
 
 
 
 
 
 
 
</body>
</html>

3.登录注册跳转前的总页面html


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
    <a href="http://127.0.0.1:5000/login"><input
            type="button">登录</a><br>
    <a href="http://127.0.0.1:5000/app"><input type="button" >注册</a>
    <!--超链接竟然可以链接本地的网页，并且这种普通button按钮提交就只是get提交-->
</body>
 
</html>

二.

1.python登录和注册的主要代码


 
 
from flask import Flask, render_template,request
 
app = Flask(__name__)
 
@app.route('/app',methods=['GET'])
#这个methods表示这个/app网址被激活后再次接受被服务器用提交的数据激活的方式,form表单那里是提交的方式
#一开始的网页也是提交数据后再合并网址之后被本地开发服务器激活的
def app2():
    #初始注册页面路由
   return render_template("app.html")
 
 
#根据form表单的action提交地址和提交方式的不同，选择性匹配不同的路由装饰器，激活不同的对应网址，也会显示不同的网址
# 从而再一个初始网页做到不同的网页跳转效果，当然，都可以获取表单数据键值对的字符串元组组成的列表，实际上一开始服务器就拿到了所有关键数据，并且可以被flask框架解析显示出在控制台
#当然也可以直接输入url方法进入不同的初始路由装饰器达到不同效果
#url方法就是直接在ip之后输入对应的url
#提交地址和路由装饰器地址的匹配（路由还会匹配提交的方式）发生再url方法合并网址之后，form表单数据提交合并网址之前，也就是说，我们这里后面再提交get或post都是合并前就匹配好路由了
 
@app.route('/do/register',methods=['GET','POST'])
def dp_register():
    #提交并解析数据的路由
    if request.method == 'GET':
        #如果是get方式的form表单提交
        print(request.args)
        print(request.args.get('username'))
        print(request.args.get('password'))
        print(request.args.getlist('hobby'))
        print(request.args.get('city'))
        print(request.args.getlist('skill'))
        print(request.args.get('more'))
        return "注册成功"
    else:
        #剩下的就是post表单提交，因为这个路由装饰器只能匹配get或者post表单提交，并且提交的中地址还要是它这个地址
        print(request.form)
        return "注册成功"
 
        #实现一个路由匹配两种form表单提交方式，并输出提交的关键数据，但是一般都是初始登录或者注册界面都在一个路由
        #get提交匹配时候就是界面，post提交匹配的时候就是影藏登录注册信息提交给后台，这样应该是比较常见的
 
@app.route("/login", methods=["POST", "GET"])
def login():
    if request.method == "GET":
        return render_template("login.html")
    else:
        print(request.form)
        return "登录成功"
    #这种模式注册也可以，说白了就是自己路由返回的界面上提交给自身路由，这种通过method来区分的话，肯定就只能post提交，通过其他路由搞出界面就可以由两种提交方式get post
    #默认enter对应默认get提交
@app.route("/index", methods=["GET", "POST"])
def index():
    return render_template("index.html")
 
 
 
 
 
 
if __name__ == '__main__':
    app.run()

2.杂七杂八的

1.就是个注册界面


from flask import Flask, render_template
 
app = Flask(__name__)
@app.route('/register')
def register():
    return render_template("register.html")
if __name__ == '__main__':
    app.run()


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时光流转</title>
</head>
 
<body>
    <h1>用户注册</h1>
    <div>用户名：<input type="text"></div>
    <div>密码：<input type="password"></div>
    <div>性别：<input type="radio" name="250">男<input type="radio" name="250">女</div>
    <div>
        爱好：<input type="checkbox">篮球
        <input type="checkbox" name="250">足球
        <input type="checkbox" name="250">排球
        <input type="checkbox" name="250">羽毛球
        <input type="checkbox" name="250">球球大作战
        name属性在checkbox没有radio那里的效果
 
    </div>
    <div>
        城市：
        <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
            <option value="">广州</option>
        </select>
        <!--默认是最上面那个，单选，也可以用seleced直接选择默认的
        -->
 
    </div>
    <div>
        擅长领域：
        <select name="" id="" multiple>
            <option value="">吃饭</option>
            <option value="">睡觉</option>
            <option value="">泡妹子</option>
            <option value="">看黑丝</option>
        </select>
        <!--默认是最上面那个，单选，也可以用seleced直接选择默认的
        可以加上multiple,然后按住shift就可以多选了-->
 
 
    </div>
    <div>
        备注：
        <textarea name="" id="" cols="50%" rows="20%">
            这句话多少有点离谱
        </textarea>
    </div>
    <div>
        <input type="button" value="button提交">
        <input type="submit" value="submit提交">
    </div>
</body>
 
</html>

2。#注意路由路径不要重名，映射的视图函数也不要重名


from flask import Flask
 
app = Flask(__name__)
 
 
 
'''#######################
以下为框架自带的转换器，可以置于参数前将接收的参数转化为对应类型
string 接受任何不包含斜杠的文本
int 接受正整数
float 接受正浮点数
path 接受包含斜杠的文本
########################'''
 
@app.route("/index/<int:id>",)
def index(id):
    if id == 1:
        return 'first'
    elif id == 2:
        return 'second'
    elif id == 3:
        return 'thrid'
    else:
        return 'hello world!'
#我感觉就是这里的id是个变量，之前那些都是被初始化的常量，这里是规定了数据类型的id变量
#可以之后再网页地址/后面写不同的值就会当作实参传入index函数，就会返回不同的网页源代码，从而导致不同的网页显示效果
if __name__=='__main__':
    app.run()


from flask import Flask, render_template
 
app = Flask(__name__,template_folder="xxx")
#修改默认寻找网页源代码html文件的目录包
@app.route("/<string:ka>")
def kaindex(ka):
    if ka=="you":
        return render_template("ka.html")
    else:
        return "或许再未来的某一天，我会喜欢曾经全力拼搏的自己"
 
 
 
@app.route("/<int:id>")
def index(id):
    if id == 1:
        return 'first'
    elif id == 2:
        return 'second'
    elif id == 3:
        return 'thrid'
    else:
        return render_template("index.html")
#我感觉就是这里的id是个变量，之前那些都是被初始化的常量，这里是规定了数据类型的id变量
#可以之后再网页地址/后面写不同的值就会当作实参传入index函数，就会返回不同的网页源代码，从而导致不同的网页显示效果
if __name__=='__main__':
    app.run()
#利用本地主机ip地址向本地开发服务器发送请求，服务器激活特定的与本机ip有关的网址，然后自动调用通过路由或者说装饰器
#绑定的函数，返回网页源代码，显示网页效果再那个网址上，这种本地ip与本地开发服务器交互不需要联网

以下是主观臆测：

#流程应该是：本地ip向本地开发服务器发送请求，然后开发服务器接受请求信息（这里面应该有那个函数的可能参数，以及所有的表单数据参数，如果是get，就会合并网址）,有可能这个请求正常的请求是一样的
#都有cookie等信息，也分请求头请求体等信息，
#之后本地开发服务器激活这个网址，这个网址就是ip加请求部分信息组成，这个网址的合成有时可以自己手动去写（形参是变量）这时其实也是get提交表单，估计有一个数据类型判断，激活之后自动调用绑定的那个函数，返回网页源代码
#给浏览器，浏览器渲染后显示在这个网址

#正常的网址请求应该也是这样

url输入（和写好了直接ctrl点击一样）---（中间可能有一些过程）->路由网址和支持的请求方式的匹配----->表单提交数据（很多只是返回页面html的不会表单提交数据，当然也就没有网址合并）----->服务器合并网址（有表单提交并且是get才合并）---->服务器激活网址------>调用绑定函数并返回网页源代码（html)给本地浏览器（不一定函数会返回网页源代码）----->浏览器渲染之后显示在这个被激活的网址上。这个过程可能会反复进行

也就是要实现两种数据提交方式就要用俩路由，一个专门界面，一个专门数据提交

只要post数据提交就只要一个路由，get管界面，post管数据提交

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/428425