【框架分析】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
posted @ 2024-04-01 22:32  沫漓fighting  阅读(2047)  评论(0)    收藏  举报