Flask框架搭建2实现用户注册输入框

这几天,我在想怎么把Flask框架搭建过程写成文章,一直纠结,因为这东西不是靠说就能说清楚的,要动手实操的。今天不犹豫了,我就跟着我的想法走,带领大家一起来参观搭建过程,虽然我的想法也不是很专业,甚至有许些业余。所以,还请大家勿要见怪,欢迎大家前来批评指正。

完整代码:

from flask import Flask,render_template,request
from werkzeug.routing import BaseConverter


class RegexConverter(BaseConverter):
    def __init__(self,url_map,*items):
        super(RegexConverter,self).__init__(url_map)
        self.regex = items[0]


app = Flask(__name__)
app.url_map.converters['regex'] = RegexConverter



@app.route('/')
def index():
    return render_template('index.html', title='Welcome')


@app.route('/services')
def services():
    return 'Service'


@app.route('/about')
def about():
    return 'About'


@app.route('/user/<regex("[a-z]{3}"):user_ID>')
def user(user_ID):
    return 'User %s' % user_ID


@app.route('/projects/')
@app.route('/our-works/')
def projects():
    return 'The project page'


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


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

首先,我们从flask库中导入需要的Flask,render_template,request模块,并从werkzeug.routing库中导入BaseConverter模块。我们先不要管语句的意思。
在这里插入图片描述
我们先往下看,将原先初始定义的@app.route(’/’)修改成如下样子:
在这里插入图片描述
然后,这里我们的返回值用到了函数render_template(),并且引入了一个名为index的HTML文件。这个文件是这样子的,我们把它放在templates目录下,如下图:
在这里插入图片描述
接着,我们在这个文件中定义了href(超链接)的名字以及链接指向的路由@app.route(’/services’)和@app.route(’/about’)。还设置了标题title为一级标题,还设置了CSS(层叠样式表),是在static目录下面,并且文件名为site的CSS文件。所以,如下图所示:
在这里插入图片描述
我们接着去配置css文件,如下图:
在这里插入图片描述
之后,我们还要去写两个路由,一个是services,另一个是about。所以,如下图:
在这里插入图片描述
这里,我们要注意一点,就是每个路由中间的空距为两个空行。(别问我为什么,我们踢扯说是格式规定,虽然,我不太相信,但这并不是我的研究重点,懒得去深入)我们运行后,结果如下图:
在这里插入图片描述
点击进去,如下图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接着,我们再往下做,我们又新增两个路由,但只定义一个函数,看一下,会出现什么效果?代码如下:
在这里插入图片描述
我们修改地址,如下图:
在这里插入图片描述
结果:
在这里插入图片描述
在这里插入图片描述
结果:
在这里插入图片描述
我们发现,这样做的结果是让两个地址共用一个页面。

然后,我们再做一个user_ID用户页面,如下图:
在这里插入图片描述
这里,我们用到了int整形,还有格式化字符串的方法format(),在user后面输入任意整数,运行结果:
在这里插入图片描述
在这里插入图片描述
然后,我们要实现登录界面,就要修改上一个代码,如下图:
在这里插入图片描述
这次,我们用到了正则表达式,从小写字母a到z,任意输入三个作为用户名。

还加入了登录界面,如下图:
在这里插入图片描述
我们设置了两个常规的请求,get和post请求,并且引入了一个名为login的HTML文件。这个login文件的目录和配置,如下图:
在这里插入图片描述
接着,我们在前面加上如下代码:
在这里插入图片描述

定义一个RegexConverter类继承BaseConverter的URL转换器。初始化,设置参数url_map和items(元组)。运行结果:
在这里插入图片描述
在浏览器的地址框内输入,如下图:
在这里插入图片描述
结果:
在这里插入图片描述
输入内容后,结果:
在这里插入图片描述
在这里插入图片描述
感觉挺有收获的,不管怎么说,既然一件事要做,就要做好,所以,我是边看视频,边想边做,经过了2个小时做出来了。

最后,感谢大家前来观看鄙人的文章,文中或有诸多不妥之处,还望指出和海涵。

猜你喜欢

转载自blog.csdn.net/weixin_43408020/article/details/107869217