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


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

查看更多

微信公众号

微信公众号同步更新，欢迎关注微信公众号第一时间获取最近文章。

博客网站

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