基于RuoYi框架自动生成后端代码及前端界面

news2025/1/22 21:49:16

🏀(1)序言

    🐸近来工作临近项目周期尾声,基本都是每天加班到晚上8到9点的节奏,似乎每年到10月份之际都是一个忙碌月,不知道这是一个🐶行业规律🐶还是仅仅对我而言的一个🌀轮回巧合🌀呢?

    🐙话不多说,直接表明此篇博文的主题是基于RuoYi框架自动生成后端代码及前端界面。其实重点是需要这个前端界面,毕竟后台代码的自动生成本人已在去年已有介绍过,再者本身作为后端的开发人员,基础业务代码能力还是有的。那为何提出此需求呢?小伙伴是否有遇到目前像我这样的情况:😭暂无前端界面查看数据,但是数据的增删改查则单纯手工用操作数据库的方式维护数据。😭 数据量不多的话,听上去其实还好。但是如果让我们维护非常多的数据,直接把你的眼睛都看费了,工作交不了差,眼睛也不舒服,得不偿失啊!小伙伴会说:那何不要前端人员开发一个界面拿来用呢?确实是需要这样做,但是现在其他的项目时间紧,留给其他维护的时间就不多了,虽然自己能写后端代码,但是前端确实接触得少,硬写也不能短期时间内生效,谁叫我不是全栈呢?没有办法哦,于是产生了此“偷懒”的想法,基于框架本身的机制自动生成代码,能极大的缩短我们的数据维护周期,至少也能让我们没有那么累才是重点。

    🐙我师傅曾教导过我这样一句话:😄“有时候学会偷懒,也是一种聪明的表现!” 😄 如果可以,我其实也想这样“懒”下去,当然是聪明的“懒”,而不是为了偷懒而懒。

🏀(2)RuoYi框架下载及使用

    RuoYi框架下载及使用这部分的内容在本人去年接触RuoYi时已经写了一篇博文对其进行了介绍,所以这部分小伙伴们可以参考本人这篇博文:👉👉👉如何自动生成SpringBoot项目代码👈👈👈,这篇博文重点是介绍后端代码生成为主,但是并未借助框架本身对数据维护做详细介绍,下面的内容将对其数据界面维护进行展开说明。

🏀(3)新建ruoyi-teacher模块

✂️ ① 点击RuoYi右键New Module

在这里插入图片描述
✂️ ② 在这里点击Maven,Next。

在这里插入图片描述
✂️ ③ 填写新模块名称为“ruoyi-teacher”,点击Finish。

在这里插入图片描述
✂️ ④ 新模块创建已生成,如下图所示。

在这里插入图片描述

🏀(4)pom.xml依赖配置

✂️ ① 经过上面的步骤新建了模块之后还不能立即使用,因为还需要让框架知道我们新建了一个新模块,则需要将我们的模块依赖加入到最外层的pom.xml中。

✏️添加依赖语句为:

<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-teacher</artifactId>
    <version>${ruoyi.version}</version>
</dependency>

✏️所添加位置如下图所示:

在这里插入图片描述

✂️ ② 相应地,由于ruoyi-admin模块是整个框架的入口,所以我们需要将相应的语句写在admin下面的pom依赖中(个人理解:需要用到什么模块就将什么模块引入进来)。

✏️添加依赖语句为:

<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-teacher</artifactId>
</dependency>

✏️所添加位置如下图所示:

在这里插入图片描述

✂️ ③ 由于自动代码的生成会使用到ruoyi-common模块当中的通用工具,其实都是一样的说法,我们需要什么模块的内容就引入什么模块的内容,这里将ruoyi-common引入到ruoyi-teacher教师模块中,如下所示。

✏️添加依赖语句为:

<dependencies>
    <dependency>
        <groupId>com.ruoyi</groupId>
        <artifactId>ruoyi-common</artifactId>
    </dependency>
</dependencies>

✏️所添加位置如下图所示:

在这里插入图片描述

🏀(5)启动项目,界面操作

✂️ ① 进入登录界面登录后,找到菜单管理,点击“新增”。

在这里插入图片描述

✂️ ② 新建菜单目录,名称为“教师管理”。

在这里插入图片描述

✂️ ③ 刷新界面后,发现左侧出现“教师管理 ”,但是界面无实质性的内容,因为我们还未填充代码内容,暂无内容是正常情况。

在这里插入图片描述

