登陆页面和注册页面的搭建

还是跟导航条的制作一样，我们的登录页面和注册页面也是在bootstrap上寻找模板。
我们在bootstrap上全局CSS样式寻找到可用的表单：

5.png

copy下这个样式的代码
然后进行一些小的细微的调整

{% extends 'base.html' %}
{% block title %}登录{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static',filename="css/login.css") }}">
{% endblock %}
{% block main %}
    <form action="#" method="POST">
    <div class="form-container">
        <h3 class="denglu">登录</h3>
        <div class="form-group">
            <input type="text" class="form-control" name="username" placeholder="请输入用户名">
        </div>
         <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block">登录</button>
        </div>
    </div>
    </form>
{% endblock %}

登录页面如下：

6.png

接下来制作注册页面，注册页面与登陆页面类似：

{% extends 'base.html' %}
{% block title %}注册{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static',filename="css/login.css") }}">
{% endblock %}
{% block main %}
    <form action="#" method="POST">
    <div class="form-container">
        <h3 class="denglu">注册</h3>
        <div class="form-group">
            <input type="text" class="form-control" name="username" placeholder="请输入用户名">
        </div>
         <div class="form-group">
            <input type="password" class="form-control" name="password1" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="password2" placeholder="确认密码">
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block">注册</button>
        </div>
    </div>
    </form>
{% endblock %}

注册页面的效果：

7.png

这样前端页面的制作基本完成了，接下来进行将前台页面与数据库相连的操作：

login和register页面的视图函数如下：

def login():
    if request.method=='GET':
        return render_template('login.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        user = User.query.filter(User.username == username,User.password==password).first()
        if user:
            session['userid']=user.id
            session.permanent=True
            return redirect(url_for('index'))
        else:
            return "用户名或密码错误！"


@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')
        user = User.query.filter(User.username==username).first()
        #判断注册的用户名是否重复
        if user:
            return "该用户名已被使用，请重新注册！"
        #判断两次输入的密码是否一样
        else:
            if password1 != password2:
                return "两次输入的密码不一致！"
            else:
                user = User(username=username,password = password1)
                db.session.add(user)
                db.session.commit()
                #注册成功后，自动跳转到登陆页面（重定向）
                return  redirect(url_for('login'))

效果展示：

jianshu.gif