Fork me on GitHub

flask构建微电影视频网站

  • Flask构建电影视频网站
  • Python MTV模型
  • Flask微内核
  • Flask扩展插件配置及使用方法
  • 根据业务开发网站前后台功能
  • Flask结合MySQL数据库
  • 你将可以独立开发网站 独立部署运维网站

  • werkzug工具箱
  • pymysql数据库驱动
  • sqlalchemy数据库orm
  • wtforms表单验证工具
  • jinjia2模板引擎
  • flask-script命令行脚本
  • functools定义高阶函数
  • jwplayer播放器插件
  • 视频限速限IP访问
  • flv、mp4视频格式支持
  • Nginx点播实现

前台
会员登录及注册 / 会员中心 / 电影播放
电影评论 / 电影收藏

后台
管理员登录 / 修改密码 / 标签管理
电影管理 / 上映预告管理 / 会员管理
评论管理 / 收藏管理 / 角色管理
权限管理 / 管理员管理 / 日志管理

模型设计

目录结构

蓝图构建项目目录

app/__init__.py

1
2
3
4
5
6
7
8
9
10
from flask import Flask

app = Flask(__name__)

from app.home import home as home_blueprint
from app.admin import admin as admin_blueprint


app.register_blueprint(home_blueprint)
app.register_blueprint(admin_blueprint, url_prefix='/admin')

app/home/__init__.py

1
2
3
4
5
from flask import Blueprint

home = Blueprint('home', __name__)

import app.home.views

app/admin/__init__.py

1
2
3
4
5
from flask import Blueprint

admin = Blueprint('admin', __name__)

import app.admin.views

会员及会员登录日志数据模型设计

app/models.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import datetime

from flask import Flask
from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+mysqlconnector://root:123456@127.0.0.1:3306/movie'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True

db = SQLAlchemy(app)


# 会员
class User(db.Model):
__tablename__ = "user"
id = db.Column(db.Integer, primary_key=True) # 编号
name = db.Column(db.String(100), unique=True) # 昵称
pwd = db.Column(db.String(100)) # 密码
email = db.Column(db.String(100), unique=True) # 邮箱
phone = db.Column(db.String(11), unique=True) # 手机号码
info = db.Column(db.Text) # 简介
face = db.Column(db.String(255), unique=True) # 头像
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间
uuid = db.Column(db.String(255), unique=True, ) # 唯一标识符
userlog = db.relationship('Userlog', backref='user') # 会员日志外键关系关联
comments = db.relationship('Comment', backref='user') # 评论外键关系关联
moviecol = db.relationship('Moviecol', backref='user') # 收藏外键关系关联

def __str__(self):
return "<User {}>".format(self.name)


# 会员登陆日志
class Userlog(db.Model):
__tablename__ = 'userlog'
id = db.Column(db.Integer, primary_key=True) # 编号
user_id = db.Column(db.Integer, db.ForeignKey('user.id')) # 所属用户
ip = db.Column(db.String(100)) # 登陆IP
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 登录时间

def __str__(self):
return "<Userlog {}>".format(self.id)

标签-电影-上映预告数据模型设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 标签
class Tag(db.Model):
__tablename__ = 'tag'
id = db.Column(db.Integer, primary_key=True) # 编号
name = db.Column(db.String(100), unique=True) # 标题
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间
movies = db.relationship('Movie', backref='tag') # 电影标签外键关联

def __str__(self):
return "<Tag {}>".format(self.name)


# 电影
class Movie(db.Model):
__tablename__ = 'movie'
id = db.Column(db.Integer, primary_key=True) # 编号
title = db.Column(db.String(255), unique=True) # 标题
url = db.Column(db.String(255), unique=True) # 地址
info = db.Column(db.Text) # 简介
logo = db.Column(db.String(255), unique=True) # 封面
star = db.Column(db.SmallInteger) # 星级
playnum = db.Column(db.BigInteger) # 播放量
commentnum = db.Column(db.BigInteger) # 评论量
tag_id = db.Column(db.Integer, db.ForeignKey('tag.id')) # 所属标签
area = db.Column(db.String(255)) # 上映地区
release_time = db.Column(db.Date) # 上映时间
length = db.Column(db.String(100)) # 播放时间
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间
comments = db.relationship('Comment', backref='movie') # 评论外键关系关联
moviecol = db.relationship('Moviecol', backref='movie') # 收藏外键关系关联

def __str__(self):
return "<Movie {}>".format(self.title)


# 上映预告
class Preview(db.Model):
__tablename__ = 'preview'
id = db.Column(db.Integer, primary_key=True) # 编号
title = db.Column(db.String(255), unique=True) # 标题
logo = db.Column(db.String(255), unique=True) # 封面
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间

def __str__(self):
return "<Preview {}>".format(self.title)

评论-收藏电影数据模型设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 评论
class Comment(db.Model):
__tablename__ = 'comment'
id = db.Column(db.Integer, primary_key=True) # 编号
content = db.Column(db.Text) # 内容
movie_id = db.Column(db.Integer, db.ForeignKey('movie.id')) # 所属电影
user_id = db.Column(db.Integer, db.ForeignKey('user.id')) # 所属用户
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 评论时间

def __str__(self):
return "<Comment {}>".format(self.id)


# 电影收藏
class Moviecol(db.Model):
__tablename__ = 'moviecol'
id = db.Column(db.Integer, primary_key=True) # 编号
movie_id = db.Column(db.Integer, db.ForeignKey('movie.id')) # 所属电影
user_id = db.Column(db.Integer, db.ForeignKey('user.id')) # 所属用户
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 评论时间

def __str__(self):
return "<Moviecol {}>".format(self.id)

权限及角色数据模型设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 权限
class Auth(db.Model):
__tablename__ = 'auth'
id = db.Column(db.Integer, primary_key=True) # 编号
name = db.Column(db.String(100), unique=True) # 名称
url = db.Column(db.String(255), unique=True) # 地址
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间

def __str__(self):
return '<Auth {}>'.format(self.name)


# 角色
class Role(db.Model):
__tablename__ = 'role'
id = db.Column(db.Integer, primary_key=True) # 编号
name = db.Column(db.String(100), unique=True) # 名称
auths = db.Column(db.String(600)) # 权限
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间
admins = db.relationship('Admin', backref='role') # 管理员外键关系关联

def __str__(self):
return '<role {}>'.format(self.name)

管理员-登录日志-操作日志数据模型设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 管理员
class Admin(db.Model):
__tablename__ = 'admin'
id = db.Column(db.Integer, primary_key=True) # 编号
name = db.Column(db.String(100), unique=True) # 管理员账号
pwd = db.Column(db.String(100)) # 管理员密码
is_super = db.Column(db.Boolean) # 是否为超级管理员
role_id = db.Column(db.Integer, db.ForeignKey('role.id')) # 所属角色
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 添加时间
adminlogs = db.relationship('Adminlog', backref='admin') # 管理员登陆日志外键关系关联
oplogs = db.relationship('Oplog', backref='admin') # 管理员操作日志外键关系关联

def __str__(self):
return "<Admin {}>".format(self.name)


# 管理员登陆日志
class Adminlog(db.Model):
__tablename__ = 'adminlog'
id = db.Column(db.Integer, primary_key=True) # 编号
admin_id = db.Column(db.Integer, db.ForeignKey('admin.id')) # 所属管理员
ip = db.Column(db.String(100)) # 登陆IP
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 登录时间

def __str__(self):
return "<Adminlog {}>".format(self.id)


# 操作日志
class Oplog(db.Model):
__tablename__ = 'oplog'
id = db.Column(db.Integer, primary_key=True) # 编号
admin_id = db.Column(db.Integer, db.ForeignKey('admin.id')) # 所属管理员
ip = db.Column(db.String(100)) # 登陆IP
reason = db.Column(db.String(600)) # 操作原因
addtime = db.Column(db.DateTime, index=True, default=datetime.datetime.now) # 登录时间

def __str__(self):
return "<Oplog {}>".format(self.id)

映射到数据库

安装数据库驱动插件pip install mysql-connector

1
2
if __name__ == '__main__':
db.create_all()

运行后就可以在数据库中看到表了
尝试添加一些数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if __name__ == '__main__':
# db.create_all()
role = Role(
name="超级管理员",
auths=""
)
db.session.add(role)
db.session.commit()

from werkzeug.security import generate_password_hash
admin = Admin(
name="imoocadmin",
pwd=generate_password_hash('imoocadmin'),
is_super=True,
role_id=1
)
db.session.add(admin)
db.session.commit()

搭建前台页面

前台布局搭建

static中的文件拷贝到项目的static目录下
app/templates/home下新建home.html,当作基础模板,并修改静态资源链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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') }}">
<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;">&nbsp;微电影
</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>&nbsp;搜索</a>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
</li>
<li>
<a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
</li>
<li>
<a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
</li>
</ul>
</div>
<!--导航-->

</div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:120px">
{% block content %}

{% endblock %}

</div>
<!--内容-->
<!--底部-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
©&nbsp;2018&nbsp;movie.cht3.top&nbsp;京ICP备 13046642号-2
</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,继承home.html

1
2
3
4
{% extends 'home/home.html' %}
{% block content %}
<h1>hello,world</h1>
{% endblock %}

修改视图函数
app/home/views.py

1
2
3
@home.route('/')
def index():
return render_template('home/index.html')

