关于博主
努力与运动兼备～~~有任何问题可以加我好友或者关注微信公众号，欢迎交流，我们一起进步！
微信公众号: 啃饼思录
QQ: 2810706745（啃饼小白）
写在前面
本篇笔记，我们继续介绍后台页面逻辑的开发（所有的内容都是在后台admin下面，不与前台home有关系），今天分享的是关于标签的介绍，内容比较难懂，请多熟悉一下。
本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第六篇。
标签管理的配置
后面所有的后台功能的配置几乎都是这样，像电影管理，预告管理，会员管理。。。
所以我这里介绍详细一点，后面的可能就没这么详细了，好了话不多说，我们开始介绍！
使用到的内容
我们将使用到的内容有：
模型：Tag
表单: TagForm
请求方法: GET POST
访问控制: @admin_login_req
1、添加表单验证字段
打开forms.py，我们定义Form字段，注意因为是标签添加模块，所以对应的html页面就是tag_add.html，而且我们在forms.py里面定义的字段必须与tag_add.html里面的保持一致！
# 添加标签
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",
}
)
2、准备页面渲染字段
打开admin/views.py文件，我们修改tag_add函数：
from app.admin.forms import TagForm
from app.models import Tag
# 标签编辑
@admin.route('/tag/add')
@admin_login_req
def tag_add():
form = TagForm() # 实例化一个TagForm，然后将form传递到前端页面去。
return render_template("admin/tag_add.html", form=form)
3、后台页面传值显示
修改tag_add.html:
4、后台页面错误信息提示
打开tag_tag.html页面，我们进行修改：
{% for err in form.name.errors %}
<div class="col-md-12">
<p style="color:red">{{ err }}</p>
</div>
{% endfor %}
5、修改提交方法
打开tag_tag.html页面，我们进行修改：
接着我们回到views.py文件，修改add_tag函数的提交方法：
# 标签编辑
@admin.route('/tag/add', methods=["GET", "POST"])
6、标签去除重名
打开views.py文件，我们继续修改tag_add函数：
# 标签编辑
@admin.route('/tag/add', methods=["GET", "POST"])
@admin_login_req
def tag_add():
form = TagForm() # 实例化一个TagForm，然后将form传递到前端页面去。
if form.validate_on_submit():
data = form.data
tag = Tag.query.filter_by(name=data["name"]).count()
# 标签去重
if tag == 1:
flash("该标签已经存在了！", "err")
return redirect(url_for("admin.tag_add"))
tag = Tag(
name=data["name"]
)
db.session.add(tag)
db.session.commit()
flash("添加标签成功！", "ok")
return redirect(url_for("admin.tag_add"))
return render_template("admin/tag_add.html", form=form)
7、添加成功或者失败提示
打开static/admin/index.html页面，我们用浏览器打开，点击UI element/General，就出现：
或者点击这里admin LE2，先下载文件，然后点击查看也可以！接着我们按键盘上的F12开启开发者工具，然后定位绿色的成功框，复制它的html源代码到我们的tag_agg.html页面，然后修改一下：
<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>
添加标签成功！
</div>
觉得格式不好看，可以ctal+alt+L进行代码的格式化。然后进行for循环遍历，就是这样：
因为已经for循环了，所以需要把里面的 添加标签成功！修改为{{ msg }}！
那么失败呢？也是类似的操作（用红色的框的代码），这里就只附上代码了：
{% for msg in get_flashed_messages("err") %}
<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>
{{ msg }}
</div>
{% endfor %}
运行一下manage.py，然后添加一个标签，发现出了问题：
这是因为我们的get_flashed_messages用错了，可以点击这里查看官方文档：过滤闪现消息
修改为这样：
get_flashed_messages(category_filter=["ok"])
get_flashed_messages(category_filter=["err"])
现在添加就没有问题了！
至此，我们关于标签的添加就介绍完了，下面就是标签的动态显示了！
标签列表的配置
打开admin/views.py文件，修改tag_list函数如下：
# 标签列表
@admin.route('/tag/list/<int:page>', methods=["GET"])
@admin_login_req
def tag_list(page=None):
if page is None:
page = 1
page_data = Tag.query.order_by(
Tag.addtime.desc()
).paginate(page=page, per_page=1)
return render_template("admin/tag_list.html", page_data=page_data)
然后tag_list.htm页面：
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
td>{{ v.name }}</td>
<td>{{ v.addtime }}</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}
接着打开grid.html页面，修改gird中标签列表的url，为其添加参数page =1：
<a href="{{ url_for('admin.tag_list', page=1) }}">
<i class="fa fa-circle-o"></i> 标签列表
</a>
分页功能
点击这里，获取api实用工具，我们采用了macro的语法，我们在static文件夹下面新建一个ui的文件，然后在里面创建admin_page.html文件：
然后复制这段代码到里面去：
{% macro page(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 %}
{% 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 %}
{% 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 %}
然后去掉tag_list.html里面的图中所示的那段代码：
并且在开头导入刚才的admin_page.html文件，然后开始调用：
{% import "ui/admin_page.html" as pg %}
将下面的代码填充你刚才删除的那段的位置：
{{ pg.page(page_data, "admin.tag_list") }}
至此，关于标签列表的介绍就到此为止了！接下来是标签的删除和编辑！
标签的删除
首先点击这里，获取官方文档flask-sqlalchemy删除,了解一下，我们现在开始编辑代码：打开views.py文件，我们在标签列表的下面新增以下代码：
# 标签删除
@admin.route('/tag/del/<int:id>', methods=["GET"])
@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("标签删除成功！", "ok")
return redirect(url_for("admin.tag_list", page=1))
接着打开tag_list.html页面，我们复制提示成功的代码：
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<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>
{{ msg }}
</div>
{% endfor %}
然后修改删除的跳转链接：
<a href="{{ url_for('admin.tag_del', id=v.id) }}" class="label label-danger">删除</a>
然后就可以测试你的项目了！
标签的编辑
打开views.py文件，我们在标签列表的下面新增以下代码：
# 编辑标签
@admin.route('/tag/edit/<int:id>', methods=["GET", "POST"])
@admin_login_req
def tag_edit(id=None):
form = TagForm() # 实例化一个TagForm，然后将form传递到前端页面去。
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("该标签已经存在了！", "err")
return redirect(url_for("admin.tag_edit", id=id))
tag.name = data["name"]
db.session.add(tag)
db.session.commit()
flash("修改标签成功！", "ok")
return redirect(url_for("admin.tag_edit", id=id))
return render_template("admin/tag_edit.html", form=form, tag=tag)
接着在admin下面新建tag_edit.html页面，将tag_add.html页面全部添加进去，然后开始修改:将所有的添加字段改为编辑，为form.name增加属性(value=tag.name)，还要在form提交时添加action:
<form role="form" method="post" action="{{ url_for('admin.tag_edit', id=tag.id) }}">
然后在tag_list里面修改页面的跳转：
<a href="{{ url_for('admin.tag_edit', id=v.id) }}" class="label label-success">编辑</a>
以及标签的提示：
<input name="id" value="{{ tag.id }}" type="hidden">
刷新一下，我们的项目关于标签这一功能是不是都能使用了！
至此，我们关于标签的介绍就到此为止了，感谢你的赏阅！！！
本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第六篇。
网友评论