1.列出项目框架
|——app
| |——static #静态文件目录
| |——templates #html页面目录
| |——init.py #读取配置信息
| |——forms.py #表单
| |——models.py #数据模型
| |——views.py #视图函数
|——config.py #配置信息
|——manage.py #执行函数
2. 代码操作步骤
- 创建数据库与初始化数据表单；
- 编写配置文件；
- 编写表单与视图函数；
- 通过视图函数制作网页；
- 调试代码。
3.编程
1. 创建数据库与初始化数据表
创建数据库
create database Todo default charset=utf8;
创建数据表类：
class User(db.Model):
id = db.Column(db.Integer, autoincrement=True, primary_key=True)
username = db.Column(db.String(20), unique=True)
password_hash = db.Column(db.String(100), nullable=False)
email = db.Column(db.String(30), unique=True)
add_time = db.Column(db.DateTime, default=datetime.utcnow()) # 账户创建时间
# 1). User添加属性todos; 2). Todo添加属性user;
todos = db.relationship('Todo', backref="user")
categories = db.relationship('Category', backref='user')
@property
def password(self):
"""u.password"""
raise AttributeError("密码属性不可以读取")
@password.setter
def password(self, password):
"""u.password = xxxxx """
self.password_hash = generate_password_hash(password)
def verify_password(self, password):
"""验证密码是否正确"""
return check_password_hash(self.password_hash, password)
def __repr__(self):
return "<User %s>" %(self.username)
# 任务和分类的关系： 一对多
# 分类是一， 任务是多, 外键写在多的一端
class Todo(db.Model):
id = db.Column(db.Integer, autoincrement=True, primary_key=True)
content = db.Column(db.String(100)) # 任务内容
status = db.Column(db.Boolean, default=False) # 任务的状态
# datetime.now()你当前所在时区的时间;
# 使用协调时间时（Coordinated Universal Time,UTC）协调世界各地的时差问题;
# 美国时间: 2019-3-15 00:00 北京时间: 2019-03-16 12:00 ***
add_time = db.Column(db.DateTime, default=datetime.utcnow()) # 任务创建时间
# 任务的类型,关联另外一个表的id
category_id = db.Column(db.Integer, db.ForeignKey('category.id'))
# 任务所属用户;
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
def __repr__(self):
return "<Todo %s>" %(self.content[:6])
class Category(db.Model):
id = db.Column(db.Integer, autoincrement=True, primary_key=True)
name = db.Column(db.String(20), unique=True)
add_time = db.Column(db.DateTime, default=datetime.utcnow()) # 任务创建时间
# 1). Category添加一个属性todos, 2). Todo添加属性category；
todos = db.relationship('Todo', backref='category')
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
def __repr__(self):
return "<Category %s>" %(self.name)
初始化数据表：
@manager.command
def dbinit():
"""数据库初始化信息"""
db.drop_all()
db.create_all()
u = User(username='admin', email="[email protected]")
u.password = 'admin'
db.session.add(u)
db.session.commit()
print("用户%s创建成功......." % (u.username))
c = Category(name="学习", user_id=1)
db.session.add(c)
print("分类%s创建成功...." % (c.name))
t = Todo(content="学习Flask", category_id=1, user_id=1)
db.session.add(t)
print("任务%s添加成功....." % (t.content))
db.session.commit()
2.编写配置文件
SQLALCHEMY_DATABASE_URI = 'mysql://root:redhat@localhost/Todo'
SQLALCHEMY_TRACK_MODIFICATIONS = True
SECRET_KEY = 'westos'
PER_PAGE = 5
3.编写表单与视图函数
登录表单与注册表单
# 注册表单
class RegisterForm(FlaskForm):
email = StringField(
label="邮箱",
validators=[
DataRequired(),
Email(),
]
)
username = StringField(
label="用户名",
validators=[
DataRequired(),
],
)
password = PasswordField(
label='密码',
validators=[
DataRequired(),
Length(6, 12, "密码必须是6-12位")
]
)
repassword = PasswordField(
label='确认密码',
validators=[
EqualTo("password", "密码与确认密码不一致")
]
)
submit = SubmitField(
label="注册"
)
# 默认情况下validate_username会验证用户名是否正确， 验证的规则， 写在函数里面
def validate_username(self, field):
# filed.data ==== username表单提交的内容
u = User.query.filter_by(username=field.data).first()
if u:
raise ValidationError("用户名%s已经注册" % (u.username))
def validate_email(self, filed):
u = User.query.filter_by(email=filed.data).first()
if u:
raise ValidationError("邮箱%s已经注册" % (u.email))
# 登录表单
class LoginForm(FlaskForm):
username = StringField(
label="用户名",
validators=[
DataRequired(),
],
)
password = PasswordField(
label='密码',
validators=[
DataRequired(),
# Length(6, 12, "密码必须是6-12位")
]
)
submit = SubmitField(
label="登录"
)
# 关于任务的基类
class TodoForm(FlaskForm):
content = StringField(
label="任务内容",
validators=[
DataRequired()
]
)
# 任务类型
category = SelectField(
label="任务类型",
coerce=int,
choices=[(item.id, item.name) for item in Category.query.all()]
)
class AddTodoForm(TodoForm):
finish_time = DateTimeField(
label="任务终止日期"
)
submit = SubmitField(
label="添加任务",
)
class EditTodoForm(TodoForm):
submit = SubmitField(
label="编辑任务",
)
视图函数：
# 判断是否为登录状态
def is_login(f):
@wraps(f)
def wrapper(*args, **kwargs):
# 判断session对象中是否有seesion['user'],
# 如果包含信息， 则登录成功， 可以访问主页；
# 如果不包含信息， 则未登录成功， 跳转到登录界面;；
if session.get('user', None):
return f(*args, **kwargs)
else:
flash("用户必须登录才能访问%s" % (f.__name__))
return redirect(url_for('login'))
return wrapper
# 主页
@app.route('/')
def index():
return redirect(url_for('list'))
# 注册页面
@app.route('/register/', methods=['POST', 'GET'])
def register():
form = RegisterForm()
if form.validate_on_submit():
# 1. 从前端获取用户输入的值;
email = form.email.data
username = form.username.data
password = form.password.data
# 2. 判断用户是否已经存在? 如果返回位None，说明可以注册;
u = User.query.filter_by(username=username).first()
if u:
flash("用户%s已经存在" % (u.username))
return redirect(url_for('register'))
else:
u = User(username=username, email=email)
u.password = password
db.session.add(u)
db.session.commit()
flash("注册用户%s成功" % (u.username))
return redirect(url_for('login'))
return render_template('register.html',
form=form)
# 登录页面
@app.route('/login/', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
username = form.username.data
password = form.password.data
# 1. 判断用户是否存在?
u = User.query.filter_by(username=username).first()
if u and u.verify_password(password):
session['user_id'] = u.id
session['user'] = u.username
flash("登录成功!")
return redirect(url_for('index'))
else:
flash("用户名或者密码错误!")
return redirect(url_for('login'))
return render_template('login.html',
form=form)
# 注销
@app.route('/logout/')
@is_login
def logout():
session.pop('user_id', None)
session.pop('user', None)
return redirect(url_for('login'))
# 添加任务
@app.route('/todo/add/', methods=['GET', 'POST'])
@is_login
def todo_add():
form = AddTodoForm()
if form.validate_on_submit():
# 获取用户提交的内容
content = form.content.data
category_id = form.category.data
# 添加到数据库中
# 用户登录才可以添加任务，
todo = Todo(content=content,
category_id=category_id,
user_id=session.get('user_id'))
db.session.add(todo)
db.session.commit()
flash("任务添加成功")
return redirect(url_for('todo_add'))
return render_template('todo/add_todo.html',
form=form)
# 编辑任务
@app.route('/todo/edit/<int:id>/', methods=['GET', 'POST'])
@is_login
def todo_edit(id):
form = EditTodoForm()
# *****重要: 编辑时需要获取原先任务的信息， 并显示到表单里面;
todo = Todo.query.filter_by(id=id).first()
form.content.data = todo.content
form.category.data = todo.category_id
if form.validate_on_submit():
# 更新时获取表单数据一定要使用request.form方法获取， 而form.content.data并不能获取用户更新后提交的表单内容;
# print(request.form)
# content = form.content.data # error
# category_id = form.category.data # error
content = request.form.get('content')
category_id = request.form.get('category')
# 更新到数据库里面
todo.content = content
todo.category_id = category_id
db.session.add(todo)
db.session.commit()
flash("更新任务成功")
return redirect(url_for('list'))
return render_template('todo/edit_todo.html',
form=form)
# 删除任务: 根据任务id删除
@app.route('/todo/delete/<int:id>/')
@is_login
def todo_delete(id):
todo = Todo.query.filter_by(id=id).first()
db.session.delete(todo)
db.session.commit()
flash("删除任务成功")
return redirect(url_for('list'))
# 查看任务
@app.route('/todo/list/')
@app.route('/todo/list/<int:page>/')
@is_login
def list(page=1):
# 任务显示需要分页
# Todo.query.paginate(page, per_page=5)
todoPageObj = Todo.query.filter_by(user_id=session.get('user_id')).paginate(page, per_page=app.config['PER_PAGE']) # 在config.py文件中有设置;
return render_template('todo/list_todo.html',
todoPageObj=todoPageObj,
)
# 修改任务状态为完成
@app.route('/todo/done/<int:id>/')
@is_login
def done(id):
todo = Todo.query.filter_by(id=id).first()
todo.status = True
db.session.add(todo)
db.session.commit()
flash("修改状态成功")
return redirect(url_for('list'))
# 修改任务状态为未完成
@app.route('/todo/undo/<int:id>')
@is_login
def undo(id):
todo = Todo.query.filter_by(id=id).first()
todo.status = False
db.session.add(todo)
db.session.commit()
flash("修改状态成功")
return redirect(url_for('list'))
# 使用echarts图表显示已完成的任务与未完成任务的数量比
@app.route('/newShowTodo/')
@is_login
def newShowTodo():
return render_template('todo/new_show_todo.html')
@app.route('/get_data/')
@is_login
def get_data():
done_count = Todo.query.filter_by(status=True).count()
undone_count = Todo.query.filter_by(status=False).count()
info = {
'info': ["已完成", "未完成"],
'count': [done_count, undone_count]
}
# 解决中文编码问题
return json.dumps(info, ensure_ascii=False)
4. 通过视图函数与表单制作网页
- 模板页面
{% extends 'bootstrap/base.html' %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}
{% block scripts %}
{{ super() }}
{# 实质使导入moment.js库的, 通过Flask-moment集成了起来#}
{{ moment.include_moment() }}
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">任务管理</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页 <span class="sr-only">(current)</span></a></li>
<li><a href="{{ url_for('list') }}">用户信息</a></li>
<li><a href="#">监控</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="{{ url_for('newShowTodo') }}">数据分析</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{# 分类讨论:
1. 如果没有登录， 显示登录和注册按钮；
2. 如果登录成功， 显示用户名称和注销按钮
#}
{% if not session.user %}
<li><a href="{{ url_for('login') }}">登录</a></li>
<li><a href="{{ url_for('register') }}">注册</a></li>
{% else %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">当前用户：{{ session.user }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li><a href="{{ url_for('logout') }}">注销</a></li>
</ul>
</li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{#让每个页面都可以获取闪现信息闪现#}
{% for item in get_flashed_messages() %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
{{ item }}
</div>
{% endfor %}
{% endblock %}
- 登录页面
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}登录页面{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h1>
登录
<small>
没有帐号
{# <a href="/login/">登录</a>#}
<a href="{{ url_for('register') }}">注册</a>
</small>
</h1>
</div>
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
- 注册页面
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}注册页面{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h1>
注册
<small>
已有帐号
{# <a href="/login/">登录</a>#}
<a href="{{ url_for('login') }}">登录</a>
</small>
</h1>
</div>
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
- 显示任务清单
{% extends 'base.html' %}
{% block title %}
任务显示
{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h1>任务显示</h1>
</div>
<table class="table table-hover">
<tr>
<td>任务内容</td>
<td>任务状态</td>
<td>任务分类</td>
<td>所属用户</td>
<td>创建时间</td>
<td>操作</td>
</tr>
{% for todo in todoPageObj.items %}
<tr>
{% if todo.status %}
<td>
<del>{{ todo.content }}</del>
</td>
{% else %}
<td>{{ todo.content }}</td>
{% endif %}
<td>
{% if todo.status %}
<a href="{{ url_for('undo', id=todo.id) }}" style="color:green ">
<span class="glyphicon glyphicon-ok"
aria-hidden="true">
</span></a>
{% else %}
<a href="{{ url_for('done', id=todo.id) }}" style="color: mediumvioletred"><span
class="glyphicon glyphicon-remove"
aria-hidden="true">
</span></a>
{% endif %}
</td>
<td>{{ todo.category.name }}</td>
<td>{{ todo.user.username }}</td>
{# <td>{{ moment(todo.add_time).format('L') }}</td>#}
<td>{{ moment(todo.add_time).fromNow(refresh=True) }}</td>
<td>
<a class="btn btn-success" href="{{ url_for('todo_edit', id=todo.id) }}"
role="button">编辑</a>
<a class="btn btn-danger" href="{{ url_for('todo_delete', id=todo.id) }}"
role="button">删除</a>
</td>
</tr>
{% endfor %}
</table>
{# # Day36 templates/list.html#}
<nav aria-label="Page navigation">
<ul class="pagination">
{#
1. 上一页的显示url获取
/list/2/ ===== url_for('list', todoPageObj.prev_num)
2. 上一页信息逻辑判断
1). 判断是否有上一页信息；
2). 如果有， 创建链接;
3). 如果没有， 该链接设为不可点击的链接
3. 上一页显示使用的类属性和方法:
1). dataObj.has_prev:
判断用户是否有上一页？
如果有，返回True； 如果没有，返回False;
2).dataObj.prev_num:
获取上一页的页数编号;
#}
{% if todoPageObj.has_prev %}
<li>
<a href="{{ url_for('list', page=todoPageObj.prev_num) }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% else %}
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
{#
详细页的显示
依次创建每个分页表框:
1). 是否为none, 设置类名为diabled；
2). 是否为当前页， 设置类名为active；
3）.其他，正常设置;
#}
{% for page in todoPageObj.iter_pages() %}
{% if page is none %}
<li class="disabled"><a href="#">......</a></li>
{% elif page == todoPageObj.page %}
<li class="active"><a href="{{ url_for('list', page=page) }}">{{ page }}</a></li>
{% else %}
<li><a href="{{ url_for('list', page=page) }}">{{ page }}</a></li>
{% endif %}
{% endfor %}
{#
1.下一页信息判断逻辑
1). 判断是否有下一页信息；
2). 如果有， 创建链接;
3). 如果没有， 该链接设为不可点击的链接
2. 使用的方法:
1). dataObj.has_next:
判断用户是否有下一页？
如果有，返回True； 如果没有，返回False;
2).dataObj.next_num: 获取下一页的页数编号;
#}
{% if todoPageObj.has_next %}
<li>
<a href="{{ url_for('list', page=todoPageObj.next_num) }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% else %}
<li class="disabled">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
{% endblock %}
- 添加任务
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}添加任务{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h1>
添加任务
</h1>
</div>
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
6.编辑任务
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}编辑任务{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h1>
编辑任务
</h1>
</div>
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
- 图表分析
{% extends 'base.html' %}
{% block title %}
图表分析
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="text/javascript">
$(function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
url: '/get_data/',
success: function (data) {
json_data = JSON.parse(data)
// 指定图表的配置项和数据
var option = {
title: {
text: '任务统计分析'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
data: json_data['info']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: json_data['count']
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('cpu'));
$.ajax({
url: '/get_cpu/',
success: function (data) {
json_data = JSON.parse(data)
// 指定图表的配置项和数据
var option = {
title: {
text: 'CPU占有率'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
data: json_data['info']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: json_data['count']
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
})
</script>
{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
任务完成度分析
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px;height:500px;
border: 1px solid gray"></div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="cpu" style="width: 500px;height:500px;
border: 1px solid gray"></div>
</div>
</div>
{% endblock %}