django 连接mysql三种方式（mysql的点餐系统设计--第二篇）
django 连接mysql三种方式（mysql的点餐系统设计--第二篇） 项目框架搭建好之后，在testorder/settings.py进行配置，如下: <2>参数配置 <1>创建目录 本地开发用的是pycharm，打开pycharm 点击File-->New Project-->Django创建项目，如下图 Location填写工程存放的路径和工程名，testorder就是我起的工程名。 本次工程涉及点餐系统后台、大堂点餐和会员移动端点餐，因此要搭建三个app。每个app架构相对独立，根据MTV思想都有自己的models、views、TEMPLATES、urls等，树状结构搭建如下图：
声明：本次文章是看了B站上的视频和分享的代码笔记后，自己敲了一遍代码。然后再敲一遍代码的同时写文章梳理逻辑，看不懂的同学可以去看原文章和视频。文章如有雷同，可联系我删除！视频链接：
https://www.bilibili.com/video/BV1pq4y1W7a1?spm_id_from=333.999.0.0
博客目录：
一、基于Django mysql的点餐系统设计--第一天(开篇：确认需求功能、数据库设计、程序设计)二、基于Django mysql的点餐系统设计--第二篇(搭建工程、前后端调试)Django框架搭建
一、利用pycharm创建工程搭建框架、调试
<1>创建目录
本地开发用的是pycharm，打开pycharm 点击File-->New Project-->Django创建项目，如下图 Location填写工程存放的路径和工程名，testorder就是我起的工程名。
本次工程涉及点餐系统后台、大堂点餐和会员移动端点餐，因此要搭建三个app。每个app架构相对独立，根据MTV思想都有自己的models、views、TEMPLATES、urls等，树状结构搭建如下图：
<2>参数配置
项目框架搭建好之后，在testorder/settings.py进行配置，如下:
"""
Django settings for testorder project.
Generated by 'django-admin startproject' using Django 3.2.12.
For more information on this file see
https://docs.djangoproject.com/en/3.2/topics/settings/
For the full list of settings and their values see
https://docs.djangoproject.com/en/3.2/ref/settings/
"""
import os
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-dm^9no2sbpe9=$n$w1(u7&it=28sb(h(=( xp-(m2v- 4-h^l3'
# SECURITY WARNING: don't run with DEBUG turned on in production!
DEBUG = True
# 1.配置允许访问的主机名信息
ALLOWED_HOSTS = ['*']
# Application definition
# 2.将myadmin、mobile和web的应用添加到项目框架结构中
INSTALLED_APPS = [
'django.contrib.admin'
'django.contrib.auth'
'django.contrib.contenttypes'
'django.contrib.sessions'
'django.contrib.messages'
'django.contrib.STATICfiles'
'myadmin'
'web'
'mobile'
]
middleware = [
'django.middleware.security.SecurityMiddleware'
'django.contrib.sessions.middleware.SessionMiddleware'
'django.middleware.common.CommonMiddleware'
'django.middleware.csrf.CsrfViewMiddleware'
'django.contrib.auth.middleware.AuthenticationMiddleware'
'django.contrib.messages.middleware.MessageMiddleware'
'django.middleware.clickjacking.XFrameOptionsMiddleware'
]
root_URLCONF = 'testorder.urls'
# 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'
]
}
}
]
WSGI_APPLICATION = 'testorder.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
# 4.配置项目的数据库连接信息
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql'
'NAME': 'testorder'
'USER': 'root'
'PASSWORD': 'root'
'HOST': 'localhost'
'PORT': '3306'
}
}
# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator'
}
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator'
}
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator'
}
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator'
}
]
# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/
# 5.设置时区和语言
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS Javascript Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
# 6.配置网站的静态资源目录
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR 'static')
]
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
<3>前后端调试
现在开始前后端调试，先调试下myadmin
进入testorder/urls.py下，这里的path('admin/' admin.site.urls)用不到了注释，testorder/urls.py作为根路由，编写一行跳转到myadmin.urls的代码，如下：
from django.contrib import admin
from django.urls import path include
urlpatterns = [
# path('admin/' admin.site.urls)
path('myadmin/' include('myadmin.urls')) # 路由后缀是myadmin/ 继续去myadmin.urls下寻找匹配的路由
]
进入到myadmin/urls.py下，注释path('admin/' admin.site.urls) 编写跳到后台首页的路由，如下：
from django.contrib import admin
from django.urls import path
from myadmin.views import index
urlpatterns = [
# path('admin/' admin.site.urls)
# ''表示前端页面输入"xxx/myadmin/"会跳到此处，index.index表示在myadmin/views/index.py文件下的index函数处理此处的逻辑
# name='myadmin_index'：在前端代码中通过name值也能找到此处路由
path('' index.index name='myadmin_index')
]
现在开始处理myadmin/views/index.py文件下的index函数的逻辑，如下：
from django.http import HttpResponse
def index(request):
#接收到前端的处理逻辑，返回”欢迎来到点餐系统后台！“
return HttpResponse("欢迎来到点餐系统后台！")
好了，启动工程，访问地址：127.0.0.1:8000/myadmin/ 页面成功响应，操作如下图：
现在梳理下myadmin访问的逻辑：前端页面输入127.0.0.1:8000/myadmin/后，先在testorder/urls.py文件下匹配，匹配到"myadmin/"后跳转到myadmin/urls.py文件下，在myadmin/urls.py文件下，只有path(' ' index.index name='myadmin_index')匹配，所以接着跳到myadmin/views/index.py文件下的index函数，index函数将"欢迎来到点餐系统后台！"返回给页面，至此，整个访问流程结束。
myadmin逻辑走通后 web和mobile的逻辑就好走了，两个app的访问逻辑如下：
testorder/urls.py代码编写如下：
from django.contrib import admin
from django.urls import path include
urlpatterns = [
# path('admin/' admin.site.urls)
path('myadmin/' include('myadmin.urls')) # 路由后缀是myadmin/ 继续去myadmin.urls下寻找匹配的路由
path('web/' include('web.urls')) # 跳转到web.urls下寻找匹配的路由
path('' include('mobile.urls')) # 访问路径只有域名/IP 端口 跳转到mobile.urls下寻找匹配的路由
]
web/urls.py代码编写如下：
from django.contrib import admin
from django.urls import path
from web.views import index
urlpatterns = [
# path('admin/' admin.site.urls)
# ''表示前端页面输入"xxx/web/"会跳到此处，index.index表示在web/views/index.py文件下的index函数处理此处的逻辑
# name='web_index'：在前端代码中通过name值也能找到此处路由
path('' index.index name="web_index")
]
web/views/index.py代码编写如下：
from django.http import HttpResponse
def index(request):
#接收到前端的处理逻辑，返回”欢迎来到大堂点餐！“
return HttpResponse('欢迎来到大堂点餐！')
mobile/urls.py代码编写如下：
from django.urls import path
from mobile.views import index
urlpatterns = [
# path('admin/' admin.site.urls)
# ''表示前端页面直接输入域名或IP 端口会跳到此处，index.index表示在mobile/views/index.py文件下的index函数处理此处的逻辑
# name='mobile_index'：在前端代码中通过name值也能找到此处路由
path('' index.index name="mobile_index")
]
mobile/views/index.py代码编写如下：
from django.http import HttpResponse
def index(request):
# 接收到前端的处理逻辑，返回”欢迎来到大堂点餐！“
return HttpResponse('欢迎来到手机移动端点餐页面！')
访问127.0.0.1:8000/web/，进入如下页面：
访问127.0.0.1:8000，如下：
前后端视图调试成功！，源码下载地址：https://github.com/hopeSuceess/testorder/tree/testorder_20220204_01
二、引入前端模板、调试
<1>render渲染
在templates/myadmin目录下创建base.html、info.html和/index/index.html，并在/index/index.html的body内写上"欢迎"，如下图：
更改mobile/views/index.py文件下的index函数代码，如下图：
from django.shortcuts import render
def index(request):
#接收到前端的处理逻辑，返回”欢迎来到点餐系统后台！“
return render(request 'myadmin/index/index.html') #render渲染函数，返回渲染的页面
访问127.0.0.1:8000/myadmin/，如图成功响应：
<2>模板引入
前端模板是在以下链接(https://github.com/ColorlibHQ/AdminLTE)下载引入的，现在下载解压后少了bower_components、local两个目录，这两个目录后边可以在我的源码里copy。
前端模板下载好后，将bower_components、dist、local和package.json拷贝到static/myadmin中，将index.html拖拽到pycharm中打开，将内容复制到templates/myadmin/index/index.html中，访问127.0.0.1:8000/myadmin/ 页面静态没有加载出来，如图：
报错的原因是因为前端页面没有加载到static目录下的js等样式，修改templates/myadmin/index/index.html中href、src后面的链接，将href、src链接指向static目录下正确的文件，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width initial-scale=1 maximum-scale=1 user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="/static/myadmin/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/myadmin/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/static/myadmin/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/myadmin/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="/static/myadmin/dist/css/skins/_all-skins.min.css">
<!-- Morris chart -->
<link rel="stylesheet" href="/static/myadmin/bower_components/morris.js/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="/static/myadmin/bower_components/jvectormap/jquery-jvectormap.css">
<!-- Date Picker -->
<link rel="stylesheet" href="/static/myadmin/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="/static/myadmin/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap wysiHTML5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro:300 400 600 700 300italic 400italic 600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<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">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="/static/myadmin/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="/static/myadmin/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="/static/myadmin/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="/static/myadmin/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="/static/myadmin/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<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">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<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">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<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% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Create a nice theme
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Some task I need to do
<small class="pull-right">60%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Make beautiful transitions
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="/static/myadmin/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="/static/myadmin/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<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>Alexander Pierce</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
<li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<span class="label label-primary pull-right">4</span>
</span>
</a>
<ul class="treeview-menu">
<li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
<li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
<li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
</ul>
</li>
<li>
<a href="pages/widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<span class="pull-right-container">
<small class="label pull-right bg-green">new</small>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-pie-chart"></i>
<span>Charts</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
<li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
<li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
<li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
<li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
<li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
<li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
<li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
<li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
<li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
<li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
<li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
</ul>
</li>
<li>
<a href="pages/calendar.html">
<i class="fa fa-calendar"></i> <span>Calendar</span>
<span class="pull-right-container">
<small class="label pull-right bg-red">3</small>
<small class="label pull-right bg-blue">17</small>
</span>
</a>
</li>
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<span class="pull-right-container">
<small class="label pull-right bg-yellow">12</small>
<small class="label pull-right bg-green">16</small>
<small class="label pull-right bg-red">5</small>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
<li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
<li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
<li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
<li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
<li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
<li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
<li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
<li class="treeview">
<a href="#"><i class="fa fa-circle-o"></i> Level One
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
<li class="treeview">
<a href="#"><i class="fa fa-circle-o"></i> Level Two
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
</ul>
</li>
<li><a href="https://adminlte.io/docs"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- 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>New Orders</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">More info <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">More info <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>User Registrations</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">More info <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>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
<li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
<!-- /.nav-tabs-custom -->
<!-- Chat box -->
<div class="box box-success">
<div class="box-header">
<i class="fa fa-comments-o"></i>
<h3 class="box-title">Chat</h3>
<div class="box-tools pull-right" data-toggle="tooltip" title="Status">
<div class="btn-group" data-toggle="btn-toggle">
<button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
</button>
<button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
</div>
</div>
</div>
<div class="box-body chat" id="chat-box">
<!-- chat item -->
<div class="item">
<img src="/static/myadmin/dist/img/user4-128x128.jpg" alt="user image" class="online">
<p class="message">
<a href="#" class="name">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
Mike Doe
</a>
I would like to meet you to discuss the latest news about
the arrival of the new theme. They say it is going to be one the
best themes on the market
</p>
<div class="attachment">
<h4>Attachments:</h4>
<p class="filename">
Theme-thumbnail-image.jpg
</p>
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
</div>
</div>
<!-- /.attachment -->
</div>
<!-- /.item -->
<!-- chat item -->
<div class="item">
<img src="/static/myadmin/dist/img/user3-128x128.jpg" alt="user image" class="offline">
<p class="message">
<a href="#" class="name">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
Alexander Pierce
</a>
I would like to meet you to discuss the latest news about
the arrival of the new theme. They say it is going to be one the
best themes on the market
</p>
</div>
<!-- /.item -->
<!-- chat item -->
<div class="item">
<img src="/static/myadmin/dist/img/user2-160x160.jpg" alt="user image" class="offline">
<p class="message">
<a href="#" class="name">
<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
Susan Doe
</a>
I would like to meet you to discuss the latest news about
the arrival of the new theme. They say it is going to be one the
best themes on the market
</p>
</div>
<!-- /.item -->
</div>
<!-- /.chat -->
<div class="box-footer">
<div class="input-group">
<input class="form-control" placeholder="Type message...">
<div class="input-group-btn">
<button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
<!-- /.box (chat box) -->
<!-- TO DO List -->
<div class="box box-primary">
<div class="box-header">
<i class="ion ion-clipboard"></i>
<h3 class="box-title">To Do List</h3>
<div class="box-tools pull-right">
<ul class="pagination pagination-sm inline">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- See dist/js/pages/dashboard.js to activate the todoList plugin -->
<ul class="todo-list">
<li>
<!-- drag handle -->
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<!-- checkbox -->
<input type="checkbox" value="">
<!-- todo text -->
<span class="text">Design a nice theme</span>
<!-- Emphasis label -->
<small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
<!-- General tools such as edit or delete-->
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Make the theme responsive</span>
<small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Let theme shine like a star</span>
<small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Let theme shine like a star</span>
<small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Check your messages and notifications</span>
<small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="">
<span class="text">Let theme shine like a star</span>
<small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
</ul>
</div>
<!-- /.box-body -->
<div class="box-footer clearfix no-border">
<button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
</div>
</div>
<!-- /.box -->
<!-- quick email widget -->
<div class="box box-info">
<div class="box-header">
<i class="fa fa-envelope"></i>
<h3 class="box-title">Quick Email</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
title="Remove">
<i class="fa fa-times"></i></button>
</div>
<!-- /. tools -->
</div>
<div class="box-body">
<form action="#" method="post">
<div class="form-group">
<input type="email" class="form-control" name="emailto" placeholder="Email to:">
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" placeholder="Subject">
</div>
<div>
<textarea class="textarea" placeholder="Message"
style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</form>
</div>
<div class="box-footer clearfix">
<button type="button" class="pull-right btn btn-default" id="sendEmail">Send
<i class="fa fa-arrow-circle-right"></i></button>
</div>
</div>
</section>
<!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-5 connectedSortable">
<!-- Map box -->
<div class="box box-solid bg-light-blue-gradient">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
title="Date range">
<i class="fa fa-calendar"></i></button>
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
<i class="fa fa-minus"></i></button>
</div>
<!-- /. tools -->
<i class="fa fa-map-marker"></i>
<h3 class="box-title">
Visitors
</h3>
</div>
<div class="box-body">
<div id="world-map" style="height: 250px; width: 100%;"></div>
</div>
<!-- /.box-body-->
<div class="box-footer no-border">
<div class="row">
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<div id="sparkline-1"></div>
<div class="knob-label">Visitors</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<div id="sparkline-2"></div>
<div class="knob-label">Online</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center">
<div id="sparkline-3"></div>
<div class="knob-label">Exists</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.box -->
<!-- solid sales graph -->
<div class="box box-solid bg-teal-gradient">
<div class="box-header">
<i class="fa fa-th"></i>
<h3 class="box-title">Sales Graph</h3>
<div class="box-tools pull-right">
<button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body border-radius-none">
<div class="chart" id="line-chart" style="height: 250px;"></div>
</div>
<!-- /.box-body -->
<div class="box-footer no-border">
<div class="row">
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
data-fgColor="#39CCCC">
<div class="knob-label">Mail-Orders</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
data-fgColor="#39CCCC">
<div class="knob-label">Online</div>
</div>
<!-- ./col -->
<div class="col-xs-4 text-center">
<input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
data-fgColor="#39CCCC">
<div class="knob-label">In-Store</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
</div>
<!-- /.box-footer -->
</div>
<!-- /.box -->
<!-- Calendar -->
<div class="box box-solid bg-green-gradient">
<div class="box-header">
<i class="fa fa-calendar"></i>
<h3 class="box-title">Calendar</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<!-- button with a dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Add new event</a></li>
<li><a href="#">Clear events</a></li>
<li class="divider"></li>
<li><a href="#">View calendar</a></li>
</ul>
</div>
<button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
<!-- /. tools -->
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<!--The calendar -->
<div id="calendar" style="width: 100%"></div>
</div>
<!-- /.box-body -->
<div class="box-footer text-black">
<div class="row">
<div class="col-sm-6">
<!-- Progress bars -->
<div class="clearfix">
<span class="pull-left">Task #1</span>
<small class="pull-right">90%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 90%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #2</span>
<small class="pull-right">70%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 70%;"></div>
</div>
</div>
<!-- /.col -->
<div class="col-sm-6">
<div class="clearfix">
<span class="pull-left">Task #3</span>
<small class="pull-right">60%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 60%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #4</span>
<small class="pull-right">40%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%;"></div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.box -->
</section>
<!-- right col -->
</div>
<!-- /.row (main row) -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.4.0
</div>
<strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone 1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora@example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- jQuery 3 -->
<script src="/static/myadmin/bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/static/myadmin/bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton' $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/myadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="/static/myadmin/bower_components/raphael/raphael.min.js"></script>
<script src="/static/myadmin/bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="/static/myadmin/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/static/myadmin/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/myadmin/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/static/myadmin/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/static/myadmin/bower_components/moment/min/moment.min.js"></script>
<script src="/static/myadmin/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/static/myadmin/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/static/myadmin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/static/myadmin/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/myadmin/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/myadmin/dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="/static/myadmin/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/myadmin/dist/js/demo.js"></script>
</body>
</html>
再次访问访问127.0.0.1:8000/myadmin/ ，首页加载正常，如图：
好了，还有不明白的同学可以查看源码：https://github.com/hopeSuceess/testorder/tree/testorder_20220204_02
三、前端优化
前面前端模板已经引进来了，后台首页将来会被多次渲染调用，可以将首页公共部分如headr和body的部分抽离出来，新建父模板，子模版用到的时候直接引用并且在子模板中添加自己想要的元素就可以了。
因为前端不是本次的重点，前端模板改造和文字改动就直接贴代码了。
templates/myadmin/base.html为父类模板，代码如下：
{% load static %}
<!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">张无忌</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">
/*
Modal.confirm({
msg: "确定要删除吗？"
title: ' 信息提示'
btnok: '确定'
btncl:'取消'
}).on(function (e){
if(e){
Modal.alert({msg: "成功删除" title: ' 信息提示' btnok: '确定' btncl:'取消'});
}
});
*/
</script>
</body>
</html>
templates/myadmin/index/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 %}
重新运行工程，访问127.0.0.1:8000/myadmin/ 如下图：
该部分源码链接：https://github.com/hopeSuceess/testorder/tree/testorder_20220205_02