✂️ ④ 使用系统工具中的“代码生成”工具,导入“教师信息表”。

在这里插入图片描述
在这里插入图片描述

✂️ ⑤ 点击“编辑”,修改生成信息,如下图所示。

在这里插入图片描述

✂️ ⑥ 代码生成,下载内容如下:其中main是我们将要copy的业务前后端代码,而下面的infoMenu.sql则是框架本身生成“教师管理”菜单的sql语句。

在这里插入图片描述

✂️ ⑦ 将main的内容直接替换IDEA中ruoyi-teacher模块下的main,即前后端代码copy。
在这里插入图片描述
✂️ ⑧ 前后端代码copy后的内容如下所示:
在这里插入图片描述
✂️ ⑨ 将ruoyi-teacher中的templates.teacher.info的内容复制到ruoyi-admin一份(前端页面展示部分)
在这里插入图片描述

✂️ ⑩ 在数据库中执行“infoMenu.sql”这条sql语句,响应得到如下提示,插入增删改查导出功能,也证明菜单项目创建成功,如果这里不太清楚的小伙伴可以到我们所创建的ruoyi数据库的表结构中做详细的了解。

在这里插入图片描述

✂️ ⑪ 重启项目(而不是刷新界面),即可访问新生成的界面,如下所示。以下有相应地增、删、查、改和导出五个功能的操作,就不一一描述了。有需要的小伙伴可以按照我的这个方法试试看,这样的“偷懒”方式维护数据还是挺香滴~

在这里插入图片描述

🏀(5)相关建议

    以上的操作都是为了满足自身短期的工作需要,而且也没做复杂的业务需求。如果项目时间不紧张或者相关协调做得较好,完全不需要走这条线路的操作。如果小伙伴还是在校学生,当然可以拿这个来练练手,因为没有入职之前相关的基础业务代码还不是很熟练,可以多参考一下框架生成的代码,学习的价值还是较高的。

🍆🍆🍆路过的小伙伴,如果本篇博文对你的学习或者工作有所帮助,可以点赞+收藏+关注一波呀~👊👊👊小编后续每过一段时间会整理出相关项目实例的博文,感谢您的支持哦!!!✈️✈️✈️
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408322.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在vue中使用FullCanlendar实现日历预约会议室功能