运行,浏览器访问,就可看到主页面了

会员登录页面搭建

新建login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% extends 'home/home.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>&nbsp;会员登录</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_contact"><span class="glyphicon glyphicon-user"></span>&nbsp;账号</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>&nbsp;密码</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 %}

创建视图函数

1
2
3
4
5
6
7
8
@home.route('/login/')
def login():
return render_template('home/login.html')


@home.route('/lougot/')
def lougot():
return redirect(url_for('home.index'))

浏览器访问即可看到登陆页面

会员注册页面搭建

新建regist.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{% extends 'home/home.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>&nbsp;会员注册</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</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>&nbsp;邮箱</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>&nbsp;手机</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>&nbsp;密码</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>&nbsp;确认密码</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 %}

创建视图函数

1
2
3
@home.route('/regist/')
def regist():
return render_template('home/regist.html')

修改home.html中的链接

1
2
3
<li>
<a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
</li>

访问即可看到注册页面

会员中心页面搭建

新建menu.html, 会员中心左侧菜单栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="col-md-3">
<div class="list-group">
<a id="home_user" href="{{ url_for('home.user') }}" class="list-group-item">
<span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
</a>
<a id="home_pwd" href="{{ url_for('home.pwd') }}" class="list-group-item">
<span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
</a>
<a id="home_comments" href="{{ url_for('home.comments') }}" class="list-group-item">
<span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
</a>
<a id="home_loginlog" href="{{ url_for('home.loginlog') }}" class="list-group-item">
<span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
</a>
<a id="home_moviecol" href="{{ url_for('home.moviecol') }}" class="list-group-item">
<span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
</a>
</div>
</div>

新建视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@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('/loginlog/')
def loginlog():
return render_template('home/loginlog.html')


@home.route('/moviecol/')
def moviecol():
return render_template('home/moviecol.html')

根据视图函数新建HTML

app/templates/home/user.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{% extends 'home/home.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/menu.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>&nbsp;会员中心</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
<input id="input_name" class="form-control" placeholder="昵称" name="name" type="text" autofocus value="jinlong">
</div>
<div class="col-md-12" id="error_name"></div>
<div class="form-group">
<label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
<input id="input_email" class="form-control" placeholder="邮箱" name="email" type="email" autofocus value="1780316635@qq.com">
</div>
<div class="col-md-12" id="error_email"></div>
<div class="form-group">
<label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
<input id="input_phone" class="form-control" placeholder="手机" name="phone" type="text" autofocus value="13700632835">
</div>
<div class="col-md-12" id="error_phone"></div>
<div class="form-group">
<label for="input_face"><span class="glyphicon glyphicon-picture"></span>&nbsp;头像</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>&nbsp;上传头像</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>&nbsp;简介</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>&nbsp;保存修改</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$("#home_user").addClass("active");
})
</script>
{% endblock %}

app/templates/home/pwd.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{% extends 'home/home.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/menu.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>&nbsp;修改密码</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;旧密码</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>&nbsp;新密码</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>&nbsp;修改密码</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$("#home_pwd").addClass("active");
})
</script>
{% endblock %}

app/templates/home/comments.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
{% extends 'home/home.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/menu.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>&nbsp;评论记录</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>
<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>
<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&nbsp;/&nbsp;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 () {
$("#home_comments").addClass("active");
})
</script>
{% endblock %}

app/templates/home/loginlog.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
{% extends 'home/home.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/menu.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>&nbsp;登录日志</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>
<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>
<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 () {
$("#home_loginlog").addClass("active");
})
</script>
{% endblock %}

app/templates/home/moviecol.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
{% extends 'home/home.html' %}


{% block css %}
<style>
.navbar-brand>img {
display: inline;
}
.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;
}
.media{
padding:3px;
border:1px solid #ccc
}
</style>
{% endblock %}


{% block content %}
{% include 'home/menu.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>&nbsp;收藏电影</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 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 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&nbsp;/&nbsp;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 () {
$("#home_moviecol").addClass("active");
})
</script>
{% endblock %}

浏览器访问即可看到会员中心页面了

电影列表页面搭建

新建视图函数,index的视图函数前面已经写过了

1
2
3
@home.route('/animation/')
def animation():
return render_template('home/animation.html')

新建app/templates/home/layout.html文件,当作index.html的基模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!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') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
<style>
.navbar-brand>img {
display: inline;
}
.media{
padding:3px;
border:1px solid #ccc
}
</style>
{% block css %}{% endblock %}
</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;">&nbsp;微电影
</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>&nbsp;搜索</a>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="curlink" href="{{ url_for('home.index') }}"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
</li>
</ul>
</div>
<!--导航-->

</div>
</nav>
<!--导航-->
<!--内容-->

{% block content %}

{% endblock %}


<!--内容-->
<!--底部-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
©&nbsp;2018&nbsp;movie.cht3.top&nbsp;京ICP备 13046642号-2
</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>

{% block js %}

{% endblock %}
</body>
</html>

新建app/templates/home/animation.html,轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>热映电影</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='anim/css/style.css') }}">
</head>
<body>
<!--轮播图 开始 -->
<div class="main_banner">
<div class="main_banner_wrap">
<canvas id="myCanvas" width="150" height="150"></canvas>
<div class="main_banner_box" id="m_box">
<a href="javascript:void(0)" class="banner_btn js_pre">
<span class="banner_btn_arrow"><i></i></span>
</a>
<a href="javascript:void(0)" class="banner_btn btn_next js_next">
<span class="banner_btn_arrow"><i></i></span>
</a>
<ul>
<li id="imgCard0">
<a href=""><span style="opacity:0;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0020150102211033.jpg') }}" alt="">
<p style="bottom:0">周杰伦粉丝版MV</p>
</li>
<li id="imgCard1">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0120150101183428.jpg') }}" alt="">
<p>乐侃有声节目第二期</p>
</li>
<li id="imgCard2">
<a href=""><span style="opacity:0.4;" ></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0320150101183351.jpg') }}" alt="">
<p>乐见大牌:”荣“耀之声,”维“我独尊</p>
</li>
<li id="imgCard3">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0420150101224343.jpg') }}" alt="">
<p>王力宏四年心血结晶</p>
</li>
<li id="imgCard4">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0720150102210934.jpg') }}" alt="">
<p>MV精选:《武媚》女神团美艳大比拼</p>
</li>
</ul>
<!--火狐倒影图层-->
<p id="rflt"></p>
<!--火狐倒影图层-->
</div>
<!--序列号按钮-->
<div class="btn_list">
<span class="curr"></span><span></span><span></span><span></span><span></span>
</div>
</div>

</div>
<!--轮播图 结束 -->

<script type="text/javascript" src="{{ url_for('static', filename='anim/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='anim/js/script.js') }}"></script>

</body>
</html>

新建app/static/anim文件夹,将animation中的静态资源拷贝到这个文件夹下

修改index.html内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
{% extends 'home/layout.html' %}

{% block content %}
<!--热门电影-->
<section id="hotmovie" style="margin-top:76px">
<div class="container">
<div class="row wow fadeInRight" data-wow-delay="0.6s">
<div class="row">
<iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no src="{{ url_for('home.animation') }}"></iframe>
</div>
</div>
</div>
</section>
<!--热门电影-->
<!--电影列表-->
<section id="movielist">
<div class="container">
<div class="row wow fadeIn" data-wow-delay="0.6s">
<div class="col-md-12 table-responsive">
<table class="table text-left table-bordered" id="movietags">
<tr>
<td style="width:10%;">电影标签</td>
<td style="width:90%;">
<a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
&nbsp;
<a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
&nbsp;
<a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
&nbsp;
<a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
&nbsp;
<a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
</tr>
<tr>
<td>电影星级</td>
<td>
<a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;一星</span></a>
&nbsp;
<a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;二星</span></a>
&nbsp;
<a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;三星</span></a>
&nbsp;
<a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;四星</span></a>
&nbsp;
<a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;五星</span></a>
</td>
</tr>
<tr>
<td>上映时间</td>
<td>
<a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;最近</span></a>
&nbsp;
<a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2017</span></a>
&nbsp;
<a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2016</span></a>
&nbsp;
<a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2015</span></a>
&nbsp;
<a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;更早</span></a>
</td>
</tr>
<tr>
<td>播放数量</td>
<td>
<a class="label label-success"><span class="glyphicon glyphicon-arrow-down">&nbsp;从高到底</span></a>
&nbsp;
<a class="label label-danger"><span class="glyphicon glyphicon-arrow-up">&nbsp;从低到高</span></a>
</td>
</tr>
<tr>
<td>评论数量</td>
<td>
<a class="label label-success"><span class="glyphicon glyphicon-arrow-down">&nbsp;从高到底</span></a>
&nbsp;
<a class="label label-danger"><span class="glyphicon glyphicon-arrow-up">&nbsp;从低到高</span></a>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
<div class="movielist text-center">
<!--<img data-original="holder.js/262x166"
class="img-responsive lazy center-block" alt="">-->
<img src="holder.js/262x166" class="img-responsive center-block" alt="">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">环太平洋</span><br>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</div>
<a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
</div>
</div>
<div class="col-md-3">
<div class="movielist text-center">
<!--<img data-original="holder.js/262x166"
class="img-responsive lazy center-block" alt="">-->
<img src="holder.js/262x166" class="img-responsive center-block" alt="">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">环太平洋</span><br>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</div>
<a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
</div>
</div>
<div class="col-md-3">
<div class="movielist text-center">
<!--<img data-original="holder.js/262x166"
class="img-responsive lazy center-block" alt="">-->
<img src="holder.js/262x166" class="img-responsive center-block" alt="">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">环太平洋</span><br>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</div>
<a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
</div>
</div>
<div class="col-md-12">
<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&nbsp;/&nbsp;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>
</section>
<!--电影列表-->
{% endblock %}

