django 与django simple ui的黄金组合，可以在短时间内快速开发出一套完整的admin后台管理页。但是现在越来越多的项目都开始使用前后端分离开发，如何将vue项目与django admin完美结合，根据需求实现首页以及其他页面的自定义开发？本文带你一探究竟。
一、Django admin
Django作为python web库的一哥，他能经久不衰的一个主要原因就是自带的admin管理后台，仅仅需要几行代码就可以做一个功能齐全的管理后台。
使用Django Admin可以快速对数据库的各个数据表进行增删查改。一行代码即可增加对一个模型(数据表)的增删查改。试想如果你要自己手动编写后台对一个模型进行增删查改，你一般需要4个urls, 4个视图函数或通用视图和4个模板。当一个项目比较大包含多个app时，而每个app又包含多个模型(数据表)时, 那么编写和维护整个项目管理后台的工作量可想而知。Django Admin所做就是将所有需要管理的模型(数据表)集中在一个平台，你不仅可以选择性地管理模型(数据表), 你还可以快速订制数据条目查询，过滤和搜索条件。
关于django admin配置和使用在这里就不做具体描述，推荐大家参阅大江狗的文章https://zhuanlan.zhihu.com/p/47962034
二、Django SimpleUI
1. 简介
虽然django admin实现了管理后台的功能，但是色彩搭配，样式设计只能用简陋来形容。推荐使用Django SimpleUI，他具有一套美观的ui界面，更符合国人审美和使用习惯的。
官方文档地址：https://simpleui.72wo.com/docs/simpleui/
2. 安装
- pip安装
pip install django-simpleui
- settings.py加入INSTALLED_APPS
INSTALLED_APPS = [
'simpleui', # 一定要添加到第一条
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
]
- 测试是否安装成功
使用python manage.py runserver命令启动本地测试服务器, 访问/admin/, 如果你能看到如下页面说明安装成功。 
3. 常用配置(在settings.py添加配置即可)
- 更改默认语言为中文
LANGUAGE_CODE = 'zh-hans'
- 自定义logo链接
SIMPLEUI_LOGO = 'https://oss.cuiliangblog.cn/image/logo.png'
- 修改管理后台的名称和标题
不能在settings.py里进行配置。在任何一个app的目录下新建一个admin.py, 添加如下代码即可修改。
from django.contrib import admin
admin.site.site_header = '崔亮的博客管理' # 设置header
admin.site.site_title = '博客后台管理' # 设置title
修改完成效果如下所示 
- 关闭首页右侧版本信息和使用分析
# 隐藏右侧SimpleUI广告链接和使用分析
SIMPLEUI_HOME_INFO = False
SIMPLEUI_ANALYSIS = False
- 修改APP和模型名称为中文，添加verbose_name即可
# app名称修改(blog/app.py)
from django.apps import AppConfig
class BlogConfig(AppConfig):
name = 'blog'
verbose_name = '内容管理'
# 模型名称修改(blog/models.py)
class Article(models.Model):
……
class Meta:
verbose_name = '文章内容'
verbose_name_plural = verbose_name
三、自定义首页
SimpleUI默认首页由快捷链接和最近动作组成，我们可以在settings.py中通过配置将其隐藏，并指定URL地址。接下来的操作以vue项目打包后导入django项目为了，演示如何配置使用。
1. vue前端配置
vue前端的内容主要是创建一个哈希模式的路由，并开发相关的页面，最后打包即可。提供一个本人项目使用的vue项目初始化模板，https://gitee.com/cuiliang0302/vue3_vite_element
- 创建路由(src/router/index.js)，(我这里使用的是hash模式，因History模式测试发现django无法解析。如果有人知道解决办法欢迎指出，谢谢！)
import {createRouter, createWebHashHistory} from 'vue-router';
const router = createRouter({
history: createWebHashHistory(), // hash模式，
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'Index',
component: () => import('@/views/Index.vue')
}
]
})
export default router;
- 创建vue页面（src/views/Index.vue）
<template>
<h1>这是vue首页</h1>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>
- 修改vite配置，添加项目打包路径前缀/static/dist（vite.config.js）。配置为/static/dist/的原因是打包后要将文件拷贝到/static/dist/路径下，如果使用默认的/路径，会导致静态资源从http://127.0.0.1:8000/下查找，导致404错误。
// @ts-ignore
import {resolve} from "path";
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
"@": resolve(__dirname, "src")
}
},
plugins: [
vue(),
Components({
resolvers: [
ElementPlusResolver({
importStyle: "sass",
}),
],
}),
],
base:'/static/dist/',
});
- 打包前端项目
npm run build
至此，前端操作完成，此时在项目根目录下会生成dist目录，里面是打包后的前端页面
2. django 后端
后端的内容主要是修改django simple ui，使用自定义首页，然后修改settings的static静态资源配置，然后添加一条url路由并创建相关view视图即可。
- 修改django simple ui，使用自定义首页（settings.py）。其中admin的首页以及图标可以在http://www.fontawesome.com.cn/faicons/中查找。
# 隐藏首页的快捷操作和最近动作
SIMPLEUI_HOME_QUICK = False
SIMPLEUI_HOME_ACTION = False
# 自定义admin首页
SIMPLEUI_HOME_PAGE = '/defined/#index/'
SIMPLEUI_HOME_TITLE = '系统主页'
SIMPLEUI_HOME_ICON = 'fa fa-home'
- 重写设置我们的 django 静态路径，将我们的静态文件指向我们 static 文件夹下面的 dist 文件夹(settings.py)
# 使用vue资源文件
TEMPLATES[0]['DIRS'] += (
os.path.join(BASE_DIR, 'static', 'dist'),
)
- 添加url路由（myblog_api/urls.py）。注意将url添加到项目根路由下。
from django.contrib import admin
from django.urls import path, re_path, include
from public import views, crontab
urlpatterns = [
path('admin/', admin.site.urls),
# admin管理页
path('defined/', views.Defined, name='defined'),
# 自定义admin页面
]
- 创建view视图处理函数（public/views.py）
from django.shortcuts import render
def Defined(request):
"""
admin自定义页面
"""
return render(request, 'index.html')
- 将前端打包后的dist拷贝到django项目static目录下
至此，django 后端配置完成，打开admin访问测试。如果控制台提示跨域错误记得配置django允许跨域
四、添加其他页面
django admin虽然已经将传统admin后台模型的增删改查功能全部实现了，但是有些操作还是需要添加自定义页面才能符合业务开发需求。而且django simple ui默认会显示所有模型，也需要根据需求进行隐藏操作。
1. vue前端
接下来以添加一个目录编排页为例，演示vue如何添加页面。与前面添加首页一样的步骤，创建路由和vue页面即可。
- 创建路由(src/router/index.js)
import {createRouter, createWebHashHistory} from 'vue-router';
const router = createRouter({
history: createWebHashHistory(), // hash模式，
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'Index',
component: () => import('@/views/Index.vue')
},
{
path: '/directory',
name: 'Directory',
component: () => import('@/views/Directory.vue')
}
]
})
export default router;
- 创建vue页面（src/views/Index.vue）
<template>
<h1>这是vue目录编排页</h1>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>
- 打包前端项目
npm run build
2. django后端
与上一步django添加自定义首页同样的操作，直接修改simple ui配置并拷贝前端vue打包文件即可。
- django simple ui配置（settings.py）。如果你不希望有些app在admin显示，可以自定义menu_display配置。
# 自定义菜单
SIMPLEUI_CONFIG = {
'system_keep': True,
'menu_display': ['内容管理', '用户管理', '网站管理', '行为记录', '其他工具', 'Django APScheduler'],
'menus': [
{
'name': '其他工具',
'icon': 'fas fa-wrench',
'models': [
{
'name': '目录编排',
'icon': 'fas fa-folder-open',
'url': '/home/#/directory/'
}
]
}
]
}
- 将前端打包后的dist拷贝到django项目static目录下后，无需添加路由和视图。
访问admin页面，验证自定义页面是否添加成功。
五、效果演示
1. admin首页
2. 自定义页面-目录编排
