基于Django+mysql的点餐系统设计--第二篇(搭建工程、前后端调试)
toyiye 2024-09-16 06:10 3 浏览 0 评论
声明：本次文章是看了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
相关推荐
- 为何越来越多的编程语言使用JSON（为什么编程）
-
JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON（数据库用json格式存储）
-
在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...
- MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）
-
前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶（json格式对象）
-
一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data（json和formdata提交区别）
-
在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...
- JSON 语法（json 语法 priority）
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解（json的语法规则）
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...
- MySQL JSON数据类型操作（mysql的json）
-
概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...
- JSON的数据模式（json数据格式示例）
-
像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解（后端json格式）
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势（什么叫json）
-
现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类（javascript 包）
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?（json和xml哪个好）
-
JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)