最近接到任务,让实现一个预约功能,让我找找插件,需求是这个样子滴 明白任务以后,那咱就开抄呗~(bushi 开找 经过一番寻找,最后我决定使用FullCalendar,为啥用这个呢,你看它样子长的像不像我的需求,虽然说不上是有一些像吧,但简直就是一模一样. 更关键的是这玩意有很全的文档(但…

H5移动端适配方案rem/vw

前言 在讲解适配方案之前&#xff0c;我们聊聊为什么要做适配&#xff1f; 因为视口、逻辑像素、分辨率这些变量的不同&#xff0c;在每个设备展示都不一样&#xff0c;需要一种方案来统一。 物理像素&#xff1a;也就是分辨率&#xff0c;一个物理像素是显示器上的最小的物…

项目无法识别 ?. 语法,导致报错Module parse failed: Unexpected token

一、第一种情况是如果你需要引入的组件库源码的过程中&#xff0c;比如你要import一个封装好的组件这种场景&#xff1a; 首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包&#xff0c;然后在导入的时候报这个语法错&#xff0c;那你可以接着往下…

【前端趋势】Vue、Vite作者尤雨溪前端趋势2022主题演讲

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f308;博客主页&#x1f449;codeMak1r.的博客 最新专栏【React–从基础到实战】…

Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项

问题重现 最近在做项目时&#xff0c;有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态&#xff1b;我使用到了 Vant UI 组件&#xff0c;首先按照官网文档的写法直接引入&#xff1a; <!--下拉折叠面板--><van-collapse class"collapse" …

vue路由的安装和使用

TOCVue 路由 vue-router 1 安装vue-router npm i vue-router -s 2 创建路由模块 // src/router/index.js就是当前项目的路由模块 // 1 导入Vue 和VueRouter的包 import Vue from vue import VueRouter from vue-router // 导入路由要用到的组件 import Home from ../component…

【TypeScript介绍】一文带你初步了解TypeScript

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 今天开始学习学习TypeScript这门语言&#xff01; 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录TypeScript介绍1. TypeScript是什么2. TypeScript为什么要…

大文件上传

大文件上传原理 当我们在做文件上传的功能时&#xff0c;如果上传的文件过大&#xff0c;可能会导致长传时间特别长&#xff0c;且上传失败后需要整个文件全部重新上传。因此&#xff0c;我们需要前后端配合来解决这个问题。 最常用的解决方案就是 —— 切片上传。 这次我们…

图文详解uni-app PC端宽屏适配方案

图文详解uni-app PC端宽屏适配方案 随着互联网的发展&#xff0c;iOS、Android、H5以及各种小程序快应用层出不穷&#xff0c;随之而来的问题就是如何用一套代码&#xff0c;适配多个平台&#xff0c;其中uni-app表现优异&#xff0c;已经实现了手机端全覆盖&#xff0c;支持i…

【JavaScript速成之路】JavaScript对象

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言1&#xff0c;初识对象1.1&#xff0c;对象概念1.2&#xff0c;对象创建1.2.…

手撕前端面试题【JavaScript】

前端的那些基本标签&#x1f353;&#x1f353; 浅拷贝&#x1f353;&#x1f353;简易深拷贝&#x1f353;&#x1f353;深拷贝&#x1f353;&#x1f353;什么是深拷贝&#xff0c;什么是浅拷贝&#xff0c;二者有什么区别&#xff0c;平时改怎么区分呢&#xff1f;&#x1f…

vue3.0本地引入vue.js

第一步获取vue版本 Vue的各种版本介绍&#xff1a; cjs&#xff08;两个版本都是完整版&#xff0c;包含编译器&#xff09; vue.cjs.js vue.cjs.prod.js&#xff08;开发版&#xff0c;代码进行了压缩&#xff09; global&#xff08;这四个版本都可以在浏览器中直接通过…

Vue中 provide、inject 详解及使用

传送门&#xff1a;Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门&#xff1a;Vue中 状态管理器&#xff08;vuex&#xff09;详解及应用场景 传送门&#xff1a;Vue中 $ attrs、$ listeners 详解及使用 传送门&#xff1a;Vue中 事件总线&#xff08;eventBus&#x…

New Bing申请与使用教程

&#xff08;1&#xff09;安装 Edge 浏览器插件&#xff1a; 由于在 CN 访问 Bing 国际版会自动跳转到 CN 版&#xff0c;因此需要先重定向浏览器的 Header&#xff0c;先在 Edge 浏览器安装插件&#xff1a;Header Editor&#xff1a; 添加如下配置&#xff08;其中&#xf…

① 尚品汇的后台管理系统【尚硅谷】【Vue】

后台管理系统项目简介 什么是后台管理系统项目&#xff1f; 在前端领域当中&#xff0c;开发后台管理系统项目&#xff0c;并非是Java&#xff0c;PHP等后台语言项目 在前面课程当中&#xff0c;我们已经开发了一个项目【尚品汇电商平台项目】&#xff0c;这个项目主要针对的是…

HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?

转眼从2005年到现在&#xff0c;《亮剑》已经播出多年&#xff0c;但热度依然不减&#xff0c;而且每次重温我都会看出不一样的意蕴&#xff0c;今天&#xff0c;我就用HTML5CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮&#xff1f; 目录 1. 实现思路 2. 素材介绍…

零基础JavaScript学习【第四期】

博主有话说:不知不觉这一已经第四期了,感谢大家的支持。 个人空间:GUIDM的个人空间 专栏内容:零基础JavaScript学习 基础还是关键。 欢迎大家的一键三连。 往期回顾: 前情回顾:第一期https://blog.csdn.net/m0_61901625/article/details/124772807?spm=1001.2014.3001.…

Spring-Security实现登录接口

目录简介原理初探实现思路登录接口实现准备工作编码实现效果展示简介 Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 具体介绍和入门看springSecurity入门 原理初探 在实…

CSS 实现六边形柱状图

前言 &#x1f44f;CSS 实现六边形柱状图 速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现步骤 定义全局css变量&#xff0c;柱状宽度为–w&#xff0c;最大高度为–h&#xff0c;柱形整体为渐变色&#xff0c;定义上部分颜色为…

VUE-webpack超详细教程

一.认识webpack 官网解释&#xff1a;从本质上来讲&#xff0c;webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解&#xff1a; 模块化&#xff1a; webpack其中一个核心就是让我们可能进行模块化开发&#xff0c;并且会帮助我们处理模块…