【框架分析】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的配置文件,管理前端项目的依赖。

1.3 搭建

  • 项目下载或拉取到本地
  • 环境准备
    • node.js (npm命令)
    • mysql
    • redis
    • jdk
    • maven自定义仓库
  • mysql数据库搭建
    • 创建ry-vue数据库,编码规则为utf8mb4,否则运行脚本后,项目运行报错
    • 执行sql文件夹下两个sql脚本
  • 后端配置修改
    • ruoyi-admin\src\main\resources\application-druid.yml
      • 数据库用户名与密码修改
      • 如果redis设置密码,也需要修改

1.4 运行

  • 开启redis服务(可直接执行redis-server.exe)
    image
  • 后端直接运行
    image
  • 前端
    • 使用cmd命令窗口,只一次执行需要先执行
      npm install
    • 再执行(非第一次直接执行该命令)
      npm run dev
      image
    • 访问地址
    • 登录
      • 账号admin
      • 密码admin123
        image

2 新模块搭建(配置关系参考第三章)

2.1 后端代码

2.1.1 模块搭建

  • 可以复制已有文件夹,如ruoyi-system,删除内部文件,修改下图两个蓝色文件夹名为test

添加页面

  • 添加菜单

  • 添加页面

    • 组件路径
      系统举例的文件如下图所选,即组件路径就是ruoyi-vue\views下的路径,指向的就是该页面对应的vue文件,填写时,如下图,省略了.vue后缀

那么我们这里就新建自己的test文件夹,之后生成的vue文件,就放在这里
image

  • 刷新浏览器即可看到,但是它现在是无法访问的

2.1. 添加字典

  • 添加字典
  • 编辑字典
    image

image

2.1.2 创建数据库表

  • 举例
CREATE TABLE `test_order` ( `order_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '订单ID', `order_name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '订单名称', `order_group` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'DEFAULT' COMMENT '订单组名', PRIMARY KEY (`order_id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '订单明细表' ROW_FORMAT = Compact
  • 代码生成
    image

  • 编辑
    字段1正常来说,不应该显示在页面上。
    字段3为了测试我们的字典。
    image
    该页配置,测试我们添加的新页面
    image
    提交成功后,生成代码。

处理生成的代码

  • 下载的文件
    image
  • sql脚本可以运行,或自己添加数据也可以
  • 放置代码
    image
    image
    image
    image

添加模块

image
选中导入已存在的sources,一直下一步即可
这样我们的ruoyi-test图片就和其他模块一样了
image

修改依赖(pom.xml)

  • 将ruoyi-test放入父类工程
    image
  • 给管理员,因为我们的controller在admin下,因此需要我们的ruoyi-test子项目
    image
  • ruoyi-test自己的工程下pom.xml
    image
  • 重新加载maven,无法自动更新依赖,可打开maven生命周期,先clean,后install,主要如果是自定义maven工程,记得在setting中自行配置。

重新启动服务

3 代码生成 配置关系梳理

关于生成代码,需要进行菜单配置、数据配置等等,这些配置中有很多容混淆的参数,特做此结构进行梳理。

  • 前端配置
    • 目录
      • 路由地址:【模块名】
    • 菜单
      • 路由地址:【业务名】
      • 组件路径:【模块名】/【业务名】/index
  • 后端配置
    • 数据
    • 生成配置
      • 生成包路径:【生成包路径】
      • 生成模块名:【模块名】
      • 生成业务名:【业务名】
  • 生成的代码包结构
    • main
      • java/【生成包路径】
        - controller
        - domain
        - mapper
        - service
      • resources
        • mapper
    • vue
      • api/【模块名】
        • 【业务名】.js
      • views/【模块名】/【业务名】
        • index.vue

__EOF__

本文作者M漓
本文链接https://www.cnblogs.com/mlstudyjava/p/18108171.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   沫漓fighting  阅读(1358)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示