霸州市建设局网站/网站友链
系列文章目录
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*/@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的代码下载链接去下载哦
总结
想实现好看的后台管理端系统:
- 可以去开源的vue-element-admin官网下载源码编辑。
- 可以下载我的资源,比较简单,易于上手开发。尤其是对于学习中的同学,有问题也可以私信我~我们一起学习帮助你完成系统的开发
- 联系我,使用低代码块配置帮助大家快速生成对应需求的后台管理端系统~效率高哦
- 网上也有很多不错的资源,也希望大家能够挖掘出更好的管理端系统分享哦~
相关文章:

后台管理系统(springboot+vue3+mysql)
系列文章目录 1.SpringBoot整合RabbitMQ并实现消息发送与接收 2. 解析JSON格式参数 & 修改对象的key 3. VUE整合Echarts实现简单的数据可视化 4. List<HashMap<String,String>>实现自定义字符串排序(key排序、Val…...

Android经典面试题之Kotlin中 if 和 let的区别
本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点 在Kotlin中,if和let虽然有时候用来处理相似的情景,但它们实际上是用于不同的场景并具有不同的性质。下面我们来详细对比…...

python inf是什么意思
INF / inf:这个值表示“无穷大 (infinity 的缩写)”,即超出了计算机可以表示的浮点数的范围(或者说超过了 double 类型的值)。例如,当用 0 除一个整数时便会得到一个1.#INF / inf值;相应的,如果…...

Cursor搭配cmake实现C++程序的编译、运行和调试
Cursor搭配cmake实现C程序的编译、运行和调试 Cursor是一个开源的AI编程编辑器,开源地址https://github.com/getcursor/cursor ,它其实是一个集成了Chat-GPT的VS Code。 关于VS Code和VS的对比可以参考这篇文章VS Code 和 Visual Studio 哪个更好&…...

C#-了解ORM框架SqlSugar并快速使用(附工具)
目录 一、配置 二、操作步骤 1、根据配置映射数据库对象 2、实体配置 3、创建表 4、增删改查 增加数据 删除数据 更新数据 查询数据 5、导航增删改查 增加数据 删除数据 更新数据 查询数据 6、雪花ID 三、工具 SqlLite可视化工具 MySQL安装包 MySQL可视化…...

巴黎奥运会 为啥这么抠?
文|琥珀食酒社 作者 | 朱珀 你是不是挺无语的 这奥运会还没有开始呢 吐槽大会就停不下来了 接近40度的高温 公寓没有空调 奥运巴士也没空调 连郭晶晶老公霍启刚 这种见惯大场面的也破防了 你可能会问 好不容易搞个奥运会 干嘛还要抠抠搜搜的呀 在咱们看…...

Python日期和时间处理库之pendulum使用详解
概要 在处理日期和时间时,Python 标准库中的 datetime 模块虽然功能强大,但有时显得过于复杂且缺乏一些便捷功能。为了解决这些问题,Pendulum 库应运而生。Pendulum 是一个 Python 日期和时间处理库,它在 datetime 模块的基础上进行了扩展,提供了更加友好的 API 和更多的…...

如何通过 CloudCanal 实现从 Kafka 到 AutoMQ 的数据迁移
01 引言 随着大数据技术的飞速发展,Apache Kafka 作为一种高吞吐量、低延迟的分布式消息系统,已经成为企业实时数据处理的核心组件。然而,随着业务的扩展和技术的发展,企业面临着不断增加的存储成本和运维复杂性问题。为了更好地…...

详解Qt 之QPainterPath
文章目录 前言QPainterPath 与 QPainter 的区别QPainterPath 的主要函数和成员成员函数构造函数和析构函数路径操作布尔运算几何计算 示例代码示例 1:绘制简单路径示例 2:使用布尔运算合并路径示例 3:计算路径长度和角度 更多用法... 总结 前…...

深入理解Apache Kylin:从概念到实践
深入理解Apache Kylin:从概念到实践 引言 Apache Kylin 是一个分布式分析引擎,专为在大规模数据集上进行快速多维分析(OLAP)设计。自2015年开源以来,Kylin 已经成为许多企业在大数据分析领域的首选工具。本文将从概念…...

vue3框架Arco Design输入邮箱选择后缀
使用: <a-form-item field"apply_user_email" label"邮箱:" ><email v-model"apply_user_email" class"inputborder topinputw"></email> </a-form-item>import email from /componen…...

制作镜像
1.镜像 image: 是一个文件,包含了微型操作系统、核心代码(可执行程序)、依赖环境(库) 2.仓库 repository: 存放镜像文件的地方 3.容器: container :是运行镜像的地方--…...

Kylin系列(二)进阶
Kylin系列(二)进阶 目录 简介Kylin架构深入解析 Kylin架构概述核心组件 高级Cube设计 Cube设计原则Cube优化策略 实时数据分析 实时数据处理流程实时Cube构建 高级查询与优化 查询优化技术SQL优化 Kylin与BI工具集成 Tableau集成Power BI集成 监控与调优 系统监控性能调优 常…...

Maven实战.依赖(依赖范围、传递性依赖、依赖调解、可选依赖等)
文章目录 依赖的配置依赖范围传递性依赖传递性依赖和依赖范围依赖调解可选依赖最佳实践排除依赖归类依赖优化依赖 依赖的配置 依赖会有基本的groupId、artifactld 和 version等元素组成。其实一个依赖声明可以包含如下的一些元素: <project> ...<depende…...

关于React17的setState
不可变值 state必须在构造函数中定义 在setState之前不能修改state的值,不要直接修改state,使用不可变值 可能是异步更新 直接使用时异步的 this.setState({count: this.state.count 1 }, () > {console.log(count by callback, this.state.count) // 回调函…...

2024华为OD机试真题-英文输入法Python-C卷D卷-100分
2024华为OD机试题库-(C卷+D卷)-(JAVA、Python、C++) 题目描述 主管期望你来实现英文输入法单词联想功能,需求如下: 依据用户输入的单词前缀,从已输入的英文语句中联想出用户想输入的单词。 按字典序输出联想到的单词序列,如果联想不到,请输出用户输入的单词前缀。 注意 英…...

magento2 安装win环境和linux环境
win10 安装 安装前提,php,mysql,apach 或nginx 提前安装好 并且要php配置文件里,php.ini 把错误打开 display_errorsOn开始安装 检查环境 填写数据库信息 和ssl信息,如果ssl信息没有,则可以忽略 填写域名和后台地址࿰…...

【城市数据集】世界城市数据库和访问门户工具WUDAPT
世界城市数据库和访问门户工具WUDAPT WUDAPTLCZ分类具体步骤参考 在 城市气候研究中,用于描述城市特征的数据集一般采用基于类别的传统方法,将城市地区分为数量有限的类型,从而导致精确度下降。越来越多的新数据集以亚米微尺分辨率描述城市的…...

网络爬虫必备工具:代理IP科普指南
文章目录 1. 网络爬虫简介1.1 什么是网络爬虫?1.2 网络爬虫的应用领域1.3 网络爬虫面临的主要挑战 2. 代理IP:爬虫的得力助手2.1 代理IP的定义和工作原理2.2 爬虫使用代理IP的必要性 3. 代理IP的类型及其在爬虫中的应用3.1 动态住宅代理3.2 动态数据中心…...

JMeter接口测试-5.JMeter高级使用
JMeter高级使用 案例: 用户登录后-选择商品-添加购物车-创建订单-验证结果 问题: JMeter测试中,验证结果使用断言,但断言都是固定的内容假如要判断的内容(预期内容)是在变化的, 有时候还是不确定的, 那该怎么办呢? 解决&…...

网络安全大模型开源项目有哪些?
01 Ret2GPT 它是面向CTF二进制安全的工具,结合ChatGPT API、Retdec和Langchain进行漏洞挖掘,它能通过问答或预设Prompt对二进制文件进行分析。 https://github.com/DDizzzy79/Ret2GPT 02 OpenAI Codex 它是基于GPT-3.5-turbo模型,用于编写…...

【赠书第18期】人工智能B2B落地实战:基于云和Python的商用解决方案
文章目录 前言 1 方案概述 2 方案实施 2.1 云平台选择 2.2 Python环境搭建 2.3 应用开发与部署 2.4 应用管理 2.5 安全性与隐私保护 3 方案优势与效益 4 推荐图书 5 粉丝福利 前言 随着云计算技术的快速发展,越来越多的企业开始将业务迁移至云端&#x…...

《昇思25天学习打卡营第24天》
接续上一天的学习任务,我们要继续进行下一步的操作 构造网络 当处理完数据后,就可以来进行网络的搭建了。按照DCGAN论文中的描述,所有模型权重均应从mean为0,sigma为0.02的正态分布中随机初始化。 接下来了解一下其他内容 生成…...

KeePass密码管理工具部署
KeePass密码管理工具部署 安装包下载入口 双击执行,根据提示完成安装: 安装完成后如图:...

C#中导出dataGridView数据为Excel
C#中导出dataGridView数据为Excel #region 导出Excel功能函数 /// <summary> /// dataGridView 导出Excel功能函数 /// </summary> /// <param name"dataView">dataGridView数据表</param> /// <param name"filePath">路径…...

算法学习6——贪心算法
什么是贪心算法? 贪心算法是一种在每一步选择中都采取当前状态下最优或最有利的选择的算法。其核心思想是通过一系列局部最优选择来达到全局最优解。贪心算法广泛应用于各种优化问题,如最短路径、最小生成树、背包问题等。 贪心算法的特点 局部最优选…...

【C++】标准库:介绍string类
string 一.string类介绍二.string类的静态成员变量三.string类的常用接口1.构造函数(constructor)2.析构函数(destructor)3.运算符重载(operator)1.operator2.operator[]3.operator4.operator 4.string的四…...

未来不会使用 AI 的人真的会被淘汰吗?
AI 是今年大火的一个话题,随着 ChatGPT 之类的一系列大模型开始流行以后,有不少的培训机构宣称这样的口号: “未来不会使用 AI 的人将会被淘汰”。我觉得这个观点本身并没有错,但是关键在于那些培训机构出于自身的利益,故意忽略了…...

K8S及Rancher部署
前言 这篇文写的有点子啰嗦,甚至为了控制篇幅我还分出了其他好几篇文章,只在本文中保留了我认为必须存在。而之所以篇幅这么长,一方面是我在相关领域完全新手,啥啥都不会;而另一方面是我所参考的资料都过于精简&#…...

Qt Creator使用git管理代码
1.在GitHub中新建仓库,设置好仓库名后,其它的设置默认即可。 2.打开git bash,输入以下命令: git config --global user.name "xxxxx" #设置你的GitHub用户名 git config --global user.email "xxxxxxxxx.…...