Django SimpleUI与vue的完美结合

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

classBlogConfig(AppConfig):
    name ='blog'
    verbose_name ='内容管理'# 模型名称修改(blog/models.py)classArticle(models.Model):
    ……

    classMeta:
        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

defDefined(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. 自定义页面-目录编排

查看更多

崔亮的博客-专注devops自动化运维，传播优秀it运维技术文章。更多原创运维开发相关文章，欢迎访问https://www.cuiliangblog.cn