【框架分析】Vue 3.0 + Element-Plus + Ruoyi
1 项目搭建
1.1 项目源码
1.2 项目架构
- 后端目录结构
- ruoyi-admin:后台服务的核心模块,包含主要的业务处理逻辑。
- ruoyi-common:公共模块,包含工具类和通用代码。
- ruoyi-framework:框架核心,包含安全、配置和核心管理功能。
- ruoyi-generator:代码生成模块,用于自动生成代码。
- ruoyi-quartz:定时任务模块,管理定时任务。
- ruoyi-system:系统基础模块,包含用户、权限、日志等基础服务。
- pom.xml:Maven配置文件,管理项目依赖。
- 前端目录结构(ruoyi-ui)
- src:存放源代码。
- api:存放各种API调用接口。
- assets:存放静态资源,如图片、样式文件。
- components:存放Vue组件。
- layout:应用的布局组件。
- router:Vue路由配置。
- store:Vuex状态管理。
- views:应用的视图文件。
- public:存放公共文件,如index.html。
- package.json:Node.js的配置文件,管理前端项目的依赖。
- src:存放源代码。
1.3 搭建
- 项目下载或拉取到本地
- 环境准备
- node.js (npm命令)
- mysql
- redis
- jdk
- maven自定义仓库
- mysql数据库搭建
- 创建ry-vue数据库,编码规则为utf8mb4,否则运行脚本后,项目运行报错
- 执行sql文件夹下两个sql脚本
- 后端配置修改
- ruoyi-admin\src\main\resources\application-druid.yml
- 数据库用户名与密码修改
- 如果redis设置密码,也需要修改
- ruoyi-admin\src\main\resources\application-druid.yml
1.4 运行
2 新模块搭建(配置关系参考第三章)
2.1 后端代码
2.1.1 模块搭建
添加页面
那么我们这里就新建自己的test
文件夹,之后生成的vue文件,就放在这里
2.1. 添加字典
2.1.2 创建数据库表
- 举例
处理生成的代码
添加模块
选中导入已存在的sources,一直下一步即可
这样我们的ruoyi-test图片就和其他模块一样了
修改依赖(pom.xml)
- 将ruoyi-test放入父类工程
- 给管理员,因为我们的controller在admin下,因此需要我们的ruoyi-test子项目
- ruoyi-test自己的工程下pom.xml
- 重新加载maven,无法自动更新依赖,可打开maven生命周期,先clean,后install,主要如果是自定义maven工程,记得在setting中自行配置。
重新启动服务
3 代码生成 配置关系梳理
关于生成代码,需要进行菜单配置、数据配置等等,这些配置中有很多容混淆的参数,特做此结构进行梳理。
- 前端配置
- 目录
- 路由地址:【模块名】
- 菜单
- 路由地址:【业务名】
- 组件路径:【模块名】/【业务名】/index
- 目录
- 后端配置
- 数据
- 生成配置
- 生成包路径:【生成包路径】
- 生成模块名:【模块名】
- 生成业务名:【业务名】
- 生成的代码包结构
- main
- java/【生成包路径】
- controller
- domain
- mapper
- service - resources
- mapper
- java/【生成包路径】
- vue
- api/【模块名】
- 【业务名】.js
- views/【模块名】/【业务名】
- index.vue
- api/【模块名】
- main
__EOF__

本文作者:M漓
本文链接:https://www.cnblogs.com/mlstudyjava/p/18108171.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/mlstudyjava/p/18108171.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)