言

为了丰富 Naive Admin 生态，近期我们一直在精雕细琢，日夜奋战，终于又迎来了Arco Vue Pro 正式发布上线！

Arco Design 介绍

ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统，在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，开源了 ArcoDesign 设计系统，旨在让社区听见更多的声音，为更多中小型企业及个人设计师和开发者提效，创造更多高效美观的“最佳实践”。

产品概要

Naive Admin Arco 是一个基于 Vue3.0、Vite、 Arco Vue、TypeScript 中后台解决方案。

特点

Naive Admin Arco 企业级中后台前端框架，使用最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目

响应式、多主题，多配置，快速集成，开箱即用

最新技术栈，使用 Vue 3、Typescript、Pinia、Vite 等前端前沿技术

强大的鉴权系统，对路由、菜单、功能点等支持 3 种鉴权模式，满足不同的业务鉴权需求

持续更新，实用性页面模板功能和交互，随意搭配组合，让构建页面变得简单化

功能

• 一键锁屏
• 支持内嵌页面
• 黑暗模式一键切换
• 支持多级路由嵌套
• 基于Vue3、Vite、TypeScript构建
• 路由菜单智能生成，只需创建路由文件即可
• 页面切换动画：渐变 / 闪现 / 滚动 / 消退 / 底部消失 / 底部消退
• 含有大量典型的业务示例，持续更新中，之后可免费升级获取

布局

• 登录 / 注册
• 固定顶栏（可开关）
• 固定主体（可开关）
• 页面重新刷新（可开关）
• 面包屑导航（可开关）
• 面包屑图标（可开关）
• 页面动画（可开关）
• 导航栏模式：左侧菜单 / 顶部菜单 / 顶部菜单混合
• 导航栏风格：暗色侧边栏 / 白色侧边栏 / 暗色顶栏
• 更多布局可在线体验（右上角菜单项可动态预览各种配置）

鉴权

• 路由级别鉴权
• 侧边栏菜单鉴权
• 功能块鉴权
• 功能点鉴权
• 鉴权指令

组件

• Qrcode二维码（自定义LOGO，大小，样式，下载二维码）
• 富文本（增加文本，增加图片，获取html，渲染HTML内容）
• BasicModal弹窗（美化弹窗，可拖拽移动，确认按钮可定制）
• BasicForm表单（只需配置一个FormSchema数组，即可生成一个完整表单）
• Cropper图片裁剪（可裁剪圆形，方形，适用于头像上传，商品图片上传，前端裁剪）
• BasicUpload图片上传（帮助文本，大小限制，内置图片预览，上传图片统一标准封装）
• BasicTable表格（自动分页，编辑单元格/行，自适应高度，操作列深度封装，列设置，密度设置，列顺序可拖动）
• Region地区组件（省市区选择，数据动态加载方式，只需配置好相应接口即可，此组件灵活在于，可单独选择省，或者，省，市
• Password密码强度（内置多种校验规则，长度，复杂度，强度等级，文案全部可自定义，给系统设置一个相对安全的密码，就用他准没错）
• BasicSelect选择器（扩展选择器组件，用于各种表单选择器，简化使用，内置缓存，可对相同的数据减少http请求，也可手动刷新数据源）

页面

• 主控台
• 监控台
• 工作台
• 用户管理
• 个人设置
• 系统设置
• 修改密码
• 菜单权限管理
• 角色权限管理
• 查询列表（表格组件示例）
• 更多页面可在线查看

项目展示

更多页面、功能，组件，请直接在线预览查看

在线预览

AdminPro

在线文档

Naive Admin NaiveUi 生态最优秀的中后台框架，全面的系统配置，优质模板，常用组件，真正一站式开箱即用

天给大家分享一个Vue3.0框架搭建的后台管理模板Vue3.xAdmin。

vue3.x-admin 使用vue3开发的后台管理系统。主要包括CSS3特效、可拖拽的div、图表、益智小游戏、vuex4.x 存储用户信息等功能。

技术栈

Vue3.x + vue-router4.x + vuex4.x + Less + Echarts

目录结构

快速安装

通过如下步骤快速本地构建项目。

# 克隆项目
git clone https://github.com/Tyf2345/vue3.x-admin.git

# 进入目录
cd vue-admin-ele

# 安装依赖包
yarn install

# 本地调试
yarn serve

结构非常简单的一款后台模板，需要快速上手vue3的不可错过。

# 预览地址
http://114.215.147.221:8086/login

# 仓库地址
https://github.com/tyf2345/vue3.x-admin

好了，就分享到这里。感谢各位的阅读！

jango自带的admin系统

Django最强大的部分之一是自动生成的Admin界面。它读取模型数据来提供一个强大的、生产环境就绪的界面，使内容提供者能立即用它向站点中添加内容。

