django-vue-admin测试环境搭建

引言

django-vue-admin框架，大幅度降低应用层代码难度,让每一个刚开始学习 django和vue的新手都能快速上手。这将会是你上手学习 django+vue的最佳代码。

开发工具

后端开发：pycharm
前端开发：webstorm
数据库：mysql
前端编译：nodejs
其他

入门demo示例

https://django-vue-admin.com/guide/getting-started
一定要按照这个步骤一点不差的去写，先把demo运行起来再去实现自己的想法。

踩过的坑

数据库字符集

mysql数据库要用最新的版本，新建数据库要选utf8mb4

创建数据表

在app的目录下要有migrations目录及__init__.py文件，否则在执行python manage.py init时，不会创建数据表。

python manage.py init

前端路由

前端的app views下面，这两个地方的路由保持一致。

自定义app

定义自己的基础数据

init_dictionary.json

[
    {
        "label": "产品类型",
        "value": "product_type",
        "parent": null,
        "type": 0,
        "color": null,
        "is_value": false,
        "status": true,
        "sort": 8,
        "remark": null,
        "children": [
            {
                "label": "可库存产品",
                "value": "0",
                "parent": 46,
                "type": 1,
                "color": null,
                "is_value": true,
                "status": true,
                "sort": 0,
                "remark": null,
                "children": []
            },
            {
                "label": "服务类产品",
                "value": "1",
                "parent": 46,
                "type": 1,
                "color": null,
                "is_value": true,
                "status": true,
                "sort": 1,
                "remark": null,
                "children": []
            },
            {
                "label": "可消耗产品",
                "value": "2",
                "parent": 46,
                "type": 1,
                "color": null,
                "is_value": true,
                "status": true,
                "sort": 2,
                "remark": null,
                "children": []
            }
        ]
    }
]

init_menu.json

[
    {
        "name": "测试demo",
        "icon": "iconfont icon-xitongshezhi",
        "sort": 20,
        "is_link": false,
        "is_catalog": true,
        "web_path": "/jcerpDemo",
        "component": "",
        "component_name": "",
        "status": true,
        "cache": false,
        "visible": true,
        "parent": null,
        "children": [
            {
                "name": "商品列表",
                "icon": "ele-OfficeBuilding",
                "sort": 3,
                "is_link": false,
                "is_catalog": false,
                "web_path": "/jcerpDemo/ProductViewSet",
                "component": "jcerp_demo/ProductViewSet/index",
                "component_name": "ProductViewSet",
                "status": true,
                "cache": false,
                "visible": true,
                "parent": 1,
                "children": [],
                "menu_button": [
                     {
                        "name": "新增",
                        "value": "ProductViewSet:Create",
                        "api": "/api/ProductViewSet",
                        "method": 1
                    },
                    {
                        "name": "编辑",
                        "value": "ProductViewSet:Update",
                        "api": "/api/ProductViewSet/{id}/",
                        "method": 2
                    },
                    {
                        "name": "删除",
                        "value": "ProductViewSet:Delete",
                        "api": "/api/ProductViewSet/{id}/",
                        "method": 3
                    },
                    {
                        "name": "查询",
                        "value": "ProductViewSet:Search",
                        "api": "/api/ProductViewSet",
                        "method": 0
                    },
                    {
                        "name": "查看",
                        "value": "ProductViewSet:Retrieve",
                        "api": "/api/ProductViewSet/{id}/",
                        "method": 0
                    },
                    {
                        "name": "导出",
                        "value": "ProductViewSet:Export",
                        "api": "/api/ProductViewSet/export_data/",
                        "method": 1
                    },
                    {
                        "name": "导入",
                        "value": "ProductViewSet:Import",
                        "api": "/api/ProductViewSet/import_data/",
                        "method": 1
                    },
                    {
                        "name": "复制",
                        "value": "ProductViewSet:Copy",
                        "api": "/api/ProductViewSet",
                        "method": 1
                    }
                ],
                "menu_field": []
            }
        ],
        "menu_button": [],
        "menu_field": []
    }
]

initialize.py

# 初始化
import os

import django


os.environ.setdefault("DJANGO_SETTINGS_MODULE", "application.settings")
django.setup()

from dvadmin.utils.core_initialize import CoreInitialize
from dvadmin.system.fixtures.initSerializer import (
    UsersInitSerializer, DeptInitSerializer, RoleInitSerializer,
    MenuInitSerializer, ApiWhiteListInitSerializer, DictionaryInitSerializer,
    SystemConfigInitSerializer, RoleMenuInitSerializer, RoleMenuButtonInitSerializer
)


class Initialize(CoreInitialize):

    def init_menu(self):
        """
        初始化菜单信息
        """
        self.init_base(MenuInitSerializer, unique_fields=['name', 'web_path', 'component', 'component_name'])

    def init_dictionary(self):
        """
        初始化字典表
        """
        self.init_base(DictionaryInitSerializer, unique_fields=['value', 'parent', ])

    def run(self):
        self.init_menu()
        self.init_dictionary()


if __name__ == "__main__":
    Initialize(app='jcerp_demo').run()

再执行命令 python manage.py init初始化

效果展示