8.注册和登录功能实现（1）—— 页面设计和获取POST数据

Lemon_95 发布于2019-07-30 15:26 / 931人阅读

摘要：在导航条中，右侧有登录和注册两个链接，储存用户数据的模型也有了，现在我们来实现登录和注册的功能。

在导航条中，右侧有登录和注册两个链接，储存用户数据的Users模型也有了，现在我们来实现登录和注册的功能。
先来看注册功能的实现，新建一个视图函数，如下:

@app.route("/register/")
def register():
    return render_template("register.html")

在导航条模板base.html中，为注册添加链接，使用url_for函数将其href属性值修改为register.html，如下：

注册

接下来我们要去制作register.html了，这部分是基础的html/css知识，控件也是用的Bootstrap框架，最终注册页http://127.0.0.1:5000/register/的效果图如下（结尾贴出代码）：

register.html中的表单控件，我们设置了其方法为POST，注册按钮的type为submit，这样点击提交按钮的时候，浏览器就会以POST方法去请求当前网址，但我们的视图函数默认只能接受GET方法，因此我们要为其添加POST方法，并使用flask中的request对象获取表单提交的数据，最终视图函数代码如下：

@app.route("/register/", methods=["GET", "POST"])
def register():
    if request.method == "GET":
        return render_template("register.html")
    else:
        username = request.form.get("username")
        password1 = request.form.get("password1")
        password2 = request.form.get("password2")
        print(username, password1, password2)
        return " "

request.form.get方法需要传入表单控件的name属性的值，这样就能获取到对应的填入到表单中的值了，为了演示，我们在结尾将其打印了出来，结果显示无误，说明后端已经获取到了POST提交的数据。
登陆页面也是一样的原理，拿register.html简单修改成login.html，模仿register再增加一个login视图函数，然后访问http://127.0.0.1:5000/login/，效果如下：

结尾贴上register.html的内容：

{% extends "base.html" %}

{% block static_files %}

{% endblock %}

{% block page_name %}注册{% endblock %}

{% block body_part %}
注册

    
      用户
      
    
    
      密码
      
    
    
      密码
      
    
    
        
    

{% endblock %}

代码中引入的register_login.css是register.html和login.html通用的，其内容如下：

h3{
    text-align: center;
    padding-top: 10px;
}

.form{
    width: 400px;
    margin: 0 auto;
}

form.form > div{
    padding: 8px;
}

此外还对导航条模板做了简单的调整，第一是增加了一个block，给每个继承它的html一个放自定义css文件的地方，第二是在body中增加了一个div块，即register.html和login.html中间白色的内容区域，最终base.html代码如下：




    
    
    
    
    
    
    {% block static_files %}{% endblock %}
    {% block page_name %}{% endblock %}-HarpQA


    
        ...省略...
        登录
        注册
        ...省略...
    
    
        {% block body_part %}
        {% endblock %}

base.css也添加了

的样式：

.body-container{
    width: 600px;
    background: white;
    margin: 0 auto;
    border-radius: 5px;
}

GPU云服务器云服务器 asp实现登录和查询用c语言写登录和注册关于页面弹框功能实现 html登录功能实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41250.html

node express mongoDB个人博客总结

摘要：前端渲染可以减轻服务器端的开销，但是首屏的渲染会加长时间后端渲染增加服务器的开销，但是减少客户端展示的时间 1 注册、登录和退出 1.1 用户注册、登录配置模板引擎、mongoDB数据库驱动、静态文件路径和post请求解析中间件统一api.js路由的数据返回格式 // 统一返回数据格式 var responseData; // 每次请求进来都进行初始化 router.use(f...

missonce 2019-08-21 11:38 评论0 收藏0
github 授权登录教程与如何设计第三方授权登录的用户表

摘要：本文讲解的就是授权登录的教程。从拿到的用户信息如下图最终效果参与文章如何设计第三方授权登录的用户表第三方授权登录的时候，第三方的用户信息是存数据库原有的表还是新建一张表呢答案这得看具体项目了，做法多种，请看下文。 showImg(https://segmentfault.com/img/remote/1460000018372844?w=1210&h=828); 需求：在网站上想评论一...

Acceml 2019-08-23 15:37 评论0 收藏0
从前后端分别学习——注册/登录流程1

摘要：上面的写法有个问题点击按钮发送请求后，客户端一直收不到响应，就会报错其实传送的时是一个异步的过程，里面还没执行完，外面就已经执行了，这边可以用来解决下这个问题内部返回一个对象，成功调用函数，失败调用函数，这边就默认它会成功。今天来研究一个小小的功能。当我们进入一个网站，它怎么判断我是不是它的用户？让用户登录呗，如果它能正常登录，它就是我的用户呗？你有没想过它是怎么判断我是不是它用户的...

Gemini 2019-08-26 12:16 评论0 收藏0
Python学习之路18-用户账户

摘要：通过的定制字段的输入小部件，将文本框的宽度设置为列，而不是默认的列。为此将创建一个新的应用程序，其中包含处理用户账户相关的所有功能。该函数将会为通过了身份验证的用户对象创建会话。《Python编程：从入门到实践》笔记。本篇记录如何创建用户注册系统，如何实现用户输入自己的数据。 1. 前言在本篇中，我们将：创建一些表单，让用户能够添加主题和条目，以及编辑既有的条目；实现一个身份...

bovenson 2019-07-31 11:09 评论0 收藏0