后台管理系统(springboot+vue3+mysql)

系列文章目录

1.SpringBoot整合RabbitMQ并实现消息发送与接收
2. 解析JSON格式参数 & 修改对象的key
3. VUE整合Echarts实现简单的数据可视化
4. List＜HashMap＜String,String＞＞实现自定义字符串排序（key排序、Value排序）
5. 使用JAVA代码实现生成二维码

更多文章可看我主页哦~

文章目录

系列文章目录
前言
一、项目介绍
二、低代码配置
- 2.1 部分代码展示
- - 2.1.1后端代码生成接口主要内容代码
- 2.2 效果图
- - 2.2.1 后端代码生成
  - 2.2.2 前端代码生成
三、页面效果图展示
- 3.1 管理端效果图
- - 3.1.1 登录页
  - 3.1.2 首页
  - 3.1.3 用户管理
  - 3.1.4 公告管理
- 3.2 代码下载
- 3.3 联系我
总结

前言

    在我们做项目时，都会用到后台管理系统。使得管理员可以通过该平台来维护前台的数据，查看一些数据的趋势等。所以开发后台管理系统基本是每个项目必备的一环，但大多数都是重复的增删改查操作。而且模版都长得差不多，怎么可以快速开发一个后台管理系统呢？这里我推荐大家使用开源的项目vue-element-admin在这个基础上去开发特定需求的效果。这样可以节省大量不必要的时间。
    但因为这个框架是企业级的开源框架【vue3+ts+element-plus】，对于一些正在学习的同学来说理解起来可能会很难理解。涉及到了很多的封装，导致目录结构看起来比较复杂。这里我将该框架简单的进行了调整，设计了一套专门为这个目录结构生成的实体类的增删改查以及前端的代码自动生成功能。只需要在低代码平台上输入实体类以及对应字段的信息，就可以生成对应目录下的代码文件，只需用户将前后端代码导入到项目中，重启项目即可实现。
     如果大家想挑战一下自己，推荐大家点击Gitee链接下载源码进行开发哦…

一、项目介绍

还是使用的springboot+vue3+ts+mysql的框架结构（可使用element组件）,后端java代码我看vue-element-admin的太过于专业。所以我这里自己写了一套后端java模版代码。完成了对于验证码的获取、用户登录、用户、公告管理以及前后端代码自动生成的接口。

二、低代码配置

用户通过平台配置实体类、表字段名称、类型信息，即可生成对应代码。

2.1 部分代码展示

2.1.1后端代码生成接口主要内容代码

生成后端文件的主要内容的代码展示：

 @Value("${backend.Path}")
    private String basePath;

    /**
     * 自动生成后端代码
     * 1. 创建com.xintai.study包名
     * 2. 创建各个包下文件以及包,包括（controller、service、impl、mapper、entity等...）
     * @param jsonObject
     */
    @Override
    public void automaticBackendCode(JSONObject jsonObject) {

        String PACKAGE_NAME = jsonObject.getString("packageName");
        //1.创建包名：从com层到service里的impl
        createFolderStructure(PACKAGE_NAME,basePath);
        String newPath = PACKAGE_NAME.replace(".", "/");
        String suffixType = ".java";//生成文件的类型

        JSONArray DATAS = jsonObject.getJSONArray("datas");
        for (int i = 0; i < DATAS.size(); i++) {
            JSONObject data = DATAS.getJSONObject(i);
            //类名
            String ENTITY_NAME = data.getString("entityName");
            //实体类备注(中文)
            String ENTITYNAME_CN= data.getString("entityName_cn");
            //实体类的字段
            JSONArray ENTITY_FIELDS = data.getJSONArray("entity");
//        log.error(ENTITY_FIELDS.get(0).toString());

            //2.创建各个文件
            // 2.1 创建entity下的实体类
            String e_str = entityStrFun(PACKAGE_NAME,ENTITY_NAME,ENTITY_FIELDS,ENTITYNAME_CN);
            createFileAndWriteStr(basePath+"/"+newPath+"/entity/",ENTITY_NAME,e_str,suffixType);

            // 2.2 创建XXXMapper文件
            String m_str = mapperStrFun(PACKAGE_NAME,ENTITY_NAME);
            createFileAndWriteStr(basePath+"/"+newPath+"/mapper/",ENTITY_NAME+"Mapper",m_str,suffixType);

            // 2.3 创建IXXXXService接口
            String s_str = IServiceStrFun(PACKAGE_NAME,ENTITY_NAME);
            createFileAndWriteStr(basePath+"/"+newPath+"/service/","I"+ENTITY_NAME+"Service",s_str,suffixType);

            // 2.4 创建XXXServiceImpl文件
            String sImpl_str = serviceImplStrFun(PACKAGE_NAME,ENTITY_NAME,ENTITY_FIELDS);
            createFileAndWriteStr(basePath+"/"+newPath+"/service/impl/",ENTITY_NAME+"ServiceImpl",sImpl_str,suffixType);

            // 2.5 创建controller文件
            String c_str = controllerStrFun(PACKAGE_NAME, ENTITY_NAME, ENTITYNAME_CN);
            createFileAndWriteStr(basePath+"/"+newPath+"/controller/",ENTITY_NAME+"Controller",c_str,suffixType);

        }
    }

