Flask-cms 实现后台模块 --- 所有项目(六)_jinja2 绑定点击事件

删除相册

本次功能，我们选择使用 ajax 来实现

在 templates/admin/project/edit.html 中，给删除按钮写点样式，代码如下：

{
   % block css %}
.
.
<style>
    .cancel {
   
        cursor: pointer;
    }
</style>
{
   % endblock %}
1
2
3
4
5
6
7
8
9
10
11
12

{
   % block js %}
<script>
   $(function () {
   
       $('.cancel').click(function () {
   
           if (confirm('删除后不可恢复，请慎重！')) {
   
               var id = $(this).data('id')
               var _this = $(this)
               $.ajax({
   
                   type: "DELETE",
                   url: "/admin/project/del_gallery",
                   data: JSON.stringify({
   id: id}),
                   success: function (data) {
   
                       if (data.status == 1) {
   
                           alert(data.msg)
                           _this.parents('li').remove()
                       }
                   }
               })
           }
       })
   })
</script>
{
   % endblock %}
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

后端接收数据，并执行数据库删除

from flask import render_template, request, flash, redirect, json, jsonify

# 删除相册
@project_blue.route('/admin/project/del_gallery', methods=['DELETE'])
def del_gallery():
    data = json.loads(request.get_data())
    obj = Gallery.query.filter_by(id=data['id']).first()
    db.session.delete(obj)
    db.session.commit()
    return jsonify(status=1, msg='删除成功')
1
2
3
4
5
6
7
8
9
10

时间格式化

刷新所有项目首页，你会发现创建时间显示的有点难看了，这时我们需要对时间进行格式化处理。

在 app/__init__.py 中，添加带注释的代码：

.
.
.
def create_app(config_name):
    app.config.from_object(config[config_name])

    db.init_app(app)
    Session(app)

    # 定义时间日期格式化
    @app.template_filter('strftime')
    def _jinja2_filter_datetime(date, fmt=None):
        if fmt is None:
            fmt = '%Y年%m月%d日'
        return date.strftime(fmt)
.
.
.        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后修改首页循环数据的代码：

<td>{
  { project.create_time|strftime }}</td>
1
2

如果 Windows 电脑有报错如下：

UnicodeEncodeError: 'locale' codec can't encode character '\u5e74' in position 2: encoding error
1

请修改 app/__init__.py 中的代码：

.
.
.
def create_app(config_name):
    app.config.from_object(config[config_name])

    db.init_app(app)
    Session(app)

    # 定义时间日期格式化
    @app.template_filter('strftime')
    def _jinja2_filter_datetime(date):
        return date.strftime('%Y{y}%m{m}%d{d}').format(y='年',m='月',d='日')
.
.
. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

搜索

准备搜索 form 表单

<form class="am-form am-form-horizontal">

    <div class="am-u-sm-12 am-u-md-4">
        <div class="am-form-group">
            <label for="title" class="am-u-sm-2 am-form-label">标题</label>
            <div class="am-u-sm-10">
                <input type="text" name="keyword" placeholder="请输入标题" value="">
            </div>
        </div><
1
2
3
4
5
6
7
8