浏览器访问即可看到主页面

电影搜索页面搭建

视图函数

1
2
3
@home.route('/search/')
def search():
return render_template('home/search.html')

新建app/templates/home/search.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
{% extends 'home/home.html' %}


{% block content %}
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb" style="margin-top:6px;">
<li>与"xxx"有关的电影,共x部</li>
</ol>
</div>
<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 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 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">
<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&nbsp;/&nbsp;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>
{% endblock %}

修改home.htmllayout.html文件中的search链接

1
2
3
4
5
6
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="请输入电影名!">
<span class="input-group-btn">
<a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
</span>
</div>

浏览器访问即可进行查询

电影详情页面搭建

视图函数

1
2
3
@home.route('/play/')
def play():
return render_template('home/play.html')

新建app/templates/home/play.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
{% extends 'home/home.html' %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jwplayer/skins/stormtrooper.css') }}">
<script>
SyntaxHighlighter.all();
</script>
<!--播放页面-->
<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 %}
<div class="row">
<div class="col-md-8">
<div id="moviecontainer"></div>
</div>
<div class="col-md-4" style="height:500px;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-facetime-video"></span>&nbsp;电影介绍</h3>
</div>
<div class="panel-body" style="height:459px;">
<table class="table">
<tr>
<td style="width:30%;color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-film"></span>&nbsp;片名
</td>
<td>环太平洋</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-tag"></span>&nbsp;标签
</td>
<td>科幻</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-time"></span>&nbsp;片长
</td>
<td>05:04</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-map-marker"></span>&nbsp;地区
</td>
<td>美国</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-star"></span>&nbsp;星级
</td>
<td>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-calendar"></span>&nbsp;上映时间
</td>
<td>2013年7月12日</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-play"></span>&nbsp;播放数量
</td>
<td>1000</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-comment"></span>&nbsp;评论数量
</td>
<td>1000</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-picture"></span>&nbsp;影片介绍
</td>
<td>
该片主要讲述了人类为了抵抗怪兽的进攻,研制出了高大的机器战士与来犯怪兽进行对抗的故事.
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-12" style="margin-top:6px;">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span>&nbsp;电影评论</h3>
</div>
<div class="panel-body">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>请先<a href="login.html" target="_blank" class="text-info">登录</a>,才可参与评论!</strong>
</div>
<ol class="breadcrumb" style="margin-top:6px;">
<li>全部评论(5)</li>
</ol>
<form role="form" style="margin-bottom:6px;">
<div class="form-group">
<div>
<label for="input_content">内容</label>
<textarea id="input_content"></textarea>
</div>
<div class="col-xs-12" id="error_content"></div>
</div>
<a class="btn btn-success" id="btn-sub"><span class="glyphicon glyphicon-edit"></span>&nbsp;提交评论</a>
&nbsp;
<a class="btn btn-danger" id="btn-col"><span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影</a>
</form>
<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>
<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>
<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&nbsp;/&nbsp;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>
</div>
{% endblock %}


{% block js %}
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.all.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='jwplayer/jwplayer.js') }}"></script>
<script>
var ue = UE.getEditor('input_content',{
toolbars: [
['fullscreen', 'emotion', 'preview', 'link']
],
initialFrameWidth:"100%",
initialFrameHeight:"100",
});
</script>
<script type="text/javascript">
jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";
</script>
<script type="text/javascript">
jwplayer("moviecontainer").setup({
flashplayer: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}",
playlist: [{
file: "{{ url_for('static', filename='video/htpy.mp4') }}",
title: "环太平洋"
}],
modes: [{
type: "html5"
}, {
type: "flash",
src: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}"
}, {
type: "download"
}],
skin: {
name: "vapor"
},
"playlist.position": "left",
"playlist.size": 400,
height: 500,
width: 774,
});
</script>
<!--播放页面-->
<script>
$(function() {
new WOW().init();
})
</script>
<script>
$(document).ready(function() {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
{% endblock %}

修改其它页面的播放视频按钮链接

1
play.html -> {{ url_for('home.play') }}

404页面搭建

视图函数,放在__init__文件中
全局404(AOP)
app/__init__.py

1
2
3
@app.errorhandler(404)
def page_not_found(err):
return render_template('home/404.html'), 404

新建app/templates/home/404.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>消失在宇宙星空中的404页面</title>
<link href="{{ url_for('static', filename='404/404.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 代码 开始 -->
<div class="fullScreen" id="fullScreen">
<img class="rotating" src="{{ url_for('static', filename='404/spaceman.svg') }}">
<div class="pagenotfound-text">
<h1>迷失在太空中!</h1>
<h2><a href="{{ url_for('home.index') }}">返回首页</a></h2>
</div>
<canvas id="canvas2d"></canvas>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='404/404.js') }}"></script>
<!-- 代码 结束 -->
</body>
</html>

浏览器随便输入一个不存在的url进行查看

搭建后台页面

视图函数位于admin文件夹下, app/admin/views.py

管理员登录页面搭建

视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
@admin.route('/')
def index():
return '后台主页'


@admin.route('/login/')
def login():
return render_template('admin/login.html')


@admin.route('/logout/')
def logout():
return redirect(url_for('admin.login'))

新建app/templates/admin/login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>微电影管理系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='admin/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='fonts/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='ionicons/css/ionicons.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/AdminLTE.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='admin/plugins/iCheck/square/blue.css') }}">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href=""><b>微电影管理系统</b></a>
</div>
<div class="login-box-body">
<p class="login-box-msg"></p>
<form action="" method="post" id="form-data">
<div class="form-group has-feedback">
<input name="user" type="text" class="form-control" placeholder="请输入账号!">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
<div class="col-md-12" id="input_user"></div>
</div>
<div class="form-group has-feedback">
<input name="pwd" type="password" class="form-control" placeholder="请输入密码!">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<div class="col-md-12" id="input_pwd"></div>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<div class="col-xs-4">
<a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登录</a>
</div>
</div>
</form>
</div>
</div>
<script src="{{ url_for('static',filename='admin/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/iCheck/icheck.min.js') }}"></script>
</body>
</html>

后台布局搭建

新建app/templates/admin/admin.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>微电影管理系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='admin/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='fonts/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='ionicons/css/ionicons.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/AdminLTE.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/skins/_all-skins.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='admin/plugins/datepicker/datepicker3.css') }}">
<style>
*{
font-family:"Microsoft YaHei";
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
vertical-align:middle;
text-align:center;
}
</style>

{% block css %}

{% endblock %}
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<a href="{{ url_for('admin.index') }}" class="logo">
<span class="logo-mini"><img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:40px;width:40px;">电影系统</span>
<span class="logo-lg"><img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:40px;width:40px;">微电影管理系统</span>
</a>
<nav class="navbar navbar-static-top">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">下拉菜单</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}"
class="user-image" alt="User Image">
<span class="hidden-xs">xxx</span>
</a>
<ul class="dropdown-menu">
<li class="user-header">
<img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}"
class="img-circle" alt="User Image">
<p>
xxx
<small>2017-06-01</small>
</p>
</li>
<li class="user-footer">
<div class="pull-left">
<a href="pwd.html" class="btn btn-default btn-flat">修改密码</a>
</div>
<div class="pull-right">
<a href="{{ url_for('admin.logout') }}" class="btn btn-default btn-flat">退出系统</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<aside class="main-sidebar">
<section class="sidebar">
<div class="user-panel">
<div class="pull-left image">
<img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}" class="img-circle"
alt="User Image">
</div>
<div class="pull-left info">
<p>用户xxx</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="搜索...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i
class="fa fa-search"></i>
</button>
</span>
</div>
</form>
{% include 'admin/grid.html' %}
</section>
</aside>
<div class="content-wrapper">
<!--内容-->
{% block content %}

{% endblock %}
<!--内容-->
</div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>版本</b> 1.0
</div>
<strong>版权 &copy; 2017-2018 归<a href="">xxx</a>.</strong> 所有
</footer>
<div class="control-sidebar-bg"></div>
</div>
<script src="{{ url_for('static',filename='admin/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/fastclick/fastclick.js') }}"></script>
<script src="{{ url_for('static',filename='admin/dist/js/app.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/dist/js/demo.js') }}"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script src="{{ url_for('static',filename='admin/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js') }}" charset="UTF-8"></script>

{% block js %}

{% endblock %}
</body>
</html>

