承接博文 用前端框架Bootstrap和Django实现用户注册页面
继续开发实现 后台首页的页面。
01-下载 AdminLTE-3.1.0-rc 并解压缩
以下需要的四个文件夹及里面的文件百度网盘下载链接:
https://pan.baidu.com/s/1QYpjOfSBJPmjmVuFZdSgFQ?pwd=o9ta
下载 AdminLTE-3.1.0-rc 并解压缩 把文件夹 other 和 pages 复制到 “E:\Python_project\P_001\myshop-test\mall_backend\templates”
把文件夹 dist 和 文件夹 plugins 复制到
“E:\Python_project\P_001\myshop-test\mall_backend\static”
02-新建模板文件base.html并写入代码
在”E:\Python_project\P_001\myshop-test\mall_backend\templates\shop”下新建模板文件base.html,并写入代码。
代码如下:
<!DOCTYPE html>{% load static %}<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>{{title}}</title><link rel="stylesheet" href="{% static 'plugins/google-fonts/google.fonts.css' %}"><link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">{% block ext_js %}{% endblock%}</body></html>
04-新建模板文件 index.html 并写入代码
在”E:\Python_project\P_001\myshop-test\mall_backend\templates\shop”下新建模板文件base.html,并写入代码。
{% extends 'shop/base.html'%}{% load static %} {% block ext_css %}{% endblock %}{% block content%}<div class="content-wrapper"><div class="content-header"><div class="container-fluid"><div class="row mb-2"><div class="col-sm-6"><h1 class="m-0">商城信息</h1><div class="col-sm-6"></div></div></div></div><section class="content"><div class="container-fluid"><div class="row"><div class="col-lg-4 col-6"><div class="small-box bg-info"><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="fas fa-arrow-circle-right"></i></a></div></div><div class="col-lg-4 col-6"><div class="small-box bg-success"><div class="inner"><h3>53</h3><p>会员</p></div><div class="icon"><i class="ion ion-stats-bars"></i></div><a href="#" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a></div></div><div class="col-lg-4 col-6"><div class="small-box bg-warning"><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="fas fa-arrow-circle-right"></i></a></div></div></div><div class="row"><section class="col-lg-7 connectedSortable"><div class="card"><div class="card-header"><h3 class="card-title"><i class="fas fa-chart-pie mr-1"></i>Sales</h3><div class="card-tools"><ul class="nav nav-pills ml-auto"><li class="nav-item"><a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a></li><li class="nav-item"><a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a></li></ul></div></div><<div class="card-body"><div class="tab-content p-0"><div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"><canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas> </div><div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"><canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas></div></div></div></div></section><section class="col-lg-5 connectedSortable"><div class="card bg-gradient-info"><div class="card-header border-0"><h3 class="card-title"><i class="fas fa-th mr-1"></i>Sales Graph</h3><div class="card-tools"><button type="button" class="btn bg-info btn-sm" data-card-widget="collapse"><i class="fas fa-minus"></i></button><button type="button" class="btn bg-info btn-sm" data-card-widget="remove"><i class="fas fa-times"></i></button></div></div><div class="card-body"><canvas class="chart" id="line-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas></div></div></section></div></div></section></div>{%endblock%}
05-配置视图处由view.py
视图处理文件”E:\Python_project\P_001\myshop-test\mall_backend\users\views.py”里写入下面的代码:
def index(request):return render(request,'shop/index.html')
06-配置URL请求路径
URL请求路径文件
“E:\Python_project\P_001\myshop-test\mall_backend\mall_backend\urls.py”
里写入下面的代码:
urlpatterns = [path('user_reg/', views.user_reg),path('index/', views.index),]
07-启动数据库
07-运行应用
CD E:\Python_project\P_001\myshop-test\mall_backendE:python manage.py runserver 127.0.0.1:8010
08-访问URL路径
http://127.0.0.1:8010/index/
09-附整个工程的源代码
https://pan.baidu.com/s/1wIsJybQk6l_nV7iYfoib1g?pwd=j5qs