它可以快速的开发出一个后台管理界面，但是界面整体看起来一般般，之前为了学习练手，也是为了更美观，都是自己手写后台管理系统，这次是因为一些活需要快速开发，就直接使用了自带的后台管理系统，顺便也整理一部分。

如何开启admin系统

1）确保在settings.py中的INSTALLED_APPS安装了

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',

]

2）在模板上下文中添加以下依赖。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                ...
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

3）在中间件中添加以下依赖。

MIDDLEWARE = [
    ...
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',

]

4）迁移数据

python manage.py makemigrations  # 创建数据库迁移文件
python manage.py migrate  # 根据数据库迁移文件生成对应SQL语句并执行

5）创建超级管理员账户，创建的用户是保存在auth_user表中。

python manage.py createsuperuser

6）运行程序，登陆django自带admin后台管理系统

python manage.py runserver 0.0.0.0:8080

7）在浏览器上输入地址：http://127.0.0.1:8080/admin

8）admin 界面默认是英文，如需要修改成中文，修改settings.py中的属性。

LANGUAGE_CODE = 'zh-Hans'

现在后台管理里面只显示默认的2个模型，那要将我们定义的模型也显示在后台管理里面，应该怎么样呢？

这就需要我们自定义admin，把需要管理的模型添加到admin中。

自定义admin样式

1）首先要在INSTALLED_APPS中添加对应的应用。

INSTALLED_APPS = [
    ...
    'decoration',
]

2）在应用app的admin.py中注册。

@admin.register(MaterialCategory)
class MaterialCategoryAdmin(admin.ModelAdmin):
    pass

3）刷新，可以看到有显示了，但是上面app显示的还是英文。

4）修改app显示名称，所有跟app相关的内容配置，可以实现一个Appconfig类的子类来完成，django一般会默认在apps.py中建立一个。

class DecorationConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'decoration'
    verbose_name = '装修选材'  # 显示中文

1、修改展示的列表项，即模型中其他字段内容，可以在admin.py中用 list_display修改展示的列表项。

@admin.register(Material)
class MaterialAdmin(admin.ModelAdmin):
    list_display = ['id', 'category', 'name', 'brand', 'specs', 'price', 'remarks']

注意：list_display不支持多对多的，需要再进行处理，例如：

# 模型
materials = models.ManyToManyField('Material', verbose_name='包含材料')

# 注册
@admin.register(ComboPlatter)
class ComboPlatterAdmin(admin.ModelAdmin):
    list_display = ['id', 'materials','total_price', 'remarks']

我们可以通过自定义个方法，来处理这个多对多字段：

@admin.register(ComboPlatter)
class ComboPlatterAdmin(admin.ModelAdmin):
    list_display = ['id', 'name', 'total_price', 'material_list', 'remarks']

    empty_value_display = "--"

    # 自定义list_display
    # list_display选项不能用于显示多对多的字段(如materials)。
    # 如果需要通过list_display选项显示多对多的字段或模型中原本不存在的字段或方法，我们需要新增自定义的list_play方法。
    def material_list(self, obj):
        return [material.name for material in obj.materials.all()] # 获取材料图片所有对象，然后再迭代获取对应名称组成列表

    material_list.short_description = '可选材料'

当然上面自定义方法不局限于多对多，有些特殊的也可以自定义，比如要显示什么颜色。

例如，当销量大于0时，红色显示，默认是直接显示字段：

list_display = ['id', 'name', 'total_price', 'material_list', 'remarks', 'sale_nums']

我们可以重新定义方法：

list_display = ['id', 'name', 'total_price', 'material_list', 'remarks', 'sale_nums_display_color']

def sale_nums_display_color(self, obj):
    if obj.sale_nums > 0:
        color_code = 'red'

    else:
        color_code = '#000'        
    return format_html(
                '<span style="color:{}">{}</span>', color_code, obj.sale_nums
            )

sale_nums_display_color.short_description = '套餐销量'

类似的，如果我们想要显示图片的HTML:

        return format_html(
                '<img src={} style="width:50px;height:50px;">', obj.avatar
            )

2、可以根据设置项进行过滤。

    # 设置过滤选项
    list_filter = ['category'] 

注意：过滤器如果是外键需要遵循这样的语法：

    # 设置过滤选项
    # 过滤器如果是外键需要遵循这样的语法：本表外键字段__主表要显示的字段。如：“category__id”
    # 多个是 &&的关系
    list_filter = ['category__id', 'category']  # 也可以直接外键字段，默认就是模型的__str__输出值

3、每页显示记录数。

    # 每页显示条目数
    list_per_page = 4

4、搜索

    # 搜索字段
    search_fields =['name']

