一条龙网站建设,做动物网站的原因是,学做淘宝网站是骗子吗,广州建设工程造价管理网站#x1f64c;秋名山码民的主页 #x1f602;oi退役选手#xff0c;Java、大数据、单片机、IoT均有所涉猎#xff0c;热爱技术#xff0c;技术无罪 #x1f389;欢迎关注#x1f50e;点赞#x1f44d;收藏⭐️留言#x1f4dd; 获取源码#xff0c;添加WX 目录 前言1.… 秋名山码民的主页 oi退役选手Java、大数据、单片机、IoT均有所涉猎热爱技术技术无罪 欢迎关注点赞收藏⭐️留言 获取源码添加WX 目录 前言1. 登录模块2. 注册模块3. 前端界面4. 实现效果最后 前言
本期给大家带来FlaskMySql前端的注册登录模块实现
1. 登录模块
# 登录页面
app.route(/login,methods[GET,POST])
def login():if request.method GET:return render_template(login.html)elif request.method POST:# 将输入的用户登录信息保存为字典request.form dict(request.form)# 进行过滤,如果邮箱和密码都在数据库中返回Truedef filter_fn(item):return request.form[email] in item and request.form[password] in itemusers query.querys(select * from user,[],select)filter_user list(filter(filter_fn,users))# 验证成功进入index.htmlif len(filter_user):session[email] request.form[email]return redirect(/home)else:return render_template(error.html, message用户邮箱或密码输入错误)app.route(/loginOut,methods[GET,POST])
def loginOut():session.clear() # 清除session中存储的登录数据return redirect(/login)
2. 注册模块
# 注册页面
app.route(/register,methods[GET,POST])
def register():if request.method GET:return render_template(register.html)elif request.method POST:request.form dict(request.form)# 判断第一次输入密码和第二次是否相同if request.form[password] ! request.form[passwordChecked]:return render_template(error.html,message两次输入密码不符请重新输入)def filter_fn(item):return request.form[email] in itemusers query.querys(select * from user,[],select)filter_list list(filter(filter_fn, users))if len(filter_list):return render_template(error.html,message该用户已被注册)else:# 将新注册的数据存储到数据库query.querys(insert into user(email,password) values(%s,%s),[request.form[email],request.form[password]])return redirect(/login)
3. 前端界面
!DOCTYPE html
html langenheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitnometa namedescription contentmeta nameauthor contenttitle大数据可视化平台-登陆页面/title!--更改绝对路径--link href/static/vendor/fontawesome-free/css/all.min.css relstylesheet typetext/csslink hrefhttps://fonts.googleapis.com/css?familyNunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i relstylesheetlink href/static/css/sb-admin-2.min.css relstylesheet
style.container h2 {text-align: center;margin-bottom: 20px;}.container h2 span{font-size: 50px;color: coral;margin-right: 10px;}/style/headbody classbg-gradient-primarydiv classcontainerdiv classrow justify-content-centerdiv classcol-xl-10 col-lg-12 col-md-9div classcard o-hidden border-0 shadow-lg my-5div classcard-body p-0div classrowdiv classcol-lg-6 d-none d-lg-block bg-login-image stylebackground-image: url(/static/img/login.jpg)/divdiv classcol-lg-6div classp-5div classtext-centerh2spanB/spanreeze Video/h2form action# methodpost/divform classuser methodPOST action/logindiv classform-groupinput typeemail nameemail classform-control form-control-user idexampleInputEmail aria-describedbyemailHelp placeholder用户名:admin or user/divdiv classform-groupinput typepassword namepassword classform-control form-control-user idexampleInputPassword placeholder密码:123456/divdiv classform-groupdiv classcustom-control custom-checkbox smallinput typecheckbox classcustom-control-input idcustomChecklabel classcustom-control-label forcustomCheck记住我/label/div/divbutton hrefindex.html classbtn btn-primary btn-user btn-block登录/buttonhra hrefindex.html classbtn btn-google btn-user btn-blocki classfab fa-google fa-fw/i Google账号登录/aa hrefindex.html classbtn btn-facebook btn-user btn-blocki classfab fa-facebook-f fa-fw/i Facebook账号登录/a/formhrdiv classtext-centera classsmall href/register注册新账号!/a/div/div/div/div/div/div/div/div
/div/body/html
4. 实现效果 最后
如果本文对你有所帮助还请三连支持一下博主
