登陸頁面和注冊頁面的搭建

還是跟導(dǎo)航條的制作一樣吞瞪，我們的登錄頁面和注冊頁面也是在bootstrap上尋找模板刊咳。
我們在bootstrap上全局CSS樣式尋找到可用的表單：

5.png

copy下這個樣式的代碼
然后進行一些小的細微的調(diào)整

{% 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

這樣前端頁面的制作基本完成了审姓，接下來進行將前臺頁面與數(shù)據(jù)庫相連的操作：

login和register頁面的視圖函數(shù)如下：

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()
        #判斷注冊的用戶名是否重復(fù)
        if user:
            return "該用戶名已被使用近弟，請重新注冊缅糟！"
        #判斷兩次輸入的密碼是否一樣
        else:
            if password1 != password2:
                return "兩次輸入的密碼不一致！"
            else:
                user = User(username=username,password = password1)
                db.session.add(user)
                db.session.commit()
                #注冊成功后祷愉，自動跳轉(zhuǎn)到登陸頁面（重定向）
                return  redirect(url_for('login'))

效果展示：

jianshu.gif