新建app/templates/admin/grid.html, 左侧菜单栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<ul class="sidebar-menu">
<li class="header">管理菜单</li>
<li class="treeview">
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>
<span>首页</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li>
<a href="index.html">
<i class="fa fa-circle-o"></i> 控制面板
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-tags" aria-hidden="true"></i>
<span>标签管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li>
<a href="tag_add.html">
<i class="fa fa-circle-o"></i> 添加标签
</a>
</li>
<li>
<a href="tag_list.html">
<i class="fa fa-circle-o"></i> 标签列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
<span>电影管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li>
<a href="movie_add.html">
<i class="fa fa-circle-o"></i> 添加电影
</a>
</li>
<li>
<a href="movie_list.html">
<i class="fa fa-circle-o"></i> 电影列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-film" aria-hidden="true"></i>
<span>预告管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li>
<a href="preview_add.html">
<i class="fa fa-circle-o"></i> 添加预告
</a>
</li>
<li>
<a href="preview_list.html">
<i class="fa fa-circle-o"></i> 预告列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-users" aria-hidden="true"></i>
<span>会员管理</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li>
<a href="user_list.html">
<i class="fa fa-circle-o"></i> 会员列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-comments" aria-hidden="true"></i>
<span>评论管理</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li>
<a href="comment_list.html">
<i class="fa fa-circle-o"></i> 评论列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-heart" aria-hidden="true"></i>
<span>收藏管理</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li>
<a href="moviecol_list.html">
<i class="fa fa-circle-o"></i> 收藏列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>日志管理</span>
<span class="label label-primary pull-right">3</span>
</a>
<ul class="treeview-menu">
<li>
<a href="oplog_list.html">
<i class="fa fa-circle-o"></i> 操作日志列表
</a>
</li>
<li>
<a href="adminloginlog_list.html">
<i class="fa fa-circle-o"></i> 管理员登录日志列表
</a>
</li>
<li>
<a href="userloginlog_list.html">
<i class="fa fa-circle-o"></i> 会员登录日志列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-lock" aria-hidden="true"></i>
<span>权限管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li>
<a href="auth_add.html">
<i class="fa fa-circle-o"></i> 添加权限
</a>
</li>
<li>
<a href="auth_list.html">
<i class="fa fa-circle-o"></i> 权限列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-user-secret" aria-hidden="true"></i>
<span>角色管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li>
<a href="role_add.html">
<i class="fa fa-circle-o"></i> 添加角色
</a>
</li>
<li>
<a href="role_list.html">
<i class="fa fa-circle-o"></i> 角色列表
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span>管理员管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li>
<a href="admin_add.html">
<i class="fa fa-circle-o"></i> 添加管理员
</a>
</li>
<li>
<a href="admin_list.html">
<i class="fa fa-circle-o"></i> 管理员列表
</a>
</li>
</ul>
</li>
</ul>

视图函数做修改

1
2
3
@admin.route('/')
def index():
return render_template('admin/index.html')

新建一个app/templates/admin/index.html,测试

1
2
3
4
5
{% extends 'admin/admin.html' %}

{% block content %}
<h1>hello</h1>
{% endblock %}

修改密码页面搭建

视图函数

1
2
3
@admin.route('/pwd/')
def pwd():
return render_template('admin/pwd.html')

新建app/templates/admin/pwd.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 个人资料</a></li>
<li class="active">修改密码</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">修改密码</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_pwd">旧密码</label>
<input type="password" class="form-control" id="input_pwd" placeholder="请输入旧密码!">
</div>
<div class="form-group">
<label for="input_newpwd">新密码</label>
<input type="password" class="form-control" id="input_newpwd" placeholder="请输入新密码!">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">修改</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

修改一下admin.html中的修改密码链接

1
<a href="{{ url_for('admin.pwd') }}" class="btn btn-default btn-flat">修改密码</a>

控制面板页面搭建

视图函数使用的是index

修改index.html内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
<li class="active">控制面板</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">内存使用率</h3>
</div>
<div class="box-body" id="meminfo" style="height:600px;"></div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">系统设置</h3>
</div>
<form role="form">
<div class="box-body" style="height:600px;">
<div class="form-group">
<label for="input_speed">限制速率大小</label>
<input type="text" class="form-control" id="input_speed" placeholder="请输入限制速率!"
value="512">
</div>
<div class="form-group">
<label for="input_mem">限制内存大小</label>
<input type="text" class="form-control" id="input_mem" placeholder="请输入限制内存!"
value="10m">
</div>
<div class="form-group">
<label for="input_num">限制客户端数量</label>
<input type="text" class="form-control" id="input_num" placeholder="请输入限制客户端数量!"
value="4">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">保存并重启服务</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
<script>
var myChart = echarts.init(document.getElementById('meminfo'));
option = {
backgroundColor: "white",
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [{
name: '内存使用率',
type: 'gauge',
detail: {
formatter: '{value}%'
},
data: [{
value: 50,
name: '内存使用率'
}]
}]
};
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
}, 2000);

</script>
<script>
$(document).ready(function () {
$('#g-1').addClass('active');
$('#g-1-1').addClass('active');
})
</script>
{% endblock %}

修改grid.html文件,让控制面板点击时处于激活状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<li class="header">管理菜单</li>
<li class="treeview" id="g-1">
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>
<span>首页</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li id="g-1-1">
<a href="{{ url_for('admin.index') }}">
<i class="fa fa-circle-o"></i> 控制面板
</a>
</li>
</ul>
</li>

标签管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/tag/add/')
def tag_add():
return render_template('admin/tag_add.html')


@admin.route('/tag/list/')
def tag_list():
return render_template('admin/tag_list.html')

新建tag_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 标签管理</a></li>
<li class="active">添加标签</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加标签</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">标签名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入标签名称!">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}

<script>
$(document).ready(function () {
$('#g-2').addClass('active');
$('#g-2-1').addClass('active');
})
</script>
{% endblock %}

新建tag_list.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 标签管理</a></li>
<li class="active">标签列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">标签列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>科幻</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-2').addClass('active');
$('#g-2-2').addClass('active');
})
</script>
{% endblock %}

修改grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li class="treeview" id="g-2">
<a href="#">
<i class="fa fa-tags" aria-hidden="true"></i>
<span>标签管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li id="g-2-1">
<a href="{{ url_for('admin.tag_add') }}">
<i class="fa fa-circle-o"></i> 添加标签
</a>
</li>
<li id="g-2-2">
<a href="{{ url_for('admin.tag_list') }}">
<i class="fa fa-circle-o"></i> 标签列表
</a>
</li>
</ul>
</li>

电影管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/movie/add/')
def movie_add():
return render_template('admin/movie_add.html')


@admin.route('/movie/list/')
def movie_list():
return render_template('admin/movie_list.html')

新建app/templates/admin/movie_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">添加电影</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加电影</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_title">片名</label>
<input type="text" class="form-control" id="input_title" placeholder="请输入片名!">
</div>
<div class="form-group">
<label for="input_url">文件</label>
<input type="file" id="input_url">
<div style="margin-top:5px;">
<div id="moviecontainer"></div>
</div>
</div>
<div class="form-group">
<label for="input_info">介绍</label>
<textarea class="form-control" rows="10" id="input_info"></textarea>
</div>
<div class="form-group">
<label for="input_logo">封面</label>
<input type="file" id="input_logo">
<img data-src="holder.js/262x166" style="margin-top:5px;" class="img-responsive"
alt="">
</div>
<div class="form-group">
<label for="input_star">星级</label>
<select class="form-control" id="input_star">
<option value="1">1星</option>
<option value="2">2星</option>
<option value="3">3星</option>
<option value="4">4星</option>
<option value="5">5星</option>
</select>
</div>
<div class="form-group">
<label for="input_tag_id">标签</label>
<select class="form-control" id="input_tag_id">
<option value="1">科幻</option>
<option value="2">冒险</option>
<option value="3">爱情</option>
<option value="4">动作</option>
<option value="5">战争</option>
</select>
</div>
<div class="form-group">
<label for="input_area">地区</label>
<input type="text" class="form-control" id="input_area" placeholder="请输入地区!">
</div>
<div class="form-group">
<label for="input_length">片长</label>
<input type="text" class="form-control" id="input_length" placeholder="请输入片长!">
</div>
<div class="form-group">
<label for="input_release_time">上映时间</label>
<input type="text" class="form-control" id="input_release_time"
placeholder="请选择上映时间!">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script src="{{ url_for('static',filename='jwplayer/jwplayer.js') }}"></script>
<script type="text/javascript">
jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";

</script>
<script type="text/javascript">
jwplayer("moviecontainer").setup({
flashplayer: "{{ url_for('static',filename='jwplayer/jwplayer.flash.swf') }}",
playlist: [{
file: "{{ url_for('static',filename='video/htpy.mp4') }}",
title: "环太平洋"
}],
modes: [{
type: "html5"
}, {
type: "flash",
src: "{{ url_for('static',filename='jwplayer/jwplayer.flash.swf') }}"
}, {
type: "download"
}],
skin: {
name: "vapor"
},
"playlist.position": "left",
"playlist.size": 200,
height: 250,
width: 387,
});

</script>
<script>
$(document).ready(function () {
$('#input_release_time').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
language: 'zh-CN',
});
});

</script>
<script>
$(document).ready(function () {
$('#g-3').addClass('active');
$('#g-3-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/movie_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">电影列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">电影列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>片名</th>
<th>片长</th>
<th>标签</th>
<th>地区</th>
<th>星级</th>
<th>播放数量</th>
<th>评论数量</th>
<th>上映时间</th>
<th>操作事项</th>
</tr>
{% for foo in range(0,10) %}

<tr>
<td>1</td>
<td>环太平洋</td>
<td>5分钟</td>
<td>科幻</td>
<td>美国</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>2017-01-01</td>
<td>
<a class="label label-success">编辑</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}

</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-3').addClass('active');
$('#g-3-2').addClass('active');
})
</script>
{% endblock %}

