基于Django框架的项目搭建后台首页

(1). 创建数据库 `osdb`

进入MySQL数据库中，创建一个数据库名为：osdb

通过数据表结构来创建数据表：

-- 员工信息表
CREATE TABLE `user` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '员工账号id',
  `username` varchar(50) DEFAULT NULL COMMENT '员工账号',
  `nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
  `password_hash` varchar(100) DEFAULT NULL COMMENT '密码',
  `password_salt` varchar(50) DEFAULT NULL COMMENT '密码干扰值',
  `status` tinyint(3) unsigned NOT NULL DEFAULT '1' COMMENT '状态:1正常/2禁用/9删除',
  `create_at` datetime DEFAULT NULL COMMENT '创建时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

-- 店铺信息表
CREATE TABLE `shop` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '店铺id',
  `name` varchar(255) NOT NULL COMMENT '店铺名称',
  `cover_pic` varchar(255) DEFAULT NULL COMMENT '封面图片',
  `banner_pic` varchar(255) DEFAULT NULL COMMENT '图标Logo',
  `address` varchar(255) DEFAULT NULL COMMENT '店铺地址',
  `phone` varchar(255) DEFAULT NULL COMMENT '联系电话',
  `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '状态：1:正常 2:暂停 9:删除',
  `create_at` datetime DEFAULT NULL COMMENT '添加时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- 菜品类别表
CREATE TABLE `category` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '菜品分类id',
  `shop_id` int(11) DEFAULT NULL COMMENT '店铺id',
  `name` varchar(50) DEFAULT NULL COMMENT '分类名称',
  `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '状态：1正常 9删除',
  `create_at` datetime DEFAULT NULL COMMENT '添加时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

-- 菜品信息表
CREATE TABLE `product` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '菜品id',
  `shop_id` int(11) DEFAULT NULL COMMENT '店铺id',
  `category_id` int(11) DEFAULT NULL COMMENT '菜品分类id',
  `cover_pic` varchar(50) DEFAULT NULL COMMENT '菜品图片',
  `name` varchar(50) DEFAULT NULL COMMENT '菜品名称',
  `price` double(6,2) DEFAULT NULL COMMENT '单价',
  `status` tinyint(4) DEFAULT NULL COMMENT '状态：1:正常  2:停售  9:删除',
  `create_at` datetime DEFAULT NULL COMMENT '添加时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8;

-- 会员信息表
CREATE TABLE `member` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '会员表id',
  `nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像',
  `mobile` varchar(50) DEFAULT NULL COMMENT '电话',
  `status` tinyint(3) unsigned NOT NULL DEFAULT '1' COMMENT '状态:1正常/2禁用/9删除',
  `create_at` datetime DEFAULT NULL COMMENT '添加时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- 订单信息表
CREATE TABLE `orders` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '订单表id',
  `shop_id` int(10) unsigned DEFAULT NULL COMMENT '店铺id号',
  `member_id` int(10) unsigned DEFAULT NULL COMMENT '会员id',
  `user_id` int(10) unsigned DEFAULT NULL COMMENT '操作员id',
  `money` double(8,2) DEFAULT NULL COMMENT '金额',
  `status` tinyint(3) unsigned DEFAULT NULL COMMENT '订单状态:1过行中/2无效/3已完成',
  `payment_status` tinyint(3) unsigned DEFAULT NULL COMMENT '支付状态:1未支付/2已支付/3已退款',
  `create_at` datetime DEFAULT NULL COMMENT '添加时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

-- 订单信息详情表
CREATE TABLE `order_detail` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '订单详情id',
  `order_id` int(10) unsigned DEFAULT NULL COMMENT '订单id',
  `product_id` int(10) unsigned DEFAULT NULL COMMENT '菜品id',
  `product_name` varchar(50) DEFAULT NULL COMMENT '菜品名称',
  `price` double(6,2) unsigned DEFAULT NULL COMMENT '单价',
  `quantity` int(10) unsigned NOT NULL DEFAULT '1' COMMENT '数量',
  `status` tinyint(3) unsigned NOT NULL DEFAULT '1' COMMENT '状态:1正常/9删除',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 CHECKSUM=1 DELAY_KEY_WRITE=1 ROW_FORMAT=DYNAMIC COMMENT='订单详情信息表';

