Flask-cms 后台模块 --项目类型(四)

功能需求介绍

1. 本次模块实现一个对前台项目类型数据的新增和编辑

2. 数据有：类型名称、缩略图

3. 实现基础功能—增删改查

创建蓝图

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

在 type/__init__.py 中：

from flask import Blueprint

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

from . import views

在 type/views.py 中：

from flask import render_template
from . import type_blue  # 导入蓝图对象
from app.utils.common import login_required  # 引入装饰器


@type_blue.route('/admin/type')
@login_required
def index():
    return render_template('admin/type/index.html')

在 app/__init__.py 中注册蓝图

# 后台项目类型蓝图
from app.admin.type import type_blue
app.register_blueprint(type_blue)

在 _sidebar.html 中写上路由地址

<li>
    <a href="/admin/type">
        <span class="am-icon-calendar"></span> 项目类型
    </a>
</li>

加载首页模板

在 templates/admin/type 创建 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">
                <div class="am-u-sm-12">
                    <div class="am-btn-toolbar">
                        <div class="">
                            <button type="button" onclick="location.href=''"
                                    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-set">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr>
                                <td>1</td>
                                <td><a href="javascript:;">商业项目</a></td>
                                <td>
                                    <img src="https://image.holyzq.com/vsIuc6EIM3DVN3EMgBOkbRffQmOnVCNHP9CUVQ0t.jpeg" alt="" class="thumb">
                                </td>
                                <td>
                                    <a href="http://www.techbimu.com/admin/types/1/edit">编辑</a>
                                    <div class="divider divider-vertical"></div>
                                    <a href="http://www.techbimu.com/admin/types/1" data-method="delete"
                                       data-token="mVTO1xskhIspfdKGM3KGpQPuSrEQqgPN6xuuZzYa"
                                       data-confirm="是否确定要删除?">删除</a>
                                </td>
                            </tr>