修改grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li class="treeview" id="g-3">
<a href="#">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
<span>电影管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li id="g-3-1">
<a href="{{ url_for('admin.movie_add') }}">
<i class="fa fa-circle-o"></i> 添加电影
</a>
</li>
<li id="g-3-2">
<a href="{{ url_for('admin.movie_list') }}">
<i class="fa fa-circle-o"></i> 电影列表
</a>
</li>
</ul>
</li>

上映预告管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/preview/add/')
def preview_add():
return render_template('admin/preview_add.html')


@admin.route('/preview/list/')
def preview_list():
return render_template('admin/preview_list.html')

新建app/templates/admin/preview_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
<li class="active">添加预告</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加预告</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_title">预告标题</label>
<input type="text" class="form-control" id="input_title" placeholder="请输入预告标题!">
</div>
<div class="form-group">
<label for="input_logo">预告封面</label>
<input type="file" id="input_logo">
<img data-src="holder.js/700x320" style="margin-top:5px;" class="img-responsive"
alt="">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-4').addClass('active');
$('#g-4-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/preview_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
<li class="active">预告列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">预告列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>预告标题</th>
<th>预告封面</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>环太平洋</td>
<td>
<img data-src="holder.js/140x64" class="img-responsive center-block" alt="">
</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-4').addClass('active');
$('#g-4-2').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li class="treeview" id="g-4">
<a href="#">
<i class="fa fa-film" aria-hidden="true"></i>
<span>预告管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li id="g-4-1">
<a href="{{ url_for('admin.preview_add') }}">
<i class="fa fa-circle-o"></i> 添加预告
</a>
</li>
<li id="g-4-2">
<a href="{{ url_for('admin.preview_list') }}">
<i class="fa fa-circle-o"></i> 预告列表
</a>
</li>
</ul>
</li>

会员管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/user/view/')
def user_view():
return render_template('admin/user_view.html')


@admin.route('/user/list/')
def user_list():
return render_template('admin/user_list.html')

新建app/templates/admin/user_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{% extends 'admin/admin.html' %}


{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 会员管理</a></li>
<li class="active">会员列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>昵称</th>
<th>邮箱</th>
<th>手机</th>
<th>头像</th>
<th>状态</th>
<th>注册时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>拓荒者</td>
<td>1780316635@qq.com</td>
<td>13700632835</td>
<td>
<img data-src="holder.js/50x50" class="img-responsive center-block" alt="">
</td>
<td>正常/冻结</td>
<td>2017-06-01 12:00:00</td>
<td>
<a class="label label-success" href="{{ url_for('admin.user_view') }}">查看</a>
&nbsp;
<a class="label label-info">解冻</a>
&nbsp;
<a class="label label-warning">冻结</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-5').addClass('active');
$('#g-5-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/user_view.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
{% extends 'admin/admin.html' %}

{% block css %}
<style>
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
vertical-align:middle;
text-align:left;
}
.td_bd{
font-weight:bold;
}
</style>
{% endblock %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 会员管理</a></li>
<li class="active">查看会员</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员详情</h3>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<td class="td_bd">编号:</td>
<td>1</td>
</tr>
<tr>
<td class="td_bd">昵称:</td>
<td>拓荒者</td>
</tr>
<tr>
<td class="td_bd">邮箱:</td>
<td>1780316635@qq.com</td>
</tr>
<tr>
<td class="td_bd">手机:</td>
<td>13700632835</td>
</tr>
<tr>
<td class="td_bd">头像:</td>
<td>
<img data-src="holder.js/100x100" class="img-responsive" alt="">
</td>
</tr>
<tr>
<td class="td_bd">注册时间:</td>
<td>
2017-01-01 12:00:00
</td>
</tr>
<tr>
<td class="td_bd">唯一标志符:</td>
<td>
xxxxxx
</td>
</tr>
<tr>
<td class="td_bd">个性简介:</td>
<td>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-5').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li class="treeview" id="g-5">
<a href="#">
<i class="fa fa-users" aria-hidden="true"></i>
<span>会员管理</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li id="g-5-1">
<a href="{{ url_for('admin.user_list') }}">
<i class="fa fa-circle-o"></i> 会员列表
</a>
</li>
</ul>
</li>

评论管理页面搭建

视图函数

1
2
3
@admin.route('/comment/list/')
def comment_list():
return render_template('admin/comment_list.html')

新建app/templates/admin/comment_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
{% extends 'admin/admin.html' %}


{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 评论管理</a></li>
<li class="active">评论列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">评论列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body box-comments">
<div class="box-comment">
<img class="img-circle img-sm"
src="{{ url_for('static',filename='admin/dist/img/user3-128x128.jpg') }}" alt="User Image">
<div class="comment-text">
<span class="username">
小美
<span class="text-muted pull-right">
<i class="fa fa-calendar" aria-hidden="true"></i>
&nbsp;
2017-01-01 12:00:00
</span>
</span>
关于电影<a>《环太平洋》</a>的评论:xxx
<br><a class="label label-danger pull-right">删除</a>
</div>
</div>
<div class="box-comment">
<img class="img-circle img-sm"
src="{{ url_for('static',filename='admin/dist/img/user5-128x128.jpg') }}" alt="User Image">
<div class="comment-text">
<span class="username">
小丽
<span class="text-muted pull-right">
<i class="fa fa-calendar" aria-hidden="true"></i>
&nbsp;
2017-01-01 12:00:00
</span>
</span>
关于电影<a>《环太平洋》</a>的评论:xxx
<br><a class="label label-danger pull-right">删除</a>
</div>
</div>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-6').addClass('active');
$('#g-6-1').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li class="treeview" id="g-6">
<a href="#">
<i class="fa fa-comments" aria-hidden="true"></i>
<span>评论管理</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li id="g-6-1">
<a href="{{ url_for('admin.comment_list') }}">
<i class="fa fa-circle-o"></i> 评论列表
</a>
</li>
</ul>
</li>

收藏管理页面搭建

视图函数

1
2
3
@admin.route('/moviecol/list/')
def moviecol_list():
return render_template('admin/moviecol_list.html')

新建app/templates/admin/moviecol_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{% extends 'admin/admin.html' %}


{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 收藏管理</a></li>
<li class="active">收藏列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">收藏列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>电影</th>
<th>用户</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>环太平洋</td>
<td>张小明</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-7').addClass('active');
$('#g-7-1').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li class="treeview" id="g-7">
<a href="#">
<i class="fa fa-heart" aria-hidden="true"></i>
<span>收藏管理</span>
<span class="label label-primary pull-right">1</span>
</a>
<ul class="treeview-menu">
<li id="g-7-1">
<a href="{{ url_for('admin.moviecol_list') }}">
<i class="fa fa-circle-o"></i> 收藏列表
</a>
</li>
</ul>
</li>

日志管理页面搭建

视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
@admin.route('/oplog/list/')
def oplog_list():
return render_template('admin/oplog_list.html')


@admin.route('/adminloginlog/list/')
def adminloginlog_list():
return render_template('admin/adminloginlog_list.html')


@admin.route('/userloginlog/list/')
def userloginlog_list():
return render_template('admin/userloginlog_list.html')

新建app/templates/admin/oplog_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{% extends 'admin/admin.html' %}


{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">操作日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">操作日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员</th>
<th>操作时间</th>
<th>操作原因</th>
<th>操作IP</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>2017-06-01</td>
<td>添加一个标签:科幻</td>
<td>192.168.4.1</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-8').addClass('active');
$('#g-8-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/adminloginlog_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{% extends 'admin/admin.html' %}


{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">管理员登录日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">管理员登录日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员</th>
<th>登录时间</th>
<th>登录IP</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>2017-06-01</td>
<td>192.168.4.1</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-8').addClass('active');
$('#g-8-2').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/userloginlog_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{% extends 'admin/admin.html' %}


{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">会员登录日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员登录日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>会员</th>
<th>登录时间</th>
<th>登录IP</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>2017-06-01</td>
<td>192.168.4.1</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-8').addClass('active');
$('#g-8-3').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<li class="treeview" id="g-8">
<a href="#">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>日志管理</span>
<span class="label label-primary pull-right">3</span>
</a>
<ul class="treeview-menu">
<li id="g-8-1">
<a href="{{ url_for('admin.oplog_list') }}">
<i class="fa fa-circle-o"></i> 操作日志列表
</a>
</li>
<li id="g-8-2">
<a href="{{ url_for('admin.adminloginlog_list') }}">
<i class="fa fa-circle-o"></i> 管理员登录日志列表
</a>
</li>
<li id="g-8-3">
<a href="{{ url_for('admin.userloginlog_list') }}">
<i class="fa fa-circle-o"></i> 会员登录日志列表
</a>
</li>
</ul>
</li>

权限管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/auth/add/')
def auth_add():
return render_template('admin/auth_add.html')


@admin.route('/auth/list/')
def auth_list():
return render_template('admin/auth_list.html')

新建app/templates/admin/auth_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">添加权限</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加权限</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">权限名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入权限名称!">
</div>
<div class="form-group">
<label for="input_url">权限地址</label>
<input type="text" class="form-control" id="input_url" placeholder="请输入权限地址!">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-9').addClass('active');
$('#g-9-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/auth_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">权限列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">权限列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>地址</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>添加标签</td>
<td>/tag/add/</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-9').addClass('active');
$('#g-9-2').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li class="treeview" id="g-9">
<a href="#">
<i class="fa fa-lock" aria-hidden="true"></i>
<span>权限管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li id="g-9-1">
<a href="{{ url_for('admin.auth_add') }}">
<i class="fa fa-circle-o"></i> 添加权限
</a>
</li>
<li id="g-9-2">
<a href="{{ url_for('admin.auth_list') }}">
<i class="fa fa-circle-o"></i> 权限列表
</a>
</li>
</ul>
</li>

角色管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/role/add/')
def role_add():
return render_template('admin/role_add.html')


@admin.route('/role/list/')
def role_list():
return render_template('admin/role_list.html')

新建app/templates/admin/role_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
{% extends 'admin/admin.html' %}

{% block css %}
<style>
#auth_list .col-md-12, #auth_list .col-md-2 {
padding: 0px;
}
</style>
{% endblock %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 角色管理</a></li>
<li class="active">添加角色</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加角色</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">角色名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入角色名称!">
</div>
<div class="form-group" id="auth_list">
<div class="col-md-12">
<label>操作权限</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" name="input_url"> 添加标签
</label>
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-10').addClass('active');
$('#g-10-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/role_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 角色管理</a></li>
<li class="active">角色列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">角色列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>角色名称</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>xxx</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
&nbsp;
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-10').addClass('active');
$('#g-10-2').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li class="treeview" id="g-10">
<a href="#">
<i class="fa fa-user-secret" aria-hidden="true"></i>
<span>角色管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li id="g-10-1">
<a href="{{ url_for('admin.role_add') }}">
<i class="fa fa-circle-o"></i> 添加角色
</a>
</li>
<li id="g-10-2">
<a href="{{ url_for('admin.role_list') }}">
<i class="fa fa-circle-o"></i> 角色列表
</a>
</li>
</ul>
</li>

管理员管理页面搭建

视图函数

1
2
3
4
5
6
7
8
@admin.route('/admin/add/')
def admin_add():
return render_template('admin/admin_add.html')


@admin.route('/admin/list/')
def admin_list():
return render_template('admin/admin_list.html')

新建app/templates/admin/admin_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 管理员管理</a></li>
<li class="active">添加管理员</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加管理员</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">管理员名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入管理员名称!">
</div>
<div class="form-group">
<label for="input_pwd">管理员密码</label>
<input type="password" class="form-control" id="input_pwd" placeholder="请输入管理员密码!">
</div>
<div class="form-group">
<label for="input_re_pwd">管理员重复密码</label>
<input type="password" class="form-control" id="input_re_pwd"
placeholder="请输入管理员重复密码!">
</div>
<div class="form-group">
<label for="input_role_id">所属角色</label>
<select class="form-control" id="input_role_id">
<option value="0">---请选择所属角色---</option>
<option value="1">xxx</option>
</select>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-11').addClass('active');
$('#g-11-1').addClass('active');
})
</script>
{% endblock %}

新建app/templates/admin/admin_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 管理员管理</a></li>
<li class="active">管理员列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">管理员列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员名称</th>
<th>管理员类型</th>
<th>管理员角色</th>
<th>添加时间</th>
</tr>
<tr>
<td>1</td>
<td>jinlong</td>
<td>普通管理员</td>
<td>系统管理员</td>
<td>2017-06-01</td>
</tr>
<tr>
<td>2</td>
<td>jianbo</td>
<td>超级管理员</td>
<td>系统管理员</td>
<td>2017-06-01</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-11').addClass('active');
$('#g-11-2').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<li class="treeview" id="g-11">
<a href="#">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span>管理员管理</span>
<span class="label label-primary pull-right">2</span>
</a>
<ul class="treeview-menu">
<li id="g-11-1">
<a href="{{ url_for('admin.admin_add') }}">
<i class="fa fa-circle-o"></i> 添加管理员
</a>
</li>
<li id="g-11-2">
<a href="{{ url_for('admin.admin_list') }}">
<i class="fa fa-circle-o"></i> 管理员列表
</a>
</li>
</ul>
</li>

最后修改一下app/static/admin/dist/js/app.js,不修改也无所谓

1
2
3
4
5
6
7
8
9
10
11
if ($("body").hasClass("fixed")) {
$(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
} else {
var postSetWidth;
if (window_height >= sidebar_height) {
$(".content-wrapper, .right-side").css('min-height', window_height);
postSetWidth = window_height - neg;
} else {
$(".content-wrapper, .right-side").css('min-height', sidebar_height);
postSetWidth = sidebar_height;
}

后台管理

实现后台管理系统使用flask sqlalchemy结合mysql数据库进行增删改查操作、分页的使用、路由装饰器定义、模板中变量调用、登录会话机制、上传文件、flask wtforms表单使用.

管理员登录

models进行重构,将数据库的配置信息放在app/__init__.py文件中

1
2
3
4
5
6
7
8
9
from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+mysqlconnector://root:123456@127.0.0.1:3306/movie'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
app.config['SECRET_KEY'] = 'cb34xxxxxxxxxxxxxxxxxxbae30d90f6'

db = SQLAlchemy(app)

models文件中直接引入db

1
from app import db

定义登陆表单字段
app/admin/forms.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, ValidationError

from app.models import Admin


class LoginForm(FlaskForm):
'''
管理员登陆表单
'''
account = StringField(
label='账号',
validators=[
DataRequired("请输入账号!")
],
description="账号",
render_kw={
"class": "form-control",
"placeholder": "请输入账号!",
"required": "required"
}
)
pwd = PasswordField(
label='密码',
validators=[
DataRequired("请输入密码!")
],
description="密码",
render_kw={
"class": "form-control",
"placeholder": "请输入密码!",
"required": "required"
}
)
submit = SubmitField(
'登录',
render_kw={
"class": "btn btn-primary btn-block btn-flat",
}
)

def validate_account(self, field):
account = field.data
admin = Admin.query.filter_by(name=account).count()
if admin == 0:
raise ValidationError("账号不存在!")

render_kw里的样式是前端代码中的

编写试图函数

1
2
3
4
5
6
7
8
# 装饰器用来进行访问控制
def admin_login_req(func):
@wraps(func)
def decorated_function(*args, **kwargs):
if session.get('admin', None) is None:
return redirect(url_for('admin.login', next=request.url))
return func(*args, **kwargs)
return decorated_function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@admin.route('/login/', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
data = form.data
admin = Admin.query.filter_by(name=data['account']).first()
if not admin.check_pwd(data['pwd']):
flash("账号或密码错误! ")
return redirect(url_for('admin.login'))
session['admin'] = data['account']
return redirect((request.args.get('next') or url_for('admin.index')))
return render_template('admin/login.html', form=form)


@admin.route('/logout/')
@admin_login_req
def logout():
session.clear()
return redirect(url_for('admin.login'))

在每一个需要进行登陆才能操作的视图函数中加入装饰器,像logout视图一样
Admin模型中添加密码校验函数

1
2
3
def check_pwd(self, pwd):
from werkzeug.security import check_password_hash
return check_password_hash(self.pwd, pwd)

修改模板app/templates/admin/login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="login-box-body">
{% for message in get_flashed_messages() %}
<p class="login-box-msg" style="color: red">{{ message }}</p>
{% endfor %}

<form action="" method="post" id="form-data">
<div class="form-group has-feedback">
{{ form.account }}
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
{% for err in form.account.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}

</div>
<div class="form-group has-feedback">
{{ form.pwd }}
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
{% for err in form.pwd.errors %}
<div class="col-md-12" id="input_pwd" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="row">
<div class="col-xs-8">
</div>
<div class="col-xs-4">
{{ form.submit }}
{{ form.csrf_token }}
</div>
</div>
</form>
</div>

标签管理

创建一个表单form
app/admin/forms.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class TagForm(FlaskForm):
name = StringField(
label='名称',
validators=[
DataRequired("请输入标签!")
],
description="名称",
render_kw={
"class": "form-control",
"id": "input_name",
"placeholder": "请输入标签名称!"
}
)
submit = SubmitField(
'编辑',
render_kw={
"class": "btn btn-primary"
}
)

添加标签

视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@admin.route('/tag/add/', methods=['GET', 'POST'])
@admin_login_req
def tag_add():
form = TagForm()
if form.validate_on_submit():
data = form.data
tag = Tag.query.filter_by(name=data['name']).count()
if tag == 1:
flash("标签已存在!", 'error')
return redirect(url_for('admin.tag_add'))
tag = Tag(
name=data['name']
)
db.session.add(tag)
db.session.commit()
flash("标签添加成功!", 'info')
return redirect(url_for('admin.tag_add'))
return render_template('admin/tag_add.html', form=form)

修改前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form role="form" method="post">
<div class="box-body">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
{% for message in get_flashed_messages(category_filter=['error']) %}
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-ban"></i> 操作失败!</h4>
{{ message }}
</div>
{% endfor %}


<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name }}
{% for err in form.name.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.submit }}
{{ form.csrf_token }}
</div>
</form>

标签列表

视图函数

1
2
3
4
5
6
7
8
9
@admin.route('/tag/list/<int:page>/')
@admin_login_req
def tag_list(page=1):
if page <= 0:
page = 1
page_data = Tag.query.order_by(
Tag.addtime.desc()
).paginate(page=page, per_page=10)
return render_template('admin/tag_list.html', page_data=page_data)

修改前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="box-body table-responsive no-padding">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
{% for tag in page_data.items %}
<tr>
<td>{{ tag.id }}</td>
<td>{{ tag.name }}</td>
<td>{{ tag.addtime }}</td>
<td>
<a href="{{ url_for('admin.tag_edit', id=tag.id) }}" class="label label-success">编辑</a>
&nbsp;
<a href="{{ url_for('admin.tag_del', id=tag.id) }}" class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>

当标签较多时,需要对标签进行分页
分页http://www.pythondoc.com/flask-sqlalchemy/api.html?highlight=paginate#id4

新建一个分页的macro
app/templates/ui/admin_page.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% macro pagination(data, url) -%}
{% if data %}
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="{{ url_for(url, page=1) }}">首页</a></li>

{% if data.has_prev %}
<li><a href="{{ url_for(url, page=data.prev_num) }}">上一页</a></li>
{% else %}
<li class="disabled"><a href="#">上一页</a></li>
{% endif %}

{% for v in data.iter_pages() %}
{% if v == data.page %}
<li class="active"><a href="#">{{ v }}</a></li>
{% else %}
<li><a href="{{ url_for(url, page=v) }}">{{ v }}</a></li>
{% endif %}
{% endfor %}

{% if data.has_next %}
<li><a href="{{ url_for(url, page=data.next_num) }}">下一页</a></li>
{% else %}
<li class="disabled"><a href="#">下一页</a></li>
{% endif %}

<li><a href="{{ url_for(url, page=data.pages) }}">尾页</a></li>
</ul>

{% endif %}
{%- endmacro %}

在标签列表中使用这个macro

1
2
3
4
5
6
7
8
{% extends 'admin/admin.html' %}
{% from 'ui/admin_page.html' import pagination %}

...

<div class="box-footer clearfix">
{{ pagination(page_data, 'admin.tag_list') }}
</div>

删除标签

视图函数

1
2
3
4
5
6
7
8
@admin.route('/tag/del/<int:id>/')
@admin_login_req
def tag_del(id=None):
tag = Tag.query.filter_by(id=id).first_or_404()
db.session.delete(tag)
db.session.commit()
flash('删除标签成功!', 'info')
return redirect(url_for('admin.tag_list', page=1))

修改标签列表中删除按钮的a标签

1
<a href="{{ url_for('admin.tag_del', id=tag.id) }}" class="label label-danger">删除</a>

修改标签

视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@admin.route('/tag/edit/<int:id>/', methods=['GET', 'POST'])
@admin_login_req
def tag_edit(id=None):
form = TagForm()
tag = Tag.query.get_or_404(id)
if form.validate_on_submit():
data = form.data
tag_count = Tag.query.filter_by(name=data['name']).count()
if tag.name != data['name'] and tag_count == 1:
flash("标签已存在!", 'error')
return redirect(url_for('admin.tag_edit', id=id))
tag.name=data['name']
db.session.add(tag)
db.session.commit()
flash("标签修改成功!", 'info')
return redirect(url_for('admin.tag_list', page=1))
return render_template('admin/tag_edit.html', form=form, tag=tag)

新建app/templates/admin/tag_edit.html,用来进行标签的修改
代码和添加标签中的几乎一致,只是需要显示标签的名字

1
2
3
4
5
6
7
<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name(value=tag.name) }}
{% for err in form.name.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}
</div>

电影管理

新建电影表单
app/admin/forms.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
class MovieForm(FlaskForm):
title = StringField(
label='片名',
validators=[
DataRequired("请输入片名!")
],
description="片名",
render_kw={
"class": "form-control",
"id": "input_title",
"placeholder": "请输入片名!"
}
)
url = FileField(
label='文件',
validators=[
DataRequired("请上传文件!")
],
description="文件",
)
info = TextAreaField(
label='简介',
validators=[
DataRequired("请输入简介!")
],
description="简介",
render_kw={
"class": "form-control",
"rows": "10",
"id": "input_info",
}
)

logo = FileField(
label='封面',
validators=[
DataRequired("请上传封面!")
],
description="封面",
)
star = SelectField(
label='星级',
validators=[
DataRequired("请选择星级!")
],
coerce=int,
choices=[(1, '1星'), (2, '2星'), (3, '3星'), (4, '4星'), (5, '5星')],
description="星级",
render_kw={
"class": "form-control",
}
)
tag_id = SelectField(
label='标签',
validators=[
DataRequired("请选择标签!")
],
coerce=int,
choices=[(v.id, v.name) for v in tags],
description="标签",
render_kw={
"class": "form-control",
}
)
area = StringField(
label='地区',
validators=[
DataRequired("请输入地区!")
],
description="地区",
render_kw={
"class": "form-control",
"placeholder": "请输入地区!"
}
)
length = StringField(
label='片长',
validators=[
DataRequired("请输入片长!")
],
description="片长",
render_kw={
"class": "form-control",
"placeholder": "请输入片长!"
}
)
release_time = StringField(
label='上映时间',
validators=[
DataRequired("请选择上映时间!")
],
description="上映时间",
render_kw={
"class": "form-control",
"id": "input_release_time",
"placeholder": "请选择上映时间!"
}
)
submit = SubmitField(
'编辑',
render_kw={
"class": "btn btn-primary"
}
)

def validate_title(self, field):
title = field.data
num = Movie.query.filter_by(title=title).count()
if num > 0:
raise ValidationError("该电影已存在!")

在app初始化文件中定义上传文件的目录

1
app.config['UP_DIR'] = os.path.join(os.path.abspath(os.path.dirname(__file__)), 'static/uploads/')

添加电影

视图函数
文件名称检测

1
2
3
4
5
6
from werkzeug.utils import secure_filename

def change_filename(filename):
fileinfo = os.path.splitext(filename)
filename = datetime.datetime.now().strftime('%Y%m%d%H%M%S') + str(uuid.uuid4().hex) + fileinfo[-1]
return filename

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@admin.route('/movie/add/', methods=['GET', 'POST'])
@admin_login_req
def movie_add():
form = MovieForm()
if form.validate_on_submit():
data = form.data
file_url = secure_filename(form.url.data.filename)
file_logo = secure_filename(form.logo.data.filename)

if not os.path.exists(app.config['UP_DIR']):
os.makedirs(app.config['UP_DIR'])
os.chmod(app.config['UP_DIR'], 6)

url = change_filename(file_url)
logo = change_filename(file_logo)
form.url.data.save(app.config['UP_DIR'] + url)
form.logo.data.save(app.config['UP_DIR'] + logo)

movie = Movie(
title=data['title'],
url=url,
info=data['info'],
logo=logo,
star=int(data['star']),
playnum=0,
commentnum=0,
tag_id=int(data['tag_id']),
area=data['area'],
release_time=data['release_time'],
length=data['length']
)
db.session.add(movie)
db.session.commit()
flash('电影添加成功!', 'info')
return redirect(url_for('admin.movie_add'))
return render_template('admin/movie_add.html', form=form)

app/templates/admin/movie_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">添加电影</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加电影</h3>
</div>
<form role="form" method="post" enctype="multipart/form-data">
<div class="box-body">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_title">{{ form.title.label }}</label>
{{ form.title }}
{% for err in form.title.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_url">{{ form.url.label }}</label>
{{ form.url }}
{% for err in form.url.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
<div style="margin-top:5px;">
{# <div id="moviecontainer"></div>#}
</div>
</div>
<div class="form-group">
<label for="input_info">{{ form.info.label }}</label>
{{ form.info }}
{% for err in form.info.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_logo">{{ form.logo.label }}</label>
{{ form.logo }}
{% for err in form.logo.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
{# <img data-src="holder.js/262x166" style="margin-top:5px;" class="img-responsive"#}
{# alt="">#}
</div>
<div class="form-group">
<label for="input_star">{{ form.star.label }}</label>
{{ form.star }}
{% for err in form.star.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_tag_id">{{ form.tag_id.label }}</label>
{{ form.tag_id }}
{% for err in form.tag_id.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_area">{{ form.area.label }}</label>
{{ form.area }}
{% for err in form.area.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_length">{{ form.length.label }}</label>
{{ form.length }}
{% for err in form.length.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_release_time">{{ form.release_time.label }}</label>
{{ form.release_time }}
{% for err in form.release_time.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

电影列表

视图函数

1
2
3
4
5
6
7
8
9
10
11
@admin.route('/movie/list/<int:page>/')
@admin_login_req
def movie_list(page=1):
if page <= 0:
page = 1
page_data = Movie.query.join(Tag).filter(
Tag.id == Movie.tag_id
).order_by(
Movie.addtime.desc()
).paginate(page=page, per_page=10)
return render_template('admin/movie_list.html', page_data=page_data)

app/templates/admin/movie_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
{% extends 'admin/admin.html' %}
{% from 'ui/admin_page.html' import pagination %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">电影列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">电影列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>片名</th>
<th>片长</th>
<th>标签</th>
<th>地区</th>
<th>星级</th>
<th>播放数量</th>
<th>评论数量</th>
<th>上映时间</th>
<th>操作事项</th>
</tr>
{% for data in page_data.items %}

<tr>
<td>{{ data.id }}</td>
<td>{{ data.title }}</td>
<td>{{ data.length }}分钟</td>
<td>{{ data.tag.name }}</td>
<td>{{ data.area }}</td>
<td>{{ data.star }}</td>
<td>{{ data.playnum }}</td>
<td>{{ data.commentnum }}</td>
<td>{{ data.release_time }}</td>
<td>
<a href="{{ url_for('admin.movie_edit', id=data.id) }}" class="label label-success">编辑</a>
&nbsp;
<a href="{{ url_for('admin.movie_del', id=data.id) }}"
class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}

</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pagination(page_data, 'admin.movie_list') }}
</div>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-3').addClass('active');
$('#g-3-2').addClass('active');
})
</script>
{% endblock %}

修改app/templates/admin/grid.html

1
2
3
4
5
<li id="g-3-2">
<a href="{{ url_for('admin.movie_list', page=1) }}">
<i class="fa fa-circle-o"></i> 电影列表
</a>
</li>

删除电影

视图函数

1
2
3
4
5
6
7
8
@admin.route('/movie/del/<int:id>/')
@admin_login_req
def movie_del(id=None):
movie = Movie.query.get_or_404(int(id))
db.session.delete(movie)
db.session.commit()
flash('电影删除成功!', 'info')
return redirect(url_for('admin.movie_list', page=1))

修改一下前端删除按钮a标签

修改电影

视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@admin.route('/movie/edit/<int:id>', methods=['GET', 'POST'])
@admin_login_req
def movie_edit(id=None):
form = MovieForm()

# # 如果不设置,默认依然会让上传文件
# form.url.flags.required = False
# form.logo.flags.required = False

# # 取消校验,可能没有上传文件
# form.url.validators=[]
# form.logo.validators=[]
# 取消后如果没有上传文件,form.url.data是一个str对象
# 上传文件后是才是一个文件对象
# 为了方便,设置必须上传文件

movie=Movie.query.get_or_404(int(id))
if request.method =='GET':
form.info.data = movie.info
form.tag_id.data = movie.tag_id
form.star.data = movie.star
if form.validate_on_submit():
data = form.data
movie_count = Movie.query.filter_by(title=data['title']).count()
if movie_count == 1 and movie.title != data['title']:
flash('该电影已存在!', 'error')
return redirect(url_for('admin.movie_edit', id=id))

if not os.path.exists(app.config['UP_DIR']):
os.makedirs(app.config['UP_DIR'])
os.chmod(app.config['UP_DIR'], 6)

if form.url.data !='':
file_url = secure_filename(form.url.data.filename)
movie.url = change_filename(file_url)
form.url.data.save(app.config['UP_DIR'] + movie.url)

if form.logo.data != '':
file_logo = secure_filename(form.logo.data.filename)
movie.logo = change_filename(file_logo)
form.logo.data.save(app.config['UP_DIR'] + movie.logo)

movie.star = data['star']
movie.tag_id = data['tag_id']
movie.info = data['info']
movie.title = data['title']
movie.area = data['area']
movie.length = data['length']
movie.release_time = data['release_time']

db.session.add(movie)
db.session.commit()
flash('电影修改成功!', 'info')
return redirect(url_for('admin.movie_edit', id=movie.id))
return render_template('admin/movie_edit.html', form=form, movie=movie)

app/templates/admin/movie_edit.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">修改电影</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">修改电影</h3>
</div>
<form role="form" method="post" enctype="multipart/form-data">
<div class="box-body">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
{% for message in get_flashed_messages(category_filter=['error']) %}
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-ban"></i> 操作失败!</h4>
{{ message }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_title">{{ form.title.label }}</label>
{{ form.title(value=movie.title) }}
{% for err in form.title.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_url">{{ form.url.label }}</label>
{{ form.url }}
{% for err in form.url.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
<div style="margin-top:5px;">
<div id="moviecontainer"></div>
</div>
</div>
<div class="form-group">
<label for="input_info">{{ form.info.label }}</label>
{{ form.info }}
{% for err in form.info.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_logo">{{ form.logo.label }}</label>
{{ form.logo }}
{% for err in form.logo.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
<img src="{{ url_for('static', filename='uploads/'+movie.logo) }}" style="margin-top:5px;" class="img-responsive"
alt="">
</div>
<div class="form-group">
<label for="input_star">{{ form.star.label }}</label>
{{ form.star }}
{% for err in form.star.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_tag_id">{{ form.tag_id.label }}</label>
{{ form.tag_id }}
{% for err in form.tag_id.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_area">{{ form.area.label }}</label>
{{ form.area(value=movie.area) }}
{% for err in form.area.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_length">{{ form.length.label }}</label>
{{ form.length(value=movie.length) }}
{% for err in form.length.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_release_time">{{ form.release_time.label }}</label>
{{ form.release_time(value=movie.release_time) }}
{% for err in form.release_time.errors %}
<div class="col-md-12" style="color: red">{{ err }}</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script src="{{ url_for('static',filename='jwplayer/jwplayer.js') }}"></script>
<script type="text/javascript">
jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";

</script>
<script type="text/javascript">
jwplayer("moviecontainer").setup({
flashplayer: "{{ url_for('static',filename='jwplayer/jwplayer.flash.swf') }}",
playlist: [{
file: "{{ url_for('static', filename='uploads/'+movie.url) }}",
title: "{{ movie.title }}"
}],
modes: [{
type: "html5"
}, {
type: "flash",
src: "{{ url_for('static',filename='jwplayer/jwplayer.flash.swf') }}"
}, {
type: "download"
}],
skin: {
name: "vapor"
},
"playlist.position": "left",
"playlist.size": 200,
height: 250,
width: 387,
});

</script>
<script>
$(document).ready(function () {
$('#input_release_time').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
language: 'zh-CN',
});
});

</script>
<script>
$(document).ready(function () {
$('#g-3').addClass('active');
$('#g-3-1').addClass('active');
})
</script>
{% endblock %}

修改电影列表中的编辑按钮

1
<a href="{{ url_for('admin.movie_edit', id=data.id) }}" class="label label-success">编辑</a>

预告管理

创建预告表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class PreviewForm(FlaskForm):
title = StringField(
label='预告标题',
validators=[
DataRequired("请输入预告标题!")
],
description="预告标题",
render_kw={
"class": "form-control",
"placeholder": "请输入预告标题!"
}
)
logo = FileField(
label='预告封面',
validators=[
DataRequired("请上传预告封面!"),
],
description="预告封面",
)
submit = SubmitField(
'编辑',
render_kw={
"class": "btn btn-primary"
}
)

def validate_title(self, field):
title = field.data
num = Preview.query.filter_by(title=title).count()
if num > 0:
raise ValidationError("该预告已存在!")

添加预告

视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@admin.route('/preview/add/', methods=['GET', 'POST'])
@admin_login_req
def preview_add():
form = PreviewForm()
if form.validate_on_submit():
data = form.data
file_logo = secure_filename(form.logo.data.filename)

if not os.path.exists(app.config['UP_DIR']):
os.makedirs(app.config['UP_DIR'])
os.chmod(app.config['UP_DIR'], 6)

logo = change_filename(file_logo)
form.logo.data.save(app.config['UP_DIR']+logo)
preview = Preview(
title=data['title'],
logo=logo
)
db.session.add(preview)
db.session.commit()
flash("预告添加成功!", 'info')
return redirect(url_for('admin.preview_add'))
return render_template('admin/preview_add.html', form = form)

app/templates/admin/preview_add.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
{% extends 'admin/admin.html' %}

{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
<li class="active">添加预告</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加预告</h3>
</div>
<form role="form" method="post" enctype="multipart/form-data">
<div class="box-body">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
{% for message in get_flashed_messages(category_filter=['error']) %}
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-ban"></i> 操作失败!</h4>
{{ message }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_title">{{ form.title.label }}</label>
{{ form.title }}
{% for err in form.title.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_logo">{{ form.logo.label }}</label>
{{ form.logo }}
{% for err in form.logo.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}
<img data-src="holder.js/700x320" style="margin-top:5px;" class="img-responsive"
alt="">
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(document).ready(function () {
$('#g-4').addClass('active');
$('#g-4-1').addClass('active');
})
</script>
{% endblock %}

预告列表

视图函数

1
2
3
4
5
6
7
8
9
@admin.route('/preview/list/<int:page>/')
@admin_login_req
def preview_list(page=1):
if page <= 0:
page = 1
page_data = Preview.query.order_by(
Preview.addtime.desc()
).paginate(page=page, per_page=10)
return render_template('admin/preview_list.html', page_data=page_data)

app/templates/admin/preview_list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
{% extends 'admin/admin.html' %}
{% from 'ui/admin_page.html' import pagination %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
<li class="active">预告列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">预告列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">

<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
{% for message in get_flashed_messages(category_filter=['info']) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功!</h4>
{{ message }}
</div>
{% endfor %}
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>预告标题</th>
<th>预告封面</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
{% for data in page_data.items %}
<tr>
<td>{{ data.id }}</td>
<td>{{ data.title }}</td>
<td>
<img src="{{ url_for('static', filename='uploads/'+data.logo) }}"
class="img-responsive center-block" alt="" style="width: 140px">
</td>
<td>&