生成前端的代码主要内容展示：

@Override
    public void automaticFrontendCode(JSONObject jsonObject) {
//        System.out.println("生成前端代码...");
        //这三个文件夹下创建文件
        String PACKAGE_EXTERNAL_PATH = "vue3-element-admin-master/src/api/external/";
        String PACKAGE_ROUTER_PATH = "vue3-element-admin-master/mock/";
        String PACKAGE_ADMIN_PATH = "vue3-element-admin-master/src/views/admin/";
        // 1.创建包
        // 1.1 存放接口的包
        String PACKAGE_EXTERNAL = "vue3-element-admin-master/src/api/external".replace('/','.');
        createFrontFolderStructure(PACKAGE_EXTERNAL);

        // 1.2 存放路由的包
        String PACKAGE_ROUTER = "vue3-element-admin-master/mock".replace('/','.');
        createFrontFolderStructure(PACKAGE_ROUTER);

        // 1.3 存放页面代码的包
        String PACKAGE_ADMIN = "vue3-element-admin-master/src/views/admin".replace('/','.');
        createFrontFolderStructure(PACKAGE_ADMIN);
        String routerMontageStr="";
        //2. 创建文件
        JSONArray DATAS = jsonObject.getJSONArray("datas");
        for (int i = 0; i < DATAS.size(); i++) {
            JSONObject data = DATAS.getJSONObject(i);
            //类名
            String ENTITY_NAME = data.getString("entityName");
            //实体类备注(中文)
            String ENTITYNAME_CN= data.getString("entityName_cn");
            //实体类的字段
            JSONArray ENTITY_FIELDS = data.getJSONArray("entity");

            // 2.1 创建接口的文件
            String api_str = apiTsFun(ENTITY_NAME,ENTITYNAME_CN,ENTITY_FIELDS);
            createFileAndWriteStr(basePath+"/"+PACKAGE_EXTERNAL_PATH,ENTITY_NAME.toLowerCase(),api_str,".ts");

            // 2.2 创建路由文件
            // 2.2.1 拼接要插入的router字符
            String router_str = routerTsFun(ENTITY_NAME,ENTITYNAME_CN);
            routerMontageStr+=router_str;

            // 2.3 创建页面文件XXXManage.vue
            String view_str = viewFun(ENTITY_NAME,ENTITYNAME_CN,ENTITY_FIELDS);
            createFileAndWriteStr(basePath+"/"+PACKAGE_ADMIN_PATH,ENTITY_NAME+"Manage",view_str,".vue");

        }
        // 2.4 获取router.ts文件内容,将2.2.1的内容插入到指定位置 得到新的ts代码.
        String filePath="F:/vue3v1/vue3-element-admin-master/mock/router.ts";
        String searchString = "// 这里编写";
        String newRouterTs = retrieveFileContentAndInsert(filePath,searchString,routerMontageStr);
        // 2.4.1 修改复制后文件的 内容
        createFileAndWriteStr(basePath+"/"+PACKAGE_ROUTER_PATH,"router",newRouterTs,".ts");

    }