AI+RuoYi
1.RuoYi-Vue入门
采用了前后端分离的单体架构设计
1.1运行后端项目
1.Git下载
打开gitee - 点击克隆 -复制https - 打开IDEA关闭project - get vcs - 粘贴
通过idea克隆若依源码，仓库地址：RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本
2.导入SQL并配置
导入：新建scheme（ry-vue） - 右键ry-vue选择run sql script - 选择sql文件
配置：
对数据库账号密码等配置
3.Redis启动与配置
启动：
（1）找到redis的目录 - 右键在终端打开 - 输入.\redis-server.exe redis.windows.conf
（2）或者双击
配置：application.yml
4.项目运行
在ruoyi-admin模块下，运行com.ruoyi.RuoYiApplication.java
1.2运行前端项目
1.克隆vue3项目
新建一个文件夹 - 右键终端打开 - 输入git clone （复制gitee上的克隆）
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git
2.通过vscode打开项目
黑窗口直接输入code ./RuoYi-Vue3
然后点击右上角的切换面板 - 如果路径不在当前目录路径则换种方式导入
找到克隆的代码中的RuoYi-ui - 拖进vscode中间 - 再打开控制面板就行了
3.安装依赖
npm install
4.启动项目
npm run dev
5.小结
1.3入门案例
实现CRM系统中的课程管理功能，涵盖增加、删除、修改和查询课程信息的完整前后端代码。
1、准备课程表结构和数据sql文件，导入到数据库中（资料中有）
2、登录前端Ruoyi系统（系统工具 -> 代码生成 -> 导入课程表）
3、代码生成列表中找到课程表（可预览、编辑、同步、删除生成配置）,注意功能与接口设计一致
4、点击生成代码会得到一个ruoyi.zip
5、执行sql文件导入菜单，按照包内目录结构复制到自己的项目中即可
2.若依的通用功能详解
2.1系统管理
1.权限系统
-
demo账号（超级管理员），可以查看所有功能菜单
-
zhangsan账号（市场专员），可以查看线索管理菜单
-
yueyue账号（销售专员），可以查看商机、合同等菜单
RBAC（基于角色的访问控制）是一种广泛使用的访问控制模型，通过角色来分配和管理用户的菜单权限。
案例：创建新用户小智并关联课研人员角色，仅限课程管理和统计分析菜单访问。
实现步骤：
①创建菜单
前面已经做过课程管理菜单，修改即可在菜单管理中找到系统工具-课程管理-修改为主类目，目录
②创建角色，并分配权限
③创建用户，并关联角色
2.数据字典
若依内置的数据字典，用于维护系统中常见的静态数据。例如：性别、状态…
功能包括：字典类型管理（性别）、字典数据管理（男，女）
表关系说明：
案例：将课程管理的学科字段改为数据字典维护。
实现步骤：
①添加字典类型和数据
②修改代码生成信息
③下载代码，导入前端
注意别导错了文件夹
3.参数设置
参数设置：对系统中的参数进行动态维护。（无需修改代码）
4.通知公告
系统将信息发送给指定的用户、部门或角色。用户可以通过系统界面或电子邮件接收通知，从而确保信息及时传达（这部分需要自己开发）。
5.日志管理
登录日志 操作日志
2.2系统监控
1.监控相关
2.定时任务
案例：每间隔5秒，控制台输出系统时间。
实现步骤：
①创建任务类（IDEA中）
②添加任务规则
执行策略：如果在某个时间段服务器宕机，那么这个时间段的任务在服务器恢复之后的执行策略
是否并发：是否需要多个任务间同时执行
③启动任务
观察IDEA控制台即可
2.3系统工具
1.表单构建（前端）
-
允许用户通过拖放等可视化操作创建表单，比如用来收集数据的表格或调查问卷。
-
可以自定义表单的各个部分，比如添加不同的输入项和设置验证规则，无需编写代码。
-
提供了导出数据、导入数据、分享表单和设置权限的功能，方便数据管理和共享。
案例：通过表单构建工具，单独制作一个添加课程的表单页面。
实现步骤：
①制作表单并导出
②复制到前端工程（还要重命名）
③创建动态菜单
2.代码生成
-
自动化工具，可以快速生成项目中常用的代码，如数据库操作类、后端控制器、前端页面等。
-
支持根据数据库的表结构反向生成代码，减少手动编写的工作量。
-
提供三种生成模板：单表、 树表、主子表（一对多），可以生成适用于Spring Boot、MyBatis等流行框架的代码，提高开发效率和代码质量。
-
树表是一种展示层级数据的表格，能展开折叠，清晰呈现父子关系，便于管理。
-
3.系统接口
-
Swagger，能够自动生成 API 的同步在线文档，并提供Web界面进行接口调用和测试。
3.项目结构
3.1后端结构
项目中的配置文件都在ruoyi-admin模块下
模块依赖关系（运行admin就能直间或间接运行所有模块）
小结：
3.2前端结构
3.3表结构
3.4源码阅读
BaseController
Controller继承了BaseController
TableDataInfo
分页查询统一返回对象：表格分页数据对象
AjaxResult（不需要分页）
增删改查统一返回对象：操作消息提醒
BaseEntity
所有实体类默认继承的BaseEntity基类
权限注解
@PreAuthorize 注解是 Spring Security 框架中用来做权限检查的。
它在运行方法前先验证权限，权限够就放行，不够就拦截。
3.5前后端交互
跨域
在前端开发中，跨域是一个常见的问题，特别是在使用Vue框架进行开发时。跨域是指在浏览器中发送的AJAX请求的目标地址与当前页面的地址不在同一个域下，这会导致浏览器的同源策略产生限制，从而阻止了跨域请求的发送。然而，我们可以通过代理服务器来解决这个问题。
代理服务器是位于客户端和目标服务器之间的一台服务器，它接收客户端发送的请求，并将请求转发给目标服务器。通过在代理服务器上进行请求转发，可以绕过浏览器的同源策略限制，从而实现跨域请求。
4.二次开发
4.1模块定制
若依框架修改器
若依框架修改器是一个可以一键修改RuoYi框架包名、项目名等的工具。
资料中已提供，将项目打成压缩包，再双击工具选择项目压缩包直接修改即可：
再用IDEA的open打开即可
如果出现pom.xml变成橙色而运行无异常，可右键pom文件 - git - add
（因为修改的代码是在git的暂存区，而我们push到远程仓库时git读取的是本地仓库，所以需要将暂存区的数据add到本地仓库）
4.2新建业务模块
新建子模块
在sky父工程下（右键maven）创建sky-merchant子模块，在pom.xml中导入核心模块依赖（从admin中复制即可）（就是3.1中的核心模块AOP系统设置什么的）
版本锁定
在RuoYi-Vue父工程pom.xml中进行版本锁定
添加模块依赖
在ruoyi-admin模块pom.xml中添加模块依赖（服务入口添加依赖，服务启动能够调用）
4.3菜品管理
1.代码生成
①准备SQL并导入数据库（右键数据库-run sql script）
②配置代码生成信息（代码生成器）
③下载代码并导入项目
2.升级改造
（1）通义灵码
IDEA中：Settings - plugins - Tong
vsCode中：左边的扩展-tongyi
（2）前端页面改造：
在vscode中，选中代码，右键Tongling，进行代码解释以及使用vue语法在价格前面加上￥
修改之后 Ctrl + s进行保存，然后刷新浏览器即可
（3）图片上传组件
由于之前的图片访问是本地的路径和服务，需要发起请求（拼接前缀http://localhost/dev）才能获取图片，现在我们使用了OSS，图片可直接访问，无需再次访问后端服务（无需拼接前缀），所以前端的图片访问逻辑我们需要修改
-
修改文件位置：src/components/imageUpload/index.vue
-
如果图片路径是以http开头的，则不走后台服务访问，直接访问OSS，之前的不变
1.按住Ctrl+单击（没反应需要下载vue peek插件）
2.定义baseUrl,用于拼接
3.前面有baseUrl和http的都不加前缀
（4）口味文本框改下拉框+联动
（4）页面调整
浏览器标签页icon、标题
找到资料中的logo图标，替换前端项目中的public文件夹，删除原有的favicon.ico（后面加上.bak），把新拷贝过来的logo更名为favicon.ico即可
找到根目录下的index.html文件，把title更换为自己想要的内容即可
系统页面中的logo、标题
找到资料中的logo文件，替换 src/assets/logo/logo.png文件
若依的系统页面标题引用的是开发环境的配置，我们只需要修改开发的环境的VITE_APP_TITLE属性即可
去除源码 & 文档
主题和自定义图标
在目前的前端项目中，已经提供了非常便利的操作方式，可以切换主题的风格
操作：点击右上角的头像，可以找到布局设置
在前端代码中也有对应的操作，更好主题风格文件位置：src/setting.js
在前端代码中也有对应的操作，更好主题风格文件位置：src/setting.js
访问阿里巴巴矢量图库，搜索图标：iconfont-阿里巴巴矢量图标库
将下载好的图标复制到src/assets/icons/svg目录下，就可以给指定菜单设置图标了
登录页面中标题、背景图
登录名称和背景图，我们可以直接找到登录的组件进行修改即可
组件位置：src/views/login.vue
原文地址：https://blog.csdn.net/2302_79400545/article/details/141885803
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！