(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 myobjectmyobject/├── 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,pathurlpatterns = [#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.pyfrom django.urls import pathfrom myadmin.views import indexurlpatterns = [# 后台首页path('', index.index, name="myadmin_index"),]
- 4.3 打开项目前台大堂点餐端路由文件:myobject/web/urls.py路由文件,编写路由配置信息
# myobject/web/urls.pyfrom django.urls import pathfrom web.views import indexurlpatterns = [# path('', index.index, name="index"),
]
- 4.4 打开项目移动会员端路由文件:myobject/mobile/urls.py路由文件,编写路由配置信息
# myobject/mobile/urls.pyfrom django.urls import pathfrom web.views import indexurlpatterns = [# 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 © 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> {{ info }}</h3></div></div>
{% endblock %}