flask项目完成登录注册操作

这一次我把源码放到网盘链接里，大家可以根据需要查看。

链接：https://pan.baidu.com/s/1ZWdIYWAF3t1BgUhEnNjH0Q

提取码：ab5g

根据之前flask的操作之后，我们已经成功建立好用户表和文章表，现在就可以开始制作页面了。

首先在user包中创建view.py，然后使用蓝图，建路由：

在这里插入图片描述

*首先我们可以建好首页的路由，这里只需要简单的进入首页（等完成登录注册操作的路由后，可以加上判断是否登录来显示不同界面），然后是index.html的制作，这里我是使用了flask-bootstrap来简化了前端页面的制作，所以还需要导入flask-bootstrap，很简单直接终端导入。

pip install flask-bootstrap

。*

然后在templates中建立base.html（这是模板）后面的根据它修改其中的block块就可以。base.html代码：

{% extends "bootstrap/base.html" %}
{% block title %}首页{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        body {
            background-image: url("{{ url_for('static',filename='images/bg.jpg') }}");
        }

        #myfoot {
            border-top: 1px solid darkgray;
            font-size: 14px;
            text-align: center;
            color: lightgray;
        }

        .navbar {
            height: 70px;
            padding-top: 10px;
        }

        #bs-example-navbar-collapse-1 {
            font-size: 18px;
            font-weight: bold;
        }

        .navbar-brand {
            font-size: 25px;
            font-weight: bold;
        }
    </style>
{% endblock %}

{% block navbar %}
    <div style="height: 80px;"></div>
    <nav class="navbar navbar-inverse">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    个人博客
                </a>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">关于我</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">文章分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">程序人生</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">随笔</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">慢生活</a></li>
                        </ul>
                    </li>
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">留言板</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    {% if user %}
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">欢迎！{{ user.username }}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">用户中心</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="{{ url_for('user.logout') }}">退出</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="{{ url_for('user.login') }}">登录</a></li>
                        <li><a href="{{ url_for('user.register') }}">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
{% endblock %}

{% block content %}
    {% block newcontent %}
        <h1>Hello, Bootstrap</h1>
    {% endblock %}
    {% block footer %}
        <p id="myfoot">京ICP备11008000号-6京公网安备11010802020853</p>
    {% endblock %}
{% endblock %}

上面的代码中，都是使用url_for()来查找路由。

然后再在templates中建立user包，在user包中建立index.html（很简单），代码如下:

{% extends 'base.html' %}
{% block title %}
    博客首页
{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        #container {
            width: 1000px;
            margin: 0 auto;
        }

        .article {
            width: 1000px;
            background-color: darkseagreen;
            height: 100px;
            margin-bottom: 20px;
            border-bottom: 1px solid gray;
        }
    </style>
{% endblock %}

{% block newcontent %}
    <div id="container">
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
    </div>
{% endblock %}

这样我们的首页就做好了，直接在终端输入：python app.py runserver,点击进入（注意这里是路由是http://127.0.0.1:5000/user/）可以看到如下界面：

在这里插入图片描述

上面原始界面的效果不太美观，加上图片后的效果：

这样首页就做好了，然后是注册的路由：

# 用户注册
@user_bp1.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        repassword = request.form.get('repassword')
        phone = request.form.get('phone')
        email = request.form.get('email')
        if password == repassword:
            # 注册用户
            user = User()
            user.username = username
            # 使用自带的函数实现加密：generate_password_hash
            user.password = generate_password_hash(password)
            # print(password)
            user.phone = phone
            user.email = email
            # 添加并提交
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('user.index'))
    return render_template('user/register.html')

这里的密码使用了自带的加密，你也可以使用hashlib.sha256等，然后就去制作注册的前端界面（可以去链接里找到项目直接看，这里就不展示了），然后运行程序：
这里可以给手机号码跟邮箱添加事件（查看是否在数据库中已存在，手机号码是否格式正确）。

然后就是登录界面的路由：

# 用户登录
@user_bp1.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        users = User.query.filter(User.username == username).all()
        for user in users:
            # 如果flag=True表示匹配，否则密码不匹配
            flag = check_password_hash(user.password, password)
            if flag:
                # 1。cookie实现机制
                # response = redirect(url_for('user.index'))
                # response.set_cookie('uid', str(user.id), max_age=1800)
                # return response
                # 2。session机制,session当成字典使用
                session['uid'] = user.id
                return redirect(url_for('user.index'))

        else:
            return render_template('user/login.html', msg='用户名或者密码有误')
    return render_template('user/login.html')

这里还是要把密码加密跟原来进行比对，如果密码错误返回信息在当前界面提醒用户。

制作好前端登录界面后效果如下：

在这里插入图片描述

如果密码错误效果：

成功登录后：

这样简易的登录注册就做完了（后续会加上其他效果）。

最后把当前使用的库展示下：

原文链接：https://blog.csdn.net/m0_51140304/article/details/123284081

你可能也喜欢