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

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

登录页面如下：

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

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

注册页面的效果：

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

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.idsession.permanent=Truereturn 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'))

效果展示：