search_fields，在使用admin 系统中的搜索时可能会出现“related Field has invalid lookup: icontains”错误，主要原因是外键查询是需要指定相应的字段的。外键不应该只是一个model，而该是另一个表的明确的一个字段。所以我们需要指定特定的字段"本表外键字段__主表需查询字段"。

例如上面category是一个外键，如果我们设置：

    # 搜索字段
    search_fields =['category']

修改为即可：

    # 搜索字段
    search_fields =['category__name']

5、django默认给字段为空的，显示-，

我们可以修改默认显示样式：

empty_value_display = "--"

6、对于一多，有时候我们2个单独编辑，非常麻烦

先需要添加完【材料】才能添加【材料图片】，非常麻烦，我们可以再增加【材料】同时添加【材料图片】：

# @admin.register(MaterialImg)
# class MaterialImgAdmin(admin.ModelAdmin):
class MaterialImgInline(admin.TabularInline):
    model = MaterialImg  # 关联模型

    list_display = ['id', 'material','img']


@admin.register(Material)
class MaterialAdmin(admin.ModelAdmin):
    # 设置列表可显示的字段
    list_display = ['id', 'category', 'name', 'brand', 'specs', 'price', 'remarks']

    # 设置过滤选项
    list_filter = ['category'] 

    # 每页显示条目数
    list_per_page = 10

    # 搜索字段
    search_fields =['category__name']

    inlines = [MaterialImgInline]

点击添加或者编辑，可以看到已经嵌入到材料一起了：

7、默认可以点击每条记录第一个字段的值可以进入编辑界面。我们可以设置其他字段也可以点击链接进入编辑界面，例如我们点击名称进入界面。

#设置哪些字段可以点击进入编辑界面
list_display_links = ['id', 'name']  # 注意，默认的也要包含进去，否则会冲掉

8、调整页面头部显示内容和页面标题

admin.site.site_header = '装修管理系统'
admin.site.site_title = '装修管理系统'

9、如何将一个应用下的模型显示到另外个应用app下呢？可以在model类中通过app_label指定应用：

class OrderInfo(models.Model):
    ...

    class Meta:
        db_table = 't_order_info'
        verbose_name = '订单'
        verbose_name_plural = verbose_name
        app_label = 'user'   # 使用app_label指定需要显示到的应用下

10、 有时候，我们需要为应用定义一些自定义的页面，提供一些admin site+ORM无法直接提供的功能，比如根据数据统计，汇总展示每天的销售整体处理情况，然后需要在admin site页面中对应的app 模块下加入跳转链接。下面分两步记录一下实现步骤。

首先，自定义Django template页面，编写一个简单的模板文件：

{% extends "admin/base_site.html" %}
{% load static %}


