前言
昨晚我梦见到了阴曹地府，被抓去写了管理后台.....
这是前端时间在网上看到的段子,页面内容大概长下面这样
视频封面.png
本文将会使用Django快速实现这个demo
- 环境准备
- 搭建框架
- 使用django-adminlte3
- 管理页面实现
- 文档内容引用
环境准备
- python 3.6+
- django 3+
- django-adminlte3
框架搭建
执行下面命令创建项目
django-admin startproject background
执行上面命令后，会出现下面的目录树
2.创建项目.png
用下面命令尝试将项目运行起来
python manage.py runserver 0.0.0.0:8000
出现下图情况就说明项目能够正常运行
3.创建项目试运行.png
使用django-adminlte3
第三方库地址：https://pypi.org/project/django-adminlte-3/
执行下面命令安装第三方库
pip install django-adminlte3
按文档要求在background.settings.py中的INSTALLED_APPS添加adminlte3、adminlte3_theme应用，注意这两个应用要在所有应用的上面
INSTALLED_APPS = [
"adminlte3",
"adminlte3_theme",
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
下载base template demo, 仓库地址（如地址失效，阅读官方文档）:https://github.com/d-demirci/django-adminlte3.git
将demo的adminlte3\static、adminlte3\templates 两个目录拷贝至项目下，这里面其实有些文件是用不上的，如果不是很懂，可以直接拷贝，防止依赖缺失,此时项目树如下：
4.第一次拷贝.png
上面步骤完成后，先测试拷贝第三方库的情况，templates\adminlte\index.html,看看页面是否能够正常访问
在settings.py 的TEMPLATES配置中DIRS加入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',
],
},
},
]
新建background\views.py文件，输入下面内容
from django.shortcuts import render
def test_index(request):
return render(request, "adminlte\index.html")
在background的 urls.py文件导入上面的函数，如下：
from django.contrib import admin
from django.urls import path
from background.views import test_index
urlpatterns = [
path('admin/', admin.site.urls),
path('', test_index),
]
完成上面三个步骤后，在浏览器输入地址：http://127.0.0.1:8000/ 尝试访问
5.试运行.png
界面还是人家的demo设定的样子，下面会对界面进行小的调整
管理页面实现
在上面步骤中，已经将安装第三方库，且已经复制到了demo中的静态文件，现在将页面改成需要的样式
创建bg应用
输入下面命令创建bg应用
django-admin startapp bg
在bg应用里面新建templates文件夹和urls.py文件
将bg应用添加到settings.py的INSTALLED_APPS变量中
INSTALLED_APPS = [
"adminlte3",
"adminlte3_theme",
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bg'
]
清除页面中不需要的入口
在settings设置默认静态文件搜索路径
STATICFILES_DIRS = [
BASE_DIR / "static"
]
替换网站名称以及logo
static/image/ 下放置自己的网站logo图片 logo.jpg
将templates\adminlte_main_sidebar.html 下的block logo 内容替换成下面内容
{% block logo %}
<a href="/" class="brand-link">
<img src="{%static 'image/logo.jpg' %}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
{% block logo_text %}<span class="brand-text font-weight-light">地府管理系统</span>{% endblock %}
</a>
{% endblock %}
注释掉templates\adminlte_main_header.html 不需要的头部入口
修改首页的内容展示
前端部分
需要将templates\adminlte_main_sidebar.html 的nav_links块替换成下面内容
{% block nav_links %}
{% for b_model, pages in menuInfo.items %}
{% if active == b_model %}
<li class="nav-item has-tree-view ">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-object-group"></i> <p>{{ b_model }}</p>
<p><i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview menu-open" style="display: block">
{% for page in pages %}
{% if active_page == page.name %}
<li>
<a href="{{ page.url }}" class="nav-link active">
<i class="nav-icon fas fa-circle"></i> {{ page.name }}
</a>
</li>
{% else %}
<li>
<a href="{{ page.url }}" class="nav-link">
<i class="nav-icon fas fa-circle"></i> {{ page.name }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li class="nav-item has-tree-view " style="height: auto">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-object-group"></i> <p>{{ b_model }}</p>
<p><i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav-treeview" style="display: none">
{% for page in pages %}
<li class="nav-item">
<a href="{{ page.url }}" class="nav-link">
<i class="nav-icon fas fa-circle"></i> {{ page.name }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
{% endblock nav_links %}
新建 bg/templates/index.html,输入下面内容
{% extends 'adminlte/base.html' %}
{% load static %}
{% block content %}
<div>
<h2 style="text-align: center">修改后的主页</h2>
<h2 style="text-align: center">微信搜索"python小dem0"公众号，获取更多的demo</h2>
<div style="text-align: center;padding: auto;">
<p>微信公众号二维码</p>
<img src="{% static 'image/gzh.jpg' %}">
</div>
</div>
{% endblock %}
在static/image 新加gzh.jpg、logo.jpg 两张图片
后端部分
新建 bg/config/menu.py 文件, 输入下面内容
register_model = dict(
live_or_die="生死簿",
hell="十八层地狱",
hell_money="冥币管理"
)
register_page = dict(
live_or_die=dict(
people_page="用户管理",
dispose_page="用户处理",
reincarnation_page="投胎记录",
),
hell=dict(
explain_page="十八层地狱说明",
punish_page="处罚流程",
),
hell_money=dict(
money_page="冥币管理",
money_pay="冥币薪资流水",
)
)
register_menu = ["live_or_die", "hell", "hell_money"]
新建 bg/helper/menu_helper.py 文件，输入下面内容
from bg.config.menu import register_page, register_model, register_menu
def get_menu_info():
"""
获取后台菜单
"""
menu = {}
for page_model in register_menu:
menu[register_model[page_model]] = []
for page, page_name in register_page[page_model].items():
menu[register_model[page_model]].append(dict(
url=f"/bg/{page}/",
name=page_name
))
return menu
新建 bg/views/index_views.py(原应用views.py文件删除,新建views文件夹),输入下面内容
from django.shortcuts import render
from bg.helper.bg_page_helper import PageHelper
import logging
log = logging.getLogger()
def index(request):
context = PageHelper(request)
return render(request, 'index.html', context=context)
新建 bg/urls.py， 输入下面内容
from django.urls import path
import bg.views.index_views as index
app_name = "bg"
urlpatterns = []
# 首页
urlpatterns += [
path('', index.index)
]
修改background/urls.py 内容
from django.contrib import admin
from django.urls import path, include
from background.views import test_index
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('bg.urls')),
]
在上述操作完成后，重新刷新http://127.0.0.1:8000/地址，大概能获取下面的示例
新主页.png
但侧边栏显示的地址依旧无法访问,此处会实现 生死簿/用户管理、冥币管理/冥币管理 两个页面作为示例
adminlte3 用法可以参考：https://3vshej.cn/AdminLTE/AdminLTE-3.x
比如我想在页面上建一个表格，只需要在网站上找到自己想要的样式表格，通过检查元素方式看人家实现的样式就可以了（class 样式特别重要），如下：
7.示例图片（图7.七）.png
在生死簿/用户管理 页面建一张表格
前端部分
增加bg/templates/live_or_die/user_management.html，写入以下内容
{% extends 'adminlte/base.html' %}
{% load static %}
{% block content %}
<div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">死亡用户列表</h3>
<div class="card-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control float-right" placeholder="搜索">
<div class="input-group-append">
<button type="submit" class="btn btn-default">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-head-fixed text-nowrap">
<thead>
<tr>
{% for h in headers %}
<th>{{ h }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for data in data_list %}
<tr>
{% for td_data in data %}
<td>{{ td_data }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
后端部分
新建基类，新建bg/views/base_views.py， 写入下面内容
from django.shortcuts import render
from django.views import View
from bg.helper.bg_page_helper import PageHelper
import logging
log = logging.getLogger()
class BaseView(View):
title = ""
b_model = "" # 隶属的管理模块
headers = []
page = "" # 页面
def search(self, page_helper: PageHelper):
pass
def get(self, request, *args, **kwargs):
page_helper = PageHelper(request)
page_helper["active_page"] = self.title
page_helper["active"] = self.b_model
page_helper["headers"] = self.headers
page_helper["data_list"] = []
self.search(page_helper)
return render(request, self.page, context=page_helper)
def post(self, request, *args, **kwargs):
page_helper = PageHelper(request)
page_helper["active_page"] = self.title
page_helper["active"] = self.b_model
page_helper["headers"] = self.headers
page_helper["data_list"] = []
self.search(page_helper)
return render(request, self.page, context=page_helper)
生死簿视图, 新建 bg/views/live_or_die_views.py，写入下面内容
from bg.config.menu import register_model, register_page
from bg.helper.bg_page_helper import PageHelper
from bg.views.base_views import BaseView
b_model = register_model["live_or_die"]
class UserManagement(BaseView):
title = "用户管理"
headers = ["死亡时间", "死者名字", "性别", "死亡原因"]
b_model = b_model
page = "live_or_die/user_management.html"
def search(self, page_helper: PageHelper):
"""
随便返回几条数据
"""
page_helper["data_list"] = [
["2022-07-08", "安倍晋三", "男", "死于正义之士枪杀"],
["2022-07-06", "张三", "男", "自然死亡"],
["2022-07-05", "李四", "男", "自然死亡"],
["2022-07-06", "张三2", "男", "自然死亡"],
["2022-07-05", "李四2", "男", "自然死亡"],
["2022-07-06", "张三3", "男", "自然死亡"],
["2022-07-05", "李四4", "男", "自然死亡"],
]
增加访问路由，bg/urls.py 增加下面代码
import bg.views.live_or_die_views as ld
# 生死簿
urlpatterns += [
path('bg/people_page/', ld.UserManagement.as_view())
]
完成上面步骤，点击左侧菜单 生死簿/用户管理 应该能获取到下图效果
8.用户管理页面(图八).png
在 冥币管理/冥币管理 页面增加表单
前端部分
增加 bg/templates/hall_money/hell_money.html, 输入以下内容
{% extends 'adminlte/base.html' %}
{% load static %}
{% block content %}
<div>
<form method="post" action="{% url 'bg:dispose_hall_money' %}">
{% csrf_token %}
<div class="card-body">
<div class="form-group">
<label for="exampleInputEmail1">名字</label>
<input type="text" class="form-control" id="name" name="name" placeholder="输入名字">
</div>
<div class="form-group">
<label for="exampleInputPassword1">加冥币</label>
<input type="number" class="form-control" id="money" name="money" placeholder="请输入冥币数量">
</div>
<div class="form-group">
<label for="exampleInputEmail1">备注</label>
<input type="text" class="form-control" id="remark" name="remark" placeholder="备注">
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
{% endblock %}
后端部分
新建bg/views/hell_money_views.py， 写入下面内容
from django.contrib import messages
from django.shortcuts import render
from bg.config.menu import register_model
from bg.helper.bg_page_helper import PageHelper
from bg.views.base_views import BaseView
b_model = register_model["hell_money"]
class HallMoney(BaseView):
title = "冥币管理"
b_model = b_model
page = "hell_money/hell_money.html"
def dispose_hall_money(request):
name = request.POST.get("name")
money = request.POST.get("name", 0)
remark = request.POST.get("remark")
messages.info(request, f"{name} 因 {remark} 奖励 {money} 冥币 ！！！！")
return render(request, "hell_money/hell_money.html", context=PageHelper(request))
增加访问路由，bg/urls.py 增加下面代码
import bg.views.hell_money_views as hm
# 冥币管理
urlpatterns += [
path('bg/money_page/', hm.HallMoney.as_view()),
path('bg/hall_money/', hm.dispose_hall_money, name="dispose_hall_money"),
]
完成上面步骤后，点击 冥币管理/冥币管理 应该能获取到下图效果
9.冥币管理页面(图九).png
文档内容引用
- adminLte3 内容用法参考：https://3vshej.cn/AdminLTE/AdminLTE-3.x/
- django-adminlte 官网：https://pypi.org/project/django-adminlte-3/
- django-adminlte demo 仓库地址：https://github.com/d-demirci/django-adminlte3.git
- 本范文demo仓库地址: https://github.com/YangJunJ/background.git
