Flask-cms 实现后台模块 --- 所有项目(五)

功能需求介绍

本次模块实现对前台所有项目的新增、编辑、删除、分页、搜索

数据字段有：名称、缩略图、所属类型、所属区域、规模、业主单位、服务范围、项目描述、创建时间

首页：所有项目数据加载，按名称模糊搜索、分页、批量删除(ajax实现)

新增和编辑：上传图片(单图)、富文本编辑器(tinymce)、上传图片(多图)

所有上传全部使用七牛

创建蓝图

在 admin 文件夹中创建 project 文件夹(包)，并在该文件夹中创建 views.py 文件。

在 project/__init__.py 中，创建蓝图对象：

from flask import Blueprint

project_blue = Blueprint('project_blue', __name__)  # 创建蓝图对象

from . import views
1
2
3
4
5

在 project/views.py 中，添加加载首页的路由和方法：

from flask import render_template
from . import project_blue
from app.utils.common import login_required


# 项目列表
@project_blue.route('/admin/project')
@login_required
def index():
    return render_template('admin/project/index.html')
1
2
3
4
5
6
7
8
9
10

在 app/__init__.py 中注册蓝图

# 后台所有项目蓝图
from app.admin.project import project_blue
app.register_blueprint(project_blue)
1
2
3

在 _sidebar.html 中写上路由地址

<li>
    <a href="/admin/project" class="{
    { _project or '' }}">
        <span class="am-icon-joomla"></span> 所有项目
    </a>
</li>
1
2
3
4
5
6

首页模板

在 templates/project 文件夹中添加首页模板 index.html，里面添加如下代码：

{% extends "admin/common/app.html" %}

{% block content %}
    <div class="admin-content-body">
        <div class="page-header">
            <ol class="am-breadcrumb am-breadcrumb-slash">
                <li><a href="/admin">首页</a></li>
                <li>项目列表</li>
            </ol>
        </div>

        <div class="page-body">
            <div class="am-g">
                <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>
                    </div>

                    <div class="am-u-sm-12 am-u-md-8">
                        <div class="am-form-group search-buttons">
                            <button class="am-btn am-btn-primary" type="submit">查 询</button>
                            <button class="am-btn am-btn-default" type="button" onclick="location.href='/admin/project'">重 置</button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="am-g">
                <div class="am-u-sm-12">
                    <div class="am-btn-toolbar">
                        <div class="">
                            <button type="button" onclick="location.href='/admin/project/create'" class="am-btn am-btn-primary"><span class="am-icon-plus"></span>
                                新增
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="am-g am-g-collapse">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-hover table-main">
                            <thead>
                            <tr>
                                <th class="table-id">ID</th>
                                <th class="table-title">名称</th>
                                <th class="table-type">缩略图</th>
                                <th class="table-type">所属类型</th>
                                <th class="table-type">所属区域</th>
                                <th class="table-type">规模</th>
                                <th class="table-type">业主单位</th>
                                <th class="table-type">服务范围</th>
                                <th class="table-type">创建时间</th>
                                <th class="table-set">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>22</td>
                                <td><a href="javascript:;">中海苏州思安街超高层</a></td>
                                <td>
                                    <img src="https://image.holyzq.com/O80w7Tni45EDO4QjterKK2UuwzE9UIFddw8ovoV5.jpeg" alt="" class="thumb">
                                </td>
                                <td class="am-hide-sm-only">办公项目</td>
                                <td class="am-hide-sm-only">苏州</td>
                                <td>15万方</td>
                                <td>中海地产苏州公司</td>
                                <td>项目整体BIM深化</td>
                                <td>2020年09月08日</td>
                                <td>
                                    <a href="http://www.techbimu.com/admin/projects/22/edit">编辑</a>
                                    <div class="divider divider-vertical"></div>
                                    <a href="http://www.techbimu.com/admin/projects/22" data-method="delete"
                                       data-token="S4uPYyfcB8Idn3D314x5hYt8DrsaHA1oKRN6v4dx"
                                       data-confirm="是否确定要删除?">删除</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="am-cf">
                            共 21 条记录
                            <div class="am-fr">
                                <ul class="pagination">
                                    <li class="page-item disabled" aria-disabled="true" aria-label="« 上一页">
                                        <span class="page-link" aria-hidden="true">‹</span>
                                    </li>
                                    <li class="page-item active" aria-current="page"><span class="page-link">1</span>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="http://www.techbimu.com/admin/projects?page=2">2</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="http://www.techbimu.com/admin/projects?page=3">3</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="http://www.techbimu.com/admin/projects?page=2" rel="next" aria-label="下一页 »">›</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
            
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