{% block content %}
    <div>
        <label><h2>数据统计</h2> </label>
        </br>
        <table class="table" table-layout="fixed" width="600px">
            <thead>
                <tr>                    
                    <th> 日期 </th>
                     <th> 销售总额 </th>
                </tr>
            </thead>
            <tbody>
                {% for order in order_queryset %}
                    <tr>
                        <td>{{ order.day }}</td>
                        <td>{{ order.total_amount }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <br/>
        <table class="table" table-layout="fixed" width="600px">
            <thead>
                <tr>                    
                    <th> 材料名称 </th>
                     <th> 销售总额 </th>
                </tr>
            </thead>
            <tbody>
                {% for good in goods_queryset %}
                    <tr>
                        <td>{{ good.material__name }}</td>
                        <td>{{ good.price }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

在views.py文件中，渲染模板：

from django.db import connection
from django.db.models import Sum

def data_static(request):
    if request.method == 'GET':
        # 按天分类
        select = {'day': connection.ops.date_trunc_sql('day', 'create_time')}
        # values在annotate之后表示select， 在annotate之前表示group by
        order_queryset = OrderInfo.objects.extra(select=select).values('day').annotate(total_amount=Sum('total_amount'))
        print(order_queryset)

        # 按照分类进行统计
        goods_queryset = OrderGoods.objects.values('material__name').annotate(price=Sum('price'))
        print(goods_queryset)

        return render(request, 'static.html', context={'goods_queryset': goods_queryset, 'order_queryset': order_queryset})

配置路由：

urlpatterns = [
    ....
    path('admin/user/datastat/', data_static),

]

先直接在页面上上如，查看效果：

到这里，我们已经实现了自定义统计页面的功能。

那怎么样将这个链接添加到admin下呢？

要在admin site中添加一个自定义的跳转链接，首先考虑要如何才能在对应的app下添加一个新的跳转链接，

最常见的情况显然就是在其下增加一个对数据库进行映射的model，以及对应的modeladmin。

那我们可以按照这个方式来试下，首先定义模型。

由于对应的数据表model其实只是提供了一个生成admin site下跳转链接的功能，其实际并没有被访问过，所以并不需要为其定义任何实际字段，构造一个空的model即可：

class DataStat(models.Model):
    class Meta:
        # db_table = 't_order_goods'
        verbose_name = '数据统计'
        verbose_name_plural = verbose_name
        app_label = 'user'   # 强行使其在user应用下

在admin.py中进行注册，并重写负责默认页面渲染行为的changelist_view函数实现了对自定义页面的渲染:

from decoration.models import DataStat
from decoration.views import data_static

@admin.register(DataStat)
class DataStatAdmin(admin.ModelAdmin):
    def changelist_view(self, request, extra_content=None):
        return data_static(request)

添加如上代码后，admin site页面如下：

11、Django admin默认的action只有删除(delete)。

那如果我们需要实现其他功能，比如将勾选的订单状态修改。

那我们需要自定义action。

 # action即动作，是你对一个选定查询集(queryset)要进行的操作。当你选定一个查询集(queryset)后，
 # 你可以点击action下拉菜单选择action，然后点击Go对其进行批量操作(如下所示)。Django admin默认的action只有删除(delete)。

    '''自定义actions'''
    actions = ['order_stauts_change']
    def order_stauts_change(self, request, queryset):
        # 将状态和人置空
        queryset.update(order_status=3)

    order_stauts_change.short_description = "所选订单状态修改为待收货"

12、有时候，我们想在数据保存时进行一些额外的操作（通过重写ModelAdmin的save_model实现）,

例如，之前做的点餐系统，当收拾完桌子的时候，将预定人也清空。

    #将桌释放的时候，前面对应使用人为空
    def save_model(self, request, obj, form, change):

        if change: # 更改的时候
            if obj.table_statue == '0':
                # 将使用人为空
                obj.table_user = None


                super(TableAdmin, self).save_model(request, obj, form, change)

                self.food_list(obj)
        else:
            super(TableAdmin, self).save_model(request, obj, form, change)

还有一些其他的操作，可以根据具体业务进行挖掘开发。

django admin集成富文本编辑器

1）安装：

pip install django-ckeditor

# 如果要在富文本里添加图片还需要
pip install pillow

2）注册：

INSTALLED_APPS = [
    ...
    'ckeditor',
    'ckeditor_uploader', # 图片
]

3）如果要处理图片，还需要在settings.py里面添加如下设置:

# 前面两个可能已经设置了，是存放用户上传文件的地方
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CKEDITOR_UPLOAD_PATH = 'img/cases/'

CKEDITOR_CONFIGS = {    # 添加个性化的配置
    'default': {
        'image_previewText':' ',    # 替换图片显示区域那一串搞不懂的字符串
        'tabSpaces': 4,
    }
}

4）另外还需要添加一个路由用于上传请求，在项目的urls.py：

from django.conf.urls.static import static

from django.conf import settings

urlpatterns = [
    ...
    path('ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

5）模型里面对应的字段设置。

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

    #description = models.TextField(verbose_name='案例详细介绍')
    #description = RichTextField(verbose_name='案例详细介绍') # 不带图片
    description = RichTextUploadingField(verbose_name='案例详细介绍') # 带有上传图片功能的富文本编辑

6）重新迁移。

但是有些问题，

1）显示的是繁体中文：

检查后发现原因在于CKEditor会使用settings.py文件中的语言设置。
而我们settings.py中设置的LANGUAGE_CODE = 'zh-hans'简体中文，这是因为Django2以上文件夹中没有zh-cn文件夹，简体中文是zh_Hans文件夹

直接设置LANGUAGE_CODE = ‘zh-cn’会导致异常。但是这样设置又会导致ckeditor找不到名为zh-Hans.js的语言文件，当找不到文件时，CKEditor会找到第一个名称包含zh的js文件去调用。而zh.js中是繁体字。

解决方案：

将ckeditor语言文件名称，将zh.js字典内容替换成了zh-cn.js中的简体内容。

ckeditor语言文件所在路径：env_decoration\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\lang

2）因为我们在富文本里面编辑内容，在数据库中插入的是带html代码的样式。

如果直接获取不处理的话，就会显示类似这种：

原因分析：
在文章详情页没有看到预期的效果，而是类似于一堆乱码一样的HTML 标签，这些标签本应该在浏览器显示它本身的格式，但是 Django 出于安全方面的考虑，任何的HTML 代码在 Django 的模板中都会被转义（即显示原始的 HTML 代码，而不是经浏览器渲染后的格式）。

所以我们需要在显示的时候处理下，使其正常显示。

解决：
方案1：为了解除转义，只需在模板标签使用 safe 过滤器即可，告诉 Django，这段文本是安全的，你什么也不用做。

对于如果传递给其他前端的，比如小程序，则有相对应的处理方式。

更多学习笔记整理于微信公号【Python野路子】