【Flask微电影】05.搭建前台页面-会员登录注册和会员中心
2018-10-28 本文已影响47人
吾星喵
搭建前台主页页面
静态文件放入static目录下
创建基础页面base.html
创建base.html用于公用的页面顶部和底部
app/templates/home/base.html
修改静态文件为{{ url_for('static', filename='base/css/bootstrap.min.css') }}格式，添加内容块{% block content %}{% endblock %}，用于中部内容显示
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<title>微电影</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
<style>
.navbar-brand>img {
display: inline;
}
</style>
<style>
.media{
padding:3px;
border:1px solid #ccc
}
</style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--小屏幕导航按钮和logo-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand" style="width:250px;">
<img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> 微电影
</a>
</div>
<!--小屏幕导航按钮和logo-->
<!--导航-->
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="请输入电影名！">
<span class="input-group-btn">
<a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span> 搜索</a>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span> 电影</a>
</li>
<li>
<a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a>
</li>
<li>
<a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span> 注册</a>
</li>
<li>
<a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span> 退出</a>
</li>
<li>
<a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span> 会员</a>
</li>
</ul>
</div>
<!--导航-->
</div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:76px">
{% block content %}{% endblock %}
</div>
<!--内容-->
<!--底部-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
© 2018 flaskmovie 备案
</p>
</div>
</div>
</div>
</footer>
<!--底部-->
<script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
<script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script>
$(function() {
new WOW().init();
})
</script>
<script>
$(document).ready(function() {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
</html>
创建index.html模板
app/templates/home/index.html
{% extends 'home/base.html' %}
{% block content %}
<h1>你好</h1>
{% endblock %}
加载模板到首页视图
修改app/home/views.py
from . import home
from flask import render_template
@home.route("/")
def index():
return render_template('home/index.html')
访问 http://127.0.0.1:5000/ 即可看到index页面
image.png
知识点
- 静态文件引入：
{{ url_for('static', filename='文件路径') }} - 定义路由：
{{ url_for('模块名.视图名', 变量=参数) }} - 定义数据块：
{% block 数据块名称 %}...{% endblock %}
搭建会员登录页面
创建登录页面login.html
创建app/templates/home/login.html
引入数据块，添加登录的表单
{% extends 'home/base.html' %}
{% block content %}
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span> 会员登录</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_contact"><span class="glyphicon glyphicon-user"></span> 账号</label>
<input id="input_contact" class="form-control input-lg" placeholder="用户名/邮箱/手机号码" name="contact" type="text" autofocus>
</div>
<div class="col-md-12" id="error_contact"></div>
<div class="form-group">
<label for="input_password"><span class="glyphicon glyphicon-lock"></span> 密码</label>
<input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
</div>
<div class="col-md-12" id="error_password"></div>
<a href="user.html" class="btn btn-lg btn-success btn-block">登录</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
创建登录和登出视图
在app/home/views.py中添加
@home.route('/login/')
def login():
return render_template('home/login.html')
@home.route('/logout/')
def logout():
return redirect(url_for('home.login'))
访问 http://127.0.0.1:5000/login/ 或 http://127.0.0.1:5000/login/ 即可看到登录表单
image.png
修改base.html登录退出链接
<li>
<a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span> 登录</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.logout') }}"><span class="glyphicon glyphicon-log-out"></span> 退出</a>
</li>
这样上方的登录退出链接就会生效了。
搭建会员注册页面
创建注册表单register.html
新建app/templates/home/register.html
{% extends 'home/base.html' %}
{% block content %}
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> 会员注册</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_name"><span class="glyphicon glyphicon-user"></span> 昵称</label>
<input id="input_name" class="form-control input-lg" placeholder="昵称" name="name" type="text" autofocus>
</div>
<div class="col-md-12" id="error_name"></div>
<div class="form-group">
<label for="input_email"><span class="glyphicon glyphicon-envelope"></span> 邮箱</label>
<input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email" type="email" autofocus>
</div>
<div class="col-md-12" id="error_email"></div>
<div class="form-group">
<label for="input_phone"><span class="glyphicon glyphicon-phone"></span> 手机</label>
<input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone" type="text" autofocus>
</div>
<div class="col-md-12" id="error_phone"></div>
<div class="form-group">
<label for="input_password"><span class="glyphicon glyphicon-lock"></span> 密码</label>
<input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
</div>
<div class="col-md-12" id="error_password"></div>
<div class="form-group">
<label for="input_repassword"><span class="glyphicon glyphicon-lock"></span> 确认密码</label>
<input id="input_repassword" class="form-control input-lg" placeholder="确认密码" name="repassword" type="password" value="">
</div>
<div class="col-md-12" id="error_repassword"></div>
<a href="user.html" class="btn btn-lg btn-success btn-block">注册</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
创建注册视图
在app/home/views.py增加
@home.route('/register/')
def register():
return render_template('home/register.html')
image.png
修改base.html注册链接
<li>
<a class="curlink" href="{{ url_for('home.register') }}"><span class="glyphicon glyphicon-plus"></span> 注册</a>
</li>
这样顶部的注册链接就可用了
搭建会员中心页面
创建会员中心菜单usermenu.html
app/templates/usermenu.html
用于会员中心左侧菜单栏
<div class="col-md-3">
<div class="list-group">
<a href="{{ user_for('home.user') }}" class="list-group-item">
<span class="glyphicon glyphicon-user"></span> 会员中心
</a>
<a href="{{ user_for('home.pwd') }}" class="list-group-item">
<span class="glyphicon glyphicon-lock"></span> 修改密码
</a>
<a href="{{ user_for('home.comments') }}" class="list-group-item">
<span class="glyphicon glyphicon-comment"></span> 评论记录
</a>
<a href="{{ user_for('home.userlog') }}" class="list-group-item">
<span class="glyphicon glyphicon-calendar"></span> 登录日志
</a>
<a href="{{ user_for('home.moviecollect') }}" class="list-group-item active">
<span class="glyphicon glyphicon-heart"></span> 收藏电影
</a>
</div>
</div>
修改base.html添加css数据块
页面顶部style标签中
<!--........-->
<style>
.media{
padding:3px;
border:1px solid #ccc
}
</style>
{% block css %}{% endblock %}
创建会员中心user.html
增加额外的css，用于该页面的样式
{% extends 'home/base.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/usermenu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 会员中心</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_name"><span class="glyphicon glyphicon-user"></span> 昵称</label>
<input id="input_name" class="form-control" placeholder="昵称" name="name" type="text" autofocus value="">
</div>
<div class="col-md-12" id="error_name"></div>
<div class="form-group">
<label for="input_email"><span class="glyphicon glyphicon-envelope"></span> 邮箱</label>
<input id="input_email" class="form-control" placeholder="邮箱" name="email" type="email" autofocus value="">
</div>
<div class="col-md-12" id="error_email"></div>
<div class="form-group">
<label for="input_phone"><span class="glyphicon glyphicon-phone"></span> 手机</label>
<input id="input_phone" class="form-control" placeholder="手机" name="phone" type="text" autofocus value="">
</div>
<div class="col-md-12" id="error_phone"></div>
<div class="form-group">
<label for="input_face"><span class="glyphicon glyphicon-picture"></span> 头像</label>
<img src="holder.js/100x100" class="img-responsive img-rounded">
<a class="btn btn-primary" style="margin-top:6px;"><span class="glyphicon glyphicon-open"></span> 上传头像</a>
<input id="input_face" class="form-control" name="face" type="hidden" autofocus>
</div>
<div class="col-md-12" id="error_face"></div>
<div class="form-group">
<label for="input_info"><span class="glyphicon glyphicon-edit"></span> 简介</label>
<textarea class="form-control" rows="10" id="input_info"></textarea>
</div>
<div class="col-md-12" id="error_info"></div>
<a href="user.html" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span> 保存修改</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}
image.png
创建修改密码pwd.html
{% extends 'home/base.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/usermenu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 会员中心</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span> 旧密码</label>
<input id="input_oldpwd" class="form-control" placeholder="旧密码" name="oldpwd" type="password" autofocus>
</div>
<div class="col-md-12" id="error_oldpwd"></div>
<div class="form-group">
<label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span> 新密码</label>
<input id="input_newpwd" class="form-control" placeholder="新密码" name="newpwd" type="password" autofocus>
</div>
<div class="col-md-12" id="error_newpwd"></div>
<a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密码</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}
image.png
修改usermuene.html菜单激活状态
切换菜单，li便签不是选中状态，增加id
<div class="col-md-3">
<div class="list-group">
<a id="m-1" href="{{ url_for('home.user') }}" class="list-group-item">
<span class="glyphicon glyphicon-user"></span> 会员中心
</a>
<a id="m-2" href="{{ url_for('home.pwd') }}" class="list-group-item">
<span class="glyphicon glyphicon-lock"></span> 修改密码
</a>
<a id="m-3" href="{{ url_for('home.comments') }}" class="list-group-item">
<span class="glyphicon glyphicon-comment"></span> 评论记录
</a>
<a id="m-4" href="{{ url_for('home.userlog') }}" class="list-group-item">
<span class="glyphicon glyphicon-calendar"></span> 登录日志
</a>
<a id="m-5" href="{{ url_for('home.moviecollect') }}" class="list-group-item">
<span class="glyphicon glyphicon-heart"></span> 收藏电影
</a>
</div>
</div>
修改base.html创建js数据块
添加到页面底部</body>上方，用于该页面的js添加
{% block js %}{% endblock %}
</body>
修改user.html和pwd.html菜单选中active
修改user.html，底部增加以下代码，当点击会员中心后，会在id="m-1"上添加active的样式，表明激活该选项。
{% block js %}
<script>
$(document).ready(function() {
$("#m-1").addClass('active');
});
</script>
{% endblock %}
修改pwd.html，底部增加
{% block js %}
<script>
$(document).ready(function() {
$("#m-2").addClass('active');
});
</script>
{% endblock %}
image.png
image.png
创建评论记录comments.html
{% extends 'home/base.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/usermenu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 评论记录</h3>
</div>
<div class="panel-body">
<ul class="commentList">
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
</ul>
<div class="col-md-12 text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首页</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-3").addClass('active');
});
</script>
{% endblock %}
image.png
创建用户日志userlog.html
{% extends 'home/base.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/usermenu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 登录日志</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<tr>
<td style="width:10%">编号</td>
<td style="width:30%">登录时间</td>
<td style="width:30%">登录IP</td>
<td style="width:30%">登录地址</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
</table>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-4").addClass('active');
});
</script>
{% endblock %}
image.png
创建收藏电影moviecollect.html
{% extends 'home/base.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/usermenu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 收藏电影</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
</div>
<div class="col-md-12 text-center" style="margin-top:6px;">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首页</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-5").addClass('active');
});
</script>
{% endblock %}
image.png
创建会员中心视图
在app/home/views.py增加
@home.route('/user/')
def user():
return render_template('home/user.html')
@home.route('/pwd/')
def pwd():
return render_template('home/pwd.html')
@home.route('/comments/')
def comments():
return render_template('home/comments.html')
@home.route('/userlog/')
def userlog():
return render_template('home/userlog.html')
@home.route('/moviecollect/')
def moviecollect():
return render_template('home/moviecollect.html')
修改base.html会员和主页链接
<li>
<a class="curlink" href="{{ url_for('home.index') }}"><span class="glyphicon glyphicon-film"></span> 电影</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span> 会员</a>
</li>
修改user.html和pwd.html按钮链接
当用户点击按钮会自动跳转到会员中心，表单提交试用js实现，后面再增加。
user.html
<a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span> 保存修改</a>
pwd.html
<a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密码</a>
修改login.html和register.html按钮链接
login.html
<a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">登录</a>
register.html
<a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">注册</a>
