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

系列文章目录

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

更多文章可看我主页哦~

---

---

前言

    在我们做项目时，都会用到后台管理系统。使得管理员可以通过该平台来维护前台的数据，查看一些数据的趋势等。所以开发后台管理系统基本是每个项目必备的一环，但大多数都是重复的增删改查操作。而且模版都长得差不多，怎么可以快速开发一个后台管理系统呢？这里我推荐大家使用开源的项目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*/@Overridepublic void automaticBackendCode(JSONObject jsonObject) {String PACKAGE_NAME = jsonObject.getString("packageName");//1.创建包名：从com层到service里的implcreateFolderStructure(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);}}

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

@Overridepublic 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.vueString 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");}

2.2 效果图

2.2.1 后端代码生成

自动生成com.xintai.study下的所有包，在该包下生成对应实体类的文件以及代码。如下图所示：

点击每个文件夹下都会有对应的代码文件以及文件代码，所有的MVC三层架构中的文件夹下都会生成对应的代码文件，这里以service层代码文件生成效果作为展示：

2.2.2 前端代码生成

在项目文件下生成对应的文件夹，在这些文件夹下生成对应的代码。如下图所示：

在对应的文件夹下生成对应的XX管理.vue文件内容，包括增删改查，分页，导出数据功能。如下图所示：

三、页面效果图展示

3.1 管理端效果图

3.1.1 登录页

3.1.2 首页

3.1.3 用户管理

3.1.4 公告管理

3.2 代码下载

上述3.1管理端效果图中的所有按钮功能代码均已实现，代码下载地址：
后台管理系统（前端源码+后端源码+数据库文件全套）

下载文件内容文件如下图所示：

注：这里的代码地址是不包含低代码配置的，但所有的上述功能均已实现（验证码、用户登录、退出、增删改查、导出等），可作为大家的系统模版去在这个技术上编写需求。

3.3 联系我

大家也看到了，这里实现了低代码配置管理端功能，如有想实现管理端系统需求的小伙伴可以加我联系方式哦（下方有企鹅号）~如果只是想使用我的模版基础上自己去开发，可以点击3.2的代码下载链接去下载哦

总结

想实现好看的后台管理端系统：

1. 可以去开源的vue-element-admin官网下载源码编辑。
2. 可以下载我的资源，比较简单，易于上手开发。尤其是对于学习中的同学，有问题也可以私信我~我们一起学习帮助你完成系统的开发
3. 联系我，使用低代码块配置帮助大家快速生成对应需求的后台管理端系统~效率高哦
4. 网上也有很多不错的资源，也希望大家能够挖掘出更好的管理端系统分享哦~