-- 支付信息表
CREATE TABLE `payment` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '支付表id',
  `order_id` int(10) unsigned DEFAULT NULL COMMENT '订单id',
  `member_id` int(10) unsigned DEFAULT NULL COMMENT '会员id',
  `money` double(8,2) unsigned DEFAULT NULL COMMENT '支付金额',
  `type` tinyint(3) unsigned DEFAULT NULL COMMENT '付款方式：1会员付款/2收银收款',
  `bank` tinyint(3) unsigned DEFAULT NULL COMMENT '收款银行渠道:1微信/2余额/3现金/4支付宝',
  `status` tinyint(3) unsigned DEFAULT NULL COMMENT '支付状态:1未支付/2已支付/3已退款',
  `create_at` datetime DEFAULT NULL COMMENT '添加时间',
  `update_at` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;


CREATE TABLE `django_session` (
  `session_key` varchar(40) NOT NULL,
  `session_data` longtext NOT NULL,
  `expire_date` datetime(6) NOT NULL,
  PRIMARY KEY (`session_key`),
  KEY `django_session_expire_date_a5c62663` (`expire_date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


-- 在user上表中添加一条后台管理员账户数据
insert  into `user`(`id`,`username`,`nickname`,`password_hash`,`password_salt`,`status`,`create_at`,`update_at`) values (1,'zhangsan','张三','1e191d851b3b49a248f4ea62f6b06410','123456',1,'2018-08-08 18:18:18','2018-09-07 08:06:55');

(2). 创建项目 `myobject` 框架和应用 `myamdin`、`web`和`mobile`。

    # 创建项目框架 `myobject`
    $ django-admin startproject myobject

    $ cd myobject

    # 在项目中创建一个myadmin应用(项目的后台管理)
    $ python manage.py startapp myadmin

    # 在项目中再创建一个web应用(项目前台大堂点餐应用)
    $ python manage.py startapp web

    # 在项目中再创建一个mobile应用(移动客户点餐端应用)
    $ python manage.py startapp mobile

    # 创建模板目录
    $ mkdir templates
    $ mkdir templates/myadmin
    $ mkdir templates/web
    $ mkdir templates/mobile

    # 创建静态资源目录
    $ mkdir static
    $ mkdir static/myadmin
    $ mkdir static/web
    $ mkdir static/mobile
    $ mkdir static/uploads

    # 创建前后台应用模板目录,并在里面各创建一个`__init__.py`和`index.py`的空文件
    $ mkdir myadmin/views
    $ touch myadmin/views/__init__.py
    $ touch myadmin/views/index.py
    $ mkdir web/views
    $ touch web/views/__init__.py
    $ touch web/views/index.py
    $ mkdir mobile/views
    $ touch mobile/views/__init__.py
    $ touch mobile/views/index.py

    # 删除前后台应用的默认模板文件
    # rm -rf myadmin/views.py
    # rm -rf web/views.py
    # rm -rf mobile/views.py

    # 拷贝路由文件到应用目录中
    $ cp myobject/urls.py   myadmin/urls.py
    $ cp myobject/urls.py   web/urls.py
    $ cp myobject/urls.py   mobile/urls.py

    # 退出项目目录
    $ cd ..

    #查看项目目录结构
    $ tree myobject

    myobject/
        ├── manage.py
        ├── myobject
        │   ├── __init__.py
        │   ├── settings.py
        │   ├── urls.py
        │   └── wsgi.py
        ├── myadmin
        │   ├── admin.py
        │   ├── apps.py
        │   ├── __init__.py
        │   ├── migrations
        │   │   └── __init__.py
        │   ├── views
        │   │   ├── __init__.py
        │   │   └── index.py
        │   ├── models.py
        │   ├── tests.py
        │   └── urls.py
        ├── web
        │   ├── admin.py
        │   ├── apps.py
        │   ├── __init__.py
        │   ├── migrations
        │   │   ├── __init__.py
        │   ├── views
        │   │   ├── __init__.py
        │   │   └── index.py
        │   ├── models.py
        │   ├── tests.py
        │   └── urls.py
        ├── mobile
        │   ├── admin.py
        │   ├── apps.py
        │   ├── __init__.py
        │   ├── migrations
        │   │   ├── __init__.py
        │   ├── views
        │   │   ├── __init__.py
        │   │   └── index.py
        │   ├── models.py
        │   ├── tests.py
        │   └── urls.py
        ├── static
        │   ├── myadmin/
        │   ├── web/
        │   ├── mobile/
        │   └── uploads/
        └── templates
            ├── myadmin/
            ├── web/
            └── mobile/

(3). 项目框架配置

注意：此配置需要安装mysql数据库mysqlclient软件包，如：$ pip install mysqlclient

3.2 编辑myobject/myobject/settings.py文件:

# myobject/myobject/settings.py  项目配置文件

# 1. 配置允许访问的主机名信息
ALLOWED_HOSTS = ['*']
或
ALLOWED_HOSTS = ['localhost','127.0.0.1','192.168.2.240']

...

# 2. 将myadmin和web的应用添加到项目框架结构中
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myadmin',
    'web',
    'mobile',
]

...

# 3. 配置模板目录 os.path.join(BASE_DIR,'templates')
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

...

# 4. 配置项目的数据库连接信息：
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'osdb',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

...

# 5. 设置时区和语言 
LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

...

# 6. 配置网站的静态资源目录
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

(4). 项目urls路由信息配置

4.1 打开根路由文件：myobject/myobject/urls.py路由文件，编写路由配置信息

# myobject/myobject/urls.py

#from django.contrib import admin
from django.urls import include,path

urlpatterns = [
    #path('admin/', admin.site.urls),
    path('', include("web.urls")),                # 默认前台大堂点餐端
    path('myadmin/', include("myadmin.urls")),     # 后台管理端
    path('mobile/', include("mobile.urls")),    # 移动会员端
]

4.2 打开项目后台管理路由文件：myobject/myadmin/urls.py路由文件，编写路由配置信息

# myobject/myadmin/urls.py

from django.urls import path

from myadmin.views import index

urlpatterns = [
    # 后台首页
    path('', index.index, name="myadmin_index"),

]

4.3 打开项目前台大堂点餐端路由文件：myobject/web/urls.py路由文件，编写路由配置信息

# myobject/web/urls.py

from django.urls import path

from web.views import index

urlpatterns = [
   # path('', index.index, name="index"),
]

4.4 打开项目移动会员端路由文件：myobject/mobile/urls.py路由文件，编写路由配置信息

# myobject/mobile/urls.py

from django.urls import path

from web.views import index

urlpatterns = [
   # path('', index.index, name="index"),
]

(5). 编写后台视图测试

5.1 编辑后台、前台和移动端的视图文件

# myobject/myadmin/views/index.py
from django.shortcuts import render
from django.http import HttpResponse

#后台首页
def index(request):
    return HttpResponse('欢迎进入点餐系统网站后台管理！')

# myobject/web/views/index.py
from django.shortcuts import render
from django.http import HttpResponse

#前台首页
def index(request):
    return HttpResponse('欢迎进入大堂点餐前台首页！')

# myobject/mobile/views/index.py
from django.shortcuts import render
from django.http import HttpResponse

#移动端首页
def index(request):
    return HttpResponse('欢迎进入移动会员端首页！')

5.2 运行测试
在项目根目录下启动服务，并使用浏览器访问测试：http://localhost:8000/myadmin

[root@localhost myobject]# pwd
/python/myobject
[root@localhost myobject]# ls
manage.py  myadmin  myobject  web  mobile  static  templates
[root@localhost myobject]# python manage.py runserver 0.0.0.0:8000
Performing system checks...

System check identified no issues (0 silenced).

April 06, 2020 - 14:29:36
Django version 1.11, using settings 'myobject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
^C[root@localhost myobject]#

(6). 摆放后台首页面：

6.1. 使用事先准备好的后台模板：
- 从github上下载一个后台简洁模板：https://github.com/ColorlibHQ/AdminLTE
- 将后台模板目录中的资源目录：bower_components、dist、local、package.json复制到项目的后台静态资源目录static/myadmin/中
- 在templates/myadmin/目录中创建一个基类父模板文件base.html
- 在templates/myadmin/index/目录中创建一个首页模板文件index.html
- 在templates/myadmin/目录中创建一个信息提示模板文件info.html
- 修改myobject/myadmin/views/index.py视图文件中index函数中代码：
```
def index(request):
  '''管理后台首页'''
  return render(request,"myadmin/index/index.html")
```
6.2. 编辑父类模板：/templates/myadmin/base.html

{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>订餐系统后台管理</title>
  <!-- 支持响应式布局 -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="{% static 'myadmin/bower_components/bootstrap/dist/css/bootstrap.min.css'%}">
  <!-- 象形字体 -->
  <link rel="stylesheet" href="{% static 'myadmin/bower_components/font-awesome/css/font-awesome.min.css'%}">
  <!-- 图标 -->
  <link rel="stylesheet" href="{% static 'myadmin/bower_components/Ionicons/css/ionicons.min.css'%}">
  <!-- 主题风格样式 -->
  <link rel="stylesheet" href="{% static 'myadmin/dist/css/AdminLTE.min.css'%}">
  <!-- AdminLTE 皮肤.这里选择的是skin-blue样式，我们还可以有其他皮肤可以选择. -->
  <link rel="stylesheet" href="{% static 'myadmin/dist/css/skins/skin-blue.min.css'%}">
  <!-- 兼容IE9以下浏览器 -->
  <!--[if lt IE 9]>
  <script src="{% static 'myadmin/local/js/html5shiv.min.js'%}"></script>
  <script src="{% static 'myadmin/local/js/respond.min.js'%}"></script>
  <![endif]-->
  <!-- Google Font -->
  <link rel="stylesheet" href="{% static 'myadmin/local/css/google_fonts.css'%}">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header 主体页头 -->
  <header class="main-header">

    <!-- Logo -->
    <a href="index2.html" class="logo">
      <!-- 侧栏迷你徽标 mini 50x50 pixels -->
      <span class="logo-mini"><b>餐</b></span>
      <!-- 常规状态标志和移动设备标志 -->
      <span class="logo-lg"><b>订餐系统后台管理</b></span>
    </a>

    <!-- Header Navbar 首部导航栏 -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button 侧边栏切换按钮 -->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">切换导航</span>
      </a>
      <!-- 右栏菜单 -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- messages-menu 消息菜单: 样式可以在 dropdown.less 中找到 -->
          <li class="dropdown messages-menu">
            <!-- Menu toggle button 菜单切换按钮 -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-envelope-o"></i>
              <span class="label label-success">4</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">你有4个短信息</li>
              <li>
                <!-- 内部菜单：包含消息 -->
                <ul class="menu">
                  <li><!-- start message 信息开始 -->
                    <a href="#">
                      <div class="pull-left">
                        <!-- User Image 使用图片 -->
                        <img src="{% static 'myadmin/dist/img/user2-160x160.jpg'%}" class="img-circle" alt="User Image">
                      </div>
                      <!-- 消息标题和时间 -->
                      <h4>
                        我们都支持团队
                        <small><i class="fa fa-clock-o"></i> 5 分钟</small>
                      </h4>
                      <!-- The message -->
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <!-- end message -->
                </ul>
                <!-- /.menu -->
              </li>
              <li class="footer"><a href="#">查看所有信息</a></li>
            </ul>
          </li>
          <!-- /.messages-menu -->

          <!-- Notifications Menu 通知菜单 -->
          <li class="dropdown notifications-menu">
            <!-- Menu toggle button  菜单切换按钮 -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o"></i>
              <span class="label label-warning">10</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">你有10条通知信息</li>
              <li>
                <!-- Inner Menu: contains the notifications -->
                <ul class="menu">
                  <li><!-- start notification -->
                    <a href="#">
                      <i class="fa fa-users text-aqua"></i> 今天有5名新成员加入
                    </a>
                  </li>
                  <!-- end notification -->
                </ul>
              </li>
              <li class="footer"><a href="#">查看全部</a></li>
            </ul>
          </li>
          <!-- Tasks Menu 任务菜单 -->
          <li class="dropdown tasks-menu">
            <!-- Menu Toggle Button 菜单切换按钮 -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-flag-o"></i>
              <span class="label label-danger">9</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">你有9个任务</li>
              <li>
                <!-- Inner menu: contains the tasks -->
                <ul class="menu">
                  <li><!-- Task item -->
                    <a href="#">
                      <!-- Task title and progress text -->
                      <h3>
                        设计一些按钮
                        <small class="pull-right">20%</small>
                      </h3>
                      <!-- The progress bar -->
                      <div class="progress xs">
                        <!-- Change the css width attribute to simulate progress -->
                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">20% 完成</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                </ul>
              </li>
              <li class="footer">
                <a href="#">查看所有任务</a>
              </li>
            </ul>
          </li>
          <!-- User Account Menu -->
          <li class="dropdown user user-menu">
            <!-- Menu Toggle Button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <!-- The user image in the navbar-->
              <img src="{% static 'myadmin/dist/img/user2-160x160.jpg'%}" class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="hidden-xs">{{request.session.adminuser.nickname}}</span>
            </a>
            <ul class="dropdown-menu">
              <!-- The user image in the menu -->
              <li class="user-header">
                <img src="{% static 'myadmin/dist/img/user2-160x160.jpg'%}" class="img-circle" alt="User Image">

                <p>
                  张无忌 - 管理员
                  <small>2020年07月16日加入</small>
                </p>
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">个人信息</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">退 出</a>
                </div>
              </li>
            </ul>
          </li>

        </ul>
      </div>
    </nav>
  </header>

  <!-- 左侧柱。包含徽标和边栏 -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar user panel (optional) -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="{% static 'myadmin/dist/img/user2-160x160.jpg'%}" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>张无忌 . 管理员</p>
          <!-- Status -->
          <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">主要导航</li>
        <!-- 导航列表，你可以自行更改图标 -->
        <li class="active"><a href="admin.html"><i class="fa fa-home"></i> <span>首页</span></a></li>

        <li><a href="member.html"><i class="fa fa-users"></i> <span>会员管理</span></a></li>
        <li><a href="shop.html"><i class="fa fa-sitemap"></i> <span>店铺管理</span></a></li>
        <li class="treeview">
          <a href="category.html"><i class="fa fa-cutlery"></i> <span>菜品管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="category.html"> <i class="fa fa-circle-o"></i> 菜品分类</a></li>
            <li><a href="product.html"> <i class="fa fa-circle-o"></i> 菜品信息</a></li>
          </ul>
        </li>
        <li><a href="orders.html"><i class="fa fa-shopping-cart"></i> <span>订单管理</span></a></li>
        <li><a href="#"><i class="fa fa-user"></i> <span>账号管理</span></a></li>
        <li><a href="#"><i class="fa fa-key"></i> <span>权限管理</span></a></li>
        <li><a href="#"><i class="fa fa-gear"></i> <span>系统配置</span></a></li>
        <li><a href="#"><i class="fa fa-unlock-alt"></i> <span>认证体系</span></a></li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    {% block main_body %}
    {% endblock %}
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      <!--餐饮管理平台-->
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2020 <a href="#">北京*******有限公司</a>.</strong> 版权所有
  </footer>

  <!-- 添加侧栏的背景。必须放置此处紧接在控制侧边栏之后 -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- edu-model提示框模板 -->
<div id="edu-alert" class="modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
      </div>
      <div class="modal-body small">
        <p>[Message]</p>
      </div>
      <div class="modal-footer" >
        <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
        <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
      </div>
    </div>
  </div>
</div>
<!-- edu-model-end -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{% static 'myadmin/bower_components/jquery/dist/jquery.min.js'%}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'myadmin/bower_components/bootstrap/dist/js/bootstrap.min.js'%}"></script>
<!-- AdminLTE App -->
<script src="{% static 'myadmin/dist/js/adminlte.min.js'%}"></script>

<script src="{% static 'myadmin/dist/js/edu-modal-alert-confirm.js'%}"></script>

<!-- 此处可以添加SimLoopl和FastClick插件，用于增强用户体验。 -->

<script type="text/javascript">
  //自定义一个用于实现Ajax信息删除的函数
  function doDelete(del_url){
    Modal.confirm({
      msg: "确定要删除吗？",
      title: ' 信息提示',
      btnok: '确定',
      btncl:'取消'
    }).on(function (e){
      if(e){ //判断是否点击了确定按钮
        $.ajax({
          type:'get',
          url:del_url,
          dataType:'json',
          async: false,
          success:function(res){
            Modal.alert({msg:res.info, title:' 信息提示',btnok: '确定',btncl:'取消'});
            window.location.reload(); //刷新当前页面.
          },
        });
      }
    });
  }
</script>
{% block loadjavascript %}
<!-- 此处可加载独立的javascript程序 -->
{% endblock %}
</body>
</html>

6.3. 编辑后台首页模板：/templates/myadmin/index.html

{% extends 'myadmin/base.html' %}

{% block main_body %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        首页
        <small>订餐系统后台管理</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
      <!-- Small boxes (Stat box) -->
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>150</h3>

              <p>新订单</p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-green">
            <div class="inner">
              <h3>53<sup style="font-size: 20px">%</sup></h3>

              <p>Bounce Rate</p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>44</h3>

              <p>用户注册</p>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
              <h3>65</h3>

              <p>Unique Visitors</p>
            </div>
            <div class="icon">
              <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
      </div>

    </section>
    <!-- /.content -->
{% endblock %}

6.4. 后台公共提示信息模板：/templates/myadmin/info.html

{% extends "myadmin/base.html" %}

{% block main_body %}                
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h4>
        信息提示:
      </h4>
    </section>

    <div class="pad margin no-print">
      <div class="callout callout-info" style="margin-bottom: 0!important;padding-left: 50px">
        <h3><i class="fa fa-exclamation-triangle"></i>  &nbsp; {{ info }}</h3>
      </div>
    </div>
{% endblock %}