【项目-Ruoyi】Day1--项目搭建

2024-10-12

notes / ProjectDev notes

字数统计: 8k | 阅读时长≈ 32 分钟

¶写在前面

因为项目的技术栈更改所以紧急转向启动Ruoyi……
‍‌‬‍‌‬‌‌‍‌‍‌‍‬‌‌‍‍‌‌‬⁠⁠‍day01-项目搭建 - 飞书云文档 (feishu.cn)

Day1 RuoyiProject

若伊→属于低代码开发平台的一种

为什么要基于若依框架开发

¶项目简介

¶项目名称：帝可得

帝可得是一个基于物联网概念下的智能售货机运营管理系统

¶概念：物联网

物联网（IoT：Internet of Things）
让各种物品通过互联网连接起来，实现信息的交换和通信
物联网的神奇之处
它能够让这些物品变得更加“聪明”
能够感知周围的环境，并且能够根据情况自动做出反应
物联网将现实物体赋予感知、通信和智能化的能力，为人们提供更加智能化和便利的生活和工作环境
应用场景
智能家居
共享充电桩
智能售货机等

¶概念：智能售货机

物联网技术的一个典型应用

1. 实时监控与管理：
	通过物联网技术，智能售货机能够实现远程监控，管理人员可以通过电脑或手机实时了解售货机的状态，包括商品库存、销售情况等，从而及时做出补货和维护决策
	
2. 智能分析与个性化推荐：
	结合人工智能技术，智能售货机能够分析顾客的购买习惯和偏好，提供个性化的商品推荐，提升顾客的购物体验
	
3. 设备绑定与管理：
	每个智能售货机都与特定的维护人员或服务团队绑定，一旦设备出现问题，相关人员可以迅速响应并解决问题，确保售货机的高效运行
	
4. 线上线下融合：
	智能售货机支持线上线下购物的无缝连接，顾客可以在线上浏览商品信息，然后在售货机上直接购买，或者在售货机上发现感兴趣的商品后，选择在线上下单，这种模式为顾客提供了更加灵活和便捷的购物方式

帝可得项目：一个把物联网技术应用到智能售货机运营管理中的系统
不仅帮助企业更高效地管理售货机，同时也为消费者提供了更加智能和便捷的服务

¶术语：售货机术语

售货机术语

1. 区域管理： 
	为了更高效地进行经营管理，公司将运营范围划分为若干个逻辑区域。这些区域的划分基于业务需求，可能与地理上的行政区域有所区别，以确保更合理的资源分配和更高效的运营管理
	
2. 点位选择： 
	点位指的是智能售货机的具体放置位置。选择点位时，我们会考虑人流量、目标顾客群体、可见度以及便利性等因素，以最大化售货机的使用效率和顾客的购买体验

3. 售货机功能： 
	智能售货机就像是一个自动的小店，里面摆满了各种商品。顾客想要什么，直接在机器上选，然后机器就会把商品送到他们手中，就像是一个自动化的仓库

4. 货道设计：
	售货机里面的货道，你可以想象成超市里的那种货架。每一层都有好几个位置可以放商品，这样就能放很多种不同的商品，而且每一层都能放很多，这样顾客的选择就会更多。

¶售货机角色与功能

1. 管理员：
	负责管理所有的基础数据，比如区域、点位、设备、货道、商品等。管理员还要创建工单，派出员工完成维修或补货，查看订单，分析各种统计报表等等
	
2. 运维人员：
	负责投放新设备、撤除旧设备，以及维修保养，确保售货机时刻处于最佳状态
	
3. 运营人员：
	负责给售货机补充商品，保证顾客总是能买到商品
	
4. 合作商：
	他们是点位的提供者，只需要提供合适的点位，然后就可以坐等收益，享受合作的红利
	
5. 消费者：
	通过小程序或售货机的屏幕端下单购买商品，享受便捷的购物体验。

售货机角色与功能

¶业务流程

1. 平台管理员：
	主要作用有基础数据的管理和创建工单排除员工完成维修或补货
	
2. 运营人员：
	主要作用是处理运营工单业务（补货等操作）
	
3. 运维人员：
	主要作用是处理运维工单业务（设备维修等操作）
	
4. 消费者：
	主要作用是完成在售货机的购物操作

业务流程概览

¶平台管理员

平台管理员1

平台管理员2

上图中的简要流程：
①：平台管理人员登录到系统管理后台系统
②：创建区域数据
③：创建区域下点位数据
④：添加运维/运营人员
⑤：创建售货机信息
⑥：设置售货机点位信息
⑦：创建运维投放工单，由运维人员开始投放设备（安装设备）
⑧：设置售卖的商品信息
⑨：创建运营补货工单，由运营人员开始投放商品信息

¶运维人员

运维人员1

上图中的简要流程：
①：运维人员通过App登录运营系统
②：在App对派送过来的工单进行处理
③：接受工单后在指定的投放点安装售货机
④：拒绝工单该运维人员的工单结束

¶消费者

消费者

上图中的简要流程：
方式一：
①：用户通过售货机二维码进行购买商品
②：扫码后在手机端微信小程序选择商品
③：支付成功后在售货机取货
方式二：
①：用户在售货机上选择商品
②：在选择商品后扫码支付商品的二维码
③：支付成功后在售货机取货

¶产品原型

帝可得 - 产品原型 - 腾讯 CoDesign (qq.com)

¶库表设计

库表设计

一个区域可以有多个点位
一个点位可以有多个售货机
一个售货机有多个货道
多个货道可以放置同一样商品
一个商品类型下有多个商品
一个售货机类型下有多个售货机
一个合作商有多个点位
合作商和区域之间没有关系，因为合作商拥有的多个点位可以分布在不同的区域
每个区域下有多个运维和运营人员，他们来负责这个区域下的设备的运维和运营

¶初始AI

¶概念：AIGC

1
2
3

AI（Artificial Intelligence）：即人工智能，是指通过计算机系统模拟人类思维和行为一种技术

计算机通过机器学习、深度学习等算法，使计算机具备对数据的分析、理解、推理和决策的能力。

AIGC

1	AIGC（AI Generated Content）：AIGC是AI领域的一个应用分支，专注于利用AI技术自动生成内容

AIGC生成内容

1
2
3

而生成这些对应内容就需要AI大模型了和产品

AI大模型：通常指的是具有大量参数的深度学习模型，经过大量数据训练，具备复杂计算能力的人工智能系统，它们能够执行多种高级任务，其中包括内容生成。

AI大模型

常见通用大模型

国家	对话产品	大模型	链接
美国	OpenAI ChatGPT	GPT-3.5、GPT-4	https://chat.openai.com/
美国	Microsoft Copilot	GPT-4 和未知	https://copilot.microsoft.com/
美国	Google Bard	Gemini	https://bard.google.com/
中国	百度文心一言	文心4.0	https://yiyan.baidu.com/
中国	讯飞星火	星火4.0	https://xinghuo.xfyun.cn/
中国	智谱清言	GLM-4	https://chatglm.cn/
中国	月之暗面 Kimi Chat	Moonshot	https://kimi.moonshot.cn/
中国	MiniMax星野	abab6	https://www.xingyeai.com/
中国	通义干问	Qwen-Max	https://tongyi.aliyun.com/

¶提示工程

提示（Prompt）是对大模型提出的问题
学习提示词工程的必要性：
- 在与AI交流时，直接提问可能得不到满意的答案
- 但换一种方式提问，或者提供一些额外的上下文信息，AI的表现就会大大提升

¶what is 提示工程

提示工程（Prompt Engineering）也被称为上下文提示
涉及到设计和优化输入文本，即Prompt，来引导AI模型生成预期的输出

¶组成

==角色==：给 AI 定义一个最匹配任务的角色
比如：「你是一位软件工程师」「你是一位小学老师」
==指示==：对任务进行描述
上下文：给出与任务相关的其它背景信息（尤其在多轮交互中）
例子：必要时给出举例
[实践证明其对输出正确性有帮助]
输入：任务的输入信息；在提示词中明确的标识出输入
输出：输出的格式描述，以便后继模块自动解析模型的输出结果，比如（JSON、Java）

先定义角色
其实就是在开头把问题域收窄，减少二义性

¶举例

角色：你是一位专业的博客作者。

指示：撰写一篇关于最新AI技术发展的文章。

上下文：文章应该涵盖AI技术的当前状态和未来趋势。

例子：可以引用最近的AI技术突破和行业专家的见解。

输入：当前AI技术的相关信息和数据。

输出：一篇结构清晰、观点鲜明的文章草稿。

角色：你是一位资深的Java开发工程师。

指示：编写一个Java函数，该函数接收两个整数参数，并返回它们的和。

上下文：这个函数将被用于一个简单的数学应用程序，该程序帮助学生练习基本的算术运算。

例子：如果你调用函数 `addNumbers(3, 5)`，它应该返回 `8`。

输入：两个整数参数，分别为 `int a` 和 `int b`。

输出：返回这两个整数的和，类型为 `int`。

¶常见的编程相关的Prompt

¶表结构

你是一个软件工程师，帮我生成MySQL的表结构
需求如下：
    1，区域表，表名tb_region，字段有主键id、区域名称
    2，合作商表，表名tb_partner，字段有主键id、合作商名称、联系人、联系电话、分成比例（int类型）、账号、密码
    3，点位表，表名tb_node，字段有主键id、点位名称、详细地址、商圈类型（int类型）
其他要求：
    1，每张表中都有创建时间(create_time)、修改时间(date_time)、创建人(create_by)、修改人(update_by)、备注(remark)这些字段
    2，每张表的主键都是自增的
    3，区域与点位是一对多的关系，合作商与点位是一对多的关系，请用字段表示出来，并建立外键约束
    4，请为所有字段都添加上comment
    5，帮我给生成的表中插入一些北京城市相关区域、点位、合作商的测试数据

¶生成数据库说明文档

你是一个软件工程师，现在要根据数据库的sql脚本，编写数据库说明文档，sql脚本如下：
CREATE TABLE `tb_region` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `region_name` VARCHAR(255) NOT NULL COMMENT '区域名称',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='区域表';
CREATE TABLE `tb_partner` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `partner_name` VARCHAR(255) NOT NULL COMMENT '合作商名称',
  `contact_person` VARCHAR(64) COMMENT '联系人',
  `contact_phone` VARCHAR(15) COMMENT '联系电话',
  `profit_ratio` INT COMMENT '分成比例',
  `account` VARCHAR(64) COMMENT '账号',
  `password` VARCHAR(64) COMMENT '密码',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='合作商表';
CREATE TABLE `tb_node` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `node_name` VARCHAR(255) NOT NULL COMMENT '点位名称',
  `address` VARCHAR(255) NOT NULL COMMENT '详细地址',
  `business_type` INT COMMENT '商圈类型',
  `region_id` INT COMMENT '区域ID',
  `partner_id` INT COMMENT '合作商ID',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注',
  FOREIGN KEY (`region_id`) REFERENCES `tb_region`(`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  FOREIGN KEY (`partner_id`) REFERENCES `tb_partner`(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='点位表';

输出要求是：
    1，每个表以及每个表的字段都要详细说明，包括，字段名称、类型、作用
    2，使用markdown的输出格式，字段的描述需要使用表格展示
    3，如果表之间有关系，需要描述清楚表之间的关系

¶生成代码

代码生成算是比较常规的方案，用的也比较多，分为了几种情况
给出表生成代码（项目中常见）
- 给出表结构的ddl，可以输出这个表的增删改查的所有代码
- 给出表结构的dll，可以输出增删改查的接口文档
补全代码
- 例1-给出实体类，帮助编写getter、setter、toString、构造方法等等
- 例2-给出一个controller，帮助编写swagger注解等
提取结构（无含金量，费时间的编程）
- 例1-根据接口文档提取dto类或者vo类

¶生成代码流程图

有一些比较复杂的业务流程，往往需要画出流程图，可以使用ai协助画流程图

你是一个软件工程师，为了方便理解代码执行流程，需要给出代码执行的流程图，代码如下：
    // 创建工单
    @Transactional
    @Override
    public int insertTaskDto(TaskDto taskDto) {
    //1. 查询售货机是否存在
    VendingMachine vm = vendingMachineService.selectVendingMachineByInnerCode(taskDto.getInnerCode());
    if (vm == null) {
        throw new ServiceException("设备不存在");
    }
    //2. 校验售货机状态与工单类型是否相符
    checkCreateTask(vm.getVmStatus(), taskDto.getProductTypeId());
    //3. 校验这台设备是否有未完成的同类型工单，如果存在则不能创建
    hasTask(taskDto.getInnerCode(), taskDto.getProductTypeId());
    //4. 校验员工是否存在
    Emp emp = empService.selectEmpById(taskDto.getUserId());
    if (emp == null) {
        throw new ServiceException("员工不存在");
    }
    // 5. 校验非同区域下的工作人员不能接受工单
    if (emp.getRegionId() != vm.getRegionId()) {
        throw new ServiceException("非同区域下的工作人员不能接受工单");
    }
    //6. 保存工单信息
    Task task = new Task();
    BeanUtil.copyProperties(taskDto, task);// 属性赋值
    task.setCreateTime(DateUtils.getNowDate());// 创建时间
    task.setTaskCode(generateTaskCode());// 工单编号 202405150001
    task.setTaskStatus(DkdContants.TASK_STATUS_CREATE);// 创建工单
    task.setAddr(vm.getAddr());
    task.setRegionId(vm.getRegionId());
    task.setUserName(emp.getUserName());
    int taskResult = taskMapper.insertTask(task);
    //7. 如果是补货工单，向工单明细表插入记录
    if (task.getProductTypeId() == DkdContants.TASK_TYPE_SUPPLY) {
        if (CollUtil.isEmpty(taskDto.getDetails())) {
            throw new ServiceException("补货工单明细不能为空");
        }
        List<TaskDetails> taskDetailsList = taskDto.getDetails().stream().map(details -> {
            TaskDetails taskDetails = BeanUtil.copyProperties(details, TaskDetails.class);
            taskDetails.setTaskId(task.getTaskId());
            return taskDetails;
        }).collect(Collectors.toList());
        taskDetailsService.insertBatch(taskDetailsList);
    }

    return taskResult;
}

输出：请使用mermaid语言来描述这个方法的流程

¶若伊搭建

¶若伊版本

官网地址：https://ruoyi.vip/
若依为满足多样化的开发需求，提供了多种各具特色的框架版本

若伊的多个框架版本

前后端不分离版本RuoYi（SpringBoot+Bootstrap）
已out
前后端分离版RuoYi-Vue（SpringBoot+Vue）
本项目使用版本
微服务版本RuoYi-Cloud（SpringCloud+Vue）
移动端版RuoYi-App（Uniapp+Vue）

1	前三个都提供了前后端的项目，移动版可以适配RuoYi-Vue和RuoYi-Cloud

若依框架因其强大的功能和灵活性，吸引了众多第三方开发者基于其核心架构进行扩展和优化，从而形成了丰富的生态系统
这些扩展不仅增强了若依框架的功能性，也满足了开发者在不同场景下的具体需求。例如：
- RuoYi-Vue3（前端升级Vue3 Element Plus Vite）
  - https://github.com/yangzongzhuan/RuoYi-Vue3
- RuoYi-Vue-Plus（后端集成Mybatis-Plus、Hutool、OSS存储、分布式锁等组件）
  - https://gitee.com/dromara/RuoYi-Vue-Plus

¶RuoYi-Vue

RuoYi-Vue版本，采用了前后端分离的单体架构设计：
软件环境：JDK、MySQL 、Redis 、Maven、Node
技术选型：Spring Boot、Spring Security、MyBatis、Jwt、Vue3、Element-Plus
官方地址：https://gitee.com/y_project/RuoYi-Vue
扩展地址：https://gitee.com/ys-gitee/RuoYi-Vue3

官方推荐	优化升级
JDK >= 1.8 (推荐1.8版本)	升级为JDK 11
Mysql >= 5.7.0 (推荐5.7版本)	升级为MySQL 8（虚拟机已提供）
Redis >= 3.0	升级为Redis 6（虚拟机已提供）
Maven >= 3.0	升级为Maven 3.6
Node >= 12	前端代码由vue2升级为vue3，需要Node 16及以上的版本

¶准备工作

一般企业中服务器都是部署了一些项目中公用的基础环境，比如MySQL、Redis等
这些服务都是部署在linux服务器中，这些服务可能是部署在公司的一个机房中，也有可能是云服务器（中小企业居多）
为了还原更真实的企业环境，可以在VM Ware软件中来部署linux服务器，当作开发中的公用服务器，具体的VM Ware的服务配置

¶挂载虚拟机

找到资料中的虚拟机镜像文件夹，双击CentOS 64位.vmx即可挂载到虚拟机中（需提前安装虚拟机）

虚拟机镜像文件

¶设置虚拟网络

此虚拟机已设置静态的ip地址，目前网段就是192.168.200.0
为了减少环境网络的配置，可以手动设置虚拟机中NAT网卡的网段
设置步骤：
①：找到虚拟机的编辑按钮，打开虚拟网络编辑器
②：选中NAT模式的网卡，在下面的子网IP的输入框中手动设置为：192.168.200.0,确定保存即可
③：启动服务器（网络设置完成后再启动服务器）

设置虚拟网络1

设置虚拟网络2

1	用户名：root，密码：123456

¶客户端链接

此虚拟机的静态ip为：192.168.200.128
防火墙已关闭，可以直接使用客户端链接
以Xterm工具为例：

客户端链接1

客户端链接2

¶Docker容器

docker ps
docker ps 是 Docker 命令行工具中的一个常用命令，用于列出当前正在运行的容器
这个命令会显示所有处于运行状态的容器的相关信息，如容器ID、镜像名称、创建时间、状态、端口映射等
¶常用选项
- -a 或 --all：显示所有容器（包括停止的容器）
- -q 或 --quiet：只显示容器ID
- -n：显示最近创建的N个容器
- -l 或 --latest：显示最新创建的容器
- -s 或 --size：显示每个容器的总文件大小
- -f 或 --filter：根据提供的条件过滤输出结果

[root@localhost ~]# docker ps
CONTAINER ID        IMAGE                                      COMMAND                  CREATED             STATUS                       PORTS                                                                                                                                                                         NAMES
f12347898e6e        emqx/emqx:v4.1.0                           "/usr/bin/docker-ent…"   3 years ago         Up About an hour             4369/tcp, 5369/tcp, 0.0.0.0:1883->1883/tcp, 0.0.0.0:8081->8081/tcp, 0.0.0.0:8083-8084->8083-8084/tcp, 6369/tcp, 0.0.0.0:8883->8883/tcp, 0.0.0.0:18083->18083/tcp, 11883/tcp   emqx
5867cc8c63c4        minio/minio:RELEASE.2020-08-26T00-00-49Z   "/usr/bin/docker-ent…"   4 years ago         Up About an hour (healthy)   0.0.0.0:9001->9000/tcp                                                                                                                                                        minio
d207089d51da        redis:6.0.5                                "docker-entrypoint.s…"   4 years ago         Up About an hour             0.0.0.0:6379->6379/tcp                                                                                                                                                        redis
5f82a77a2a07        mysql:8.0.20                               "docker-entrypoint.s…"   4 years ago         Up About an hour             0.0.0.0:3306->3306/tcp, 33060/tcp   
1
2
3

- 进入正在运行的MySQL容器


docker exec -it 5f82a77a2a07 bash
1
2
3

- 启动MySQL客户端


mysql -u root -p
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

  

- 在目前提供的虚拟机环境中已经使用`docker`安装了对应的基础环境，容器说明及端口如下：

| 容器名称 | 地址                  | 说明                       |
| -------- | --------------------- | -------------------------- |
| mysql    | 192.168.200.128:3306  | mysql数据库，密码：root123 |
| redis    | 192.168.200.128:6379  | redis缓存服务器            |
| minio    | 192.168.200.128:9001  | 分布式文件系统             |
| EMQ      | 192.168.200.128:18083 | 消息中间件                 |

> 今天的项目的运行中，需要使用到`MySQL`和`Redis`





### 运行后端项目

#### 代码下载和打开

- 代码下载地址：[https://gitee.com/y_project/RuoYi-Vue ](https://gitee.com/y_project/RuoYi-Vue)

- 下载到本地之后，使用`idea`打开即可，等待环境检查（主要是`Maven`下载项目依赖）

![image-20241012174217092](image-20241012174217092.png)



#### MySQL配置

- 数据库使用MySQL8

  - 服务器地址：192.168.200.128
  - 默认的用户名：root
  - 默认的密码：root123

  

  

  1、创建数据库`create schema dkd;`

  2、执行下图的`sql`脚本文件，完成导入

![执行下图的sql脚本文件，完成导入](image-20241012174426080.png)

			3、 `sql`执行成功以后，修改数据库连接，找到`ruoyi-admin`模块中的`resources`目录下的`application-druid.yml`

```YAML
# 数据源配置
spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.cj.jdbc.Driver
        druid:
            # 主库数据源
            master:
                url: jdbc:mysql://192.168.200.128:3306/dkd?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                username: root
                password: root123

¶Redis配置

找到ruoyi-admin模块中的resources目录下的application.yml，如下配置

# Spring配置
spring:
  redis:
    # 地址
    host: 192.168.200.128
    # 端口，默认为6379
    port: 6379
    # 数据库索引
    database: 0
    # 密码
    password: 
    # 连接超时时间
    timeout: 10s
    lettuce:
      pool:
        # 连接池中的最小空闲连接
        min-idle: 0
        # 连接池中的最大空闲连接
        max-idle: 8
        # 连接池的最大数据库连接数
        max-active: 8
        # #连接池最大阻塞等待时间（使用负值表示没有限制）
        max-wait: -1ms

¶运行项目

找到ruoyi-admin模块中的运行com.ruoyi.RuoYiApplication.java，出现如下图表示启动成功

(♥◠‿◠)ﾉﾞ  若依启动成功   ლ(´ڡ`ლ)ﾞ  
 .-------.       ____     __        
 |  _ _   \      \   \   /  /    
 | ( ' )  |       \  _. /  '       
 |(_ o _) /        _( )_ .'         
 | (_,_).' __  ___(_ o _)'          
 |  |\ \  |  ||   |(_,_)'         
 |  | \ `'   /|   `-'  /           
 |  |  \    /  \      /           
 ''-'   `'-'    `-..-'

¶运行前端项目

¶前提

官方推荐的前端项目，使用的是vue3，需要使用node 16版本以上

¶代码下载

目前下载的代码中，其中ruoyi-ui这个目录就是前端的代码，不过这个代码是基于vue2开发的

项目结构图

如果需要使用vue2为基础开发语言的前端，就可以使用上述的代码，运行方式跟下方描述相同

需要使用基于vue3开发的代码，通过Git进行克隆下载，解压到工作空间即可
进入开发目录下，使用vscode命令code打开项目

# 克隆vue3项目
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git

# 通过vscode打开项目
code ./RuoYi-Vue3

¶项目运行

1	cd /d D:\dkd\Ruoyi-Vue3

# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev

启动成功之后的效果

D:\workspace\bk\v5\RuoYi-Vue3>npm run dev

> ruoyi@3.8.7 dev
> vite
  VITE v5.0.4  ready in 13862 ms

  ➜  Local:   http://localhost:80/
  ➜  Network: http://172.16.17.64:80/
  ➜  Network: http://192.168.112.1:80/
  ➜  Network: http://192.168.200.1:80/
  ➜  press h + enter to show help

启动前后端成功后，可以访问页面，地址：http://localhost:80/

成功启动之后的访问结果

验证码出现成功，表示前后端都正常启动

¶前后端项目结构

深入熟悉若依这个框架，主要从代码的层面来熟悉项目
- 前后端的代码结构
- 阅读部分代码，熟悉开发套路和规范
- 代码共包含了两部分内容
  一是后端的代码结构及配置
  二是前端的代码结构及执行流程

¶后端代码

¶代码结构

代码结构

com.ruoyi
├── ruoyi-admin      // 后台服务模块
│       └── web                           // 内置功能的表现层
│       └── RuoYiApplication              // 若依项目启动类    
├── ruoyi-common     // 通用工具模块
│       └── annotation                    // 自定义注解
│       └── config                        // 全局配置
│       └── constant                      // 通用常量
│       └── core                          // 核心控制
│       └── enums                         // 通用枚举
│       └── exception                     // 通用异常
│       └── filter                        // 过滤器处理
│       └── utils                         // 通用类处理
│       └── xss                           // 自定义xss校验
├── ruoyi-framework  // 框架核心模块
│       └── aspectj                       // AOP配置
│       └── config                        // 系统配置
│       └── datasource                    // 多数据源配置 
│       └── interceptor                   // 拦截器
│       └── manager                       // 异步处理
│       └── security                      // 权限控制
│       └── web                           // 前端控制
├── ruoyi-generator  // 代码生成模块（可移除）              
├── ruoyi-quartz     // 定时任务模块（可移除）          
├── ruoyi-system     // 系统代码模块
│       └── domain                        // 系统代码的实体类
│       └── mapper                        // 系统代码的持久层
│       └── service                       // 系统代码的业务层

¶模块依赖关系

模块依赖关系

¶项目中配置

项目中的配置文件都在ruoyi-admin模块下

项目中的配置文件

i18n：国际化处理
META-INF：存储了项目的元信息（描述数据的数据），无需修改
mybatis：mybatis相关的配置信息
application.yml：项目中的核心配置
application-druid.yml：数据库连接配置
banner.txt：默认的banner图标信息，项目启动，控制台打印显示
logback.xml：日志配置

最主要的配置文件：application.yml

# 项目相关配置
ruoyi:
  # 名称
  name: RuoYi
  # 版本
  version: 3.8.8
  # 版权年份
  copyrightYear: 2024
  # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
  profile: D:/ruoyi/uploadPath
  # 获取ip地址开关
  addressEnabled: false
  # 验证码类型 math 数字计算 char 字符验证
  captchaType: math

# 开发环境配置
server:
  # 服务器的HTTP端口，默认为8080
  port: 8080
  servlet:
    # 应用的访问路径
    context-path: /
  tomcat:
    # tomcat的URI编码
    uri-encoding: UTF-8
    # 连接数满后的排队数，默认为100
    accept-count: 1000
    threads:
      # tomcat最大线程数，默认为200
      max: 800
      # Tomcat启动初始化的线程数，默认值10
      min-spare: 100

# 日志配置
logging:
  level:
    com.ruoyi: debug
    org.springframework: warn

# 用户配置
user:
  password:
    # 密码最大错误次数
    maxRetryCount: 5
    # 密码锁定时间（默认10分钟）
    lockTime: 10

# Spring配置
spring:
  # 资源信息
  messages:
    # 国际化资源文件路径
    basename: i18n/messages
  profiles:
    active: druid
  # 文件上传
  servlet:
    multipart:
      # 单个文件大小
      max-file-size: 10MB
      # 设置总上传的文件大小
      max-request-size: 20MB
  # 服务模块
  devtools:
    restart:
      # 热部署开关
      enabled: true
  # redis 配置
  redis:
    # 地址
    host: 192.168.200.128
    # 端口，默认为6379
    port: 6379
    # 数据库索引
    database: 0
    # 密码
    password:
    # 连接超时时间
    timeout: 10s
    lettuce:
      pool:
        # 连接池中的最小空闲连接
        min-idle: 0
        # 连接池中的最大空闲连接
        max-idle: 8
        # 连接池的最大数据库连接数
        max-active: 8
        # #连接池最大阻塞等待时间（使用负值表示没有限制）
        max-wait: -1ms

# token配置
token:
  # 令牌自定义标识
  header: Authorization
  # 令牌密钥
  secret: abcdefghijklmnopqrstuvwxyz
  # 令牌有效期（默认30分钟）
  expireTime: 30

# MyBatis配置
mybatis:
  # 搜索指定包别名
  typeAliasesPackage: com.ruoyi.**.domain
  # 配置mapper的扫描，找到所有的mapper.xml映射文件
  mapperLocations: classpath*:mapper/**/*Mapper.xml
  # 加载全局的配置文件
  configLocation: classpath:mybatis/mybatis-config.xml

# PageHelper分页插件
pagehelper:
  helperDialect: mysql
  supportMethodsArguments: true
  params: count=countSql

# Swagger配置
swagger:
  # 是否开启swagger
  enabled: true
  # 请求前缀
  pathMapping: /dev-api

# 防止XSS攻击
xss:
  # 过滤开关
  enabled: true
  # 排除链接（多个用逗号分隔）
  excludes: /system/notice
  # 匹配链接
  urlPatterns: /system/*,/monitor/*,/tool/*

¶表结构

RuoYi项目的表结构

¶前端代码

¶代码结构

前端代码结构

ruoyi-vue3
├── bin                        // 执行脚本
├── html                       // IE低版本提示页
├── node_modules               // 第三方依赖库
├── public                     // 公共资源
│   ├── favicon.ico            // favicon图标
├── src                        // 源代码
│   ├── api                    // 所有请求,后台的api接口，【后期开发重点目录】
│   ├── assets                 // 静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── plugins                // 通用插件
│   ├── router                 // 路由配置
│   ├── store                  // 状态管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view，存储vue组件，【后期开发重点目录】
│   ├── App.vue                // 入口组件
│   ├── main.js                // 入口文件
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── vite                       // 构建工具
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .gitignore                 // git 忽略项
├── index.html                 // 入口页面
├── package.json               // 项目配置文件（相当于pom.xml）
└── vue.config.js              // Vue项目的配置信息（相当于application.yml）

¶核心配置

在开发阶段，配置的修改是较少的，主要关注一个配置文件即可—>vite.config.js

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    // vite 相关配置
    server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://localhost:8080',
          // target: 'https://api.wzs.pub/mock/13',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      }
    },
    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') 				   {
                  atRule.remove();
                }
              }
            }
          }
        ]
      }
    }
  }
})

别名
- ~ 代表 ./
- @代表src目录
前端服务端口—> port: 80
后端服务地址—> target: '``http://localhost:8080``'
路径重写—> rewrite: (p) => p.replace(/^\/dev-api/, '')

前端代码核心配置

¶业务定制改造

¶包名全局替换

后端代码包名全局替换
- 由com.ruoyi 改为 com.dkd
- 参考链接：https://gitee.com/lpf_project/RuoYi-MT/releases
- 可以使用资料中提供的包名修改器

包名全局替换

找到对应的目录，使用idea中重新打开后的效果

包名全局替换后的效果

修改JDK的版本为11

修改JDK版本

¶新建业务模块

¶新建子模块

在dkd父工程下创建dkd-manage子模块，在pom.xml中导入框架核心模块依赖

导入框架核心模块依赖

¶版本锁定

在dkd父工程pom.xml中进行版本锁定

版本锁定

¶添加模块依赖

在dkd-admin模块pom.xml中添加模块依赖

添加模块依赖

¶定制化UI

如果使用若依框架项目做为脚手架，must需要在页面显示中，换上符合自己公司或者项目的标识
- 浏览器标签页logo标识、标题
- 系统页面中的logo标识、标题
- 去除源码地址 & 文档地址 & 若依官网
- 主题风格和菜单图标
- 登录名称及背景图

修改1

修改2

¶浏览器标签页logo、标题

找到资料中的logo图标，替换前端项目中的public文件夹，删除原有的favicon.ico，把新拷贝过来的logo更名为favicon.ico即可

更换图标

找到根目录下的index.html文件，把title更换为自己想要的内容即可

更换网页标题

¶系统页面中的logo、标题

找到资料中的logo文件，替换 src/assets/logo/logo.png文件

更换系统logo

若依的系统页面标题引用的是开发环境的配置，只需要修改开发的环境的VITE_APP_TITLE属性即可

修改系统标题

扩展阅读：
关于环境的文件一般有三个
.env.development 开发环境的配置，默认的环境
.env.production 生产环境
.env.staging 测试环境
在打包或启动项目的时候，可以加参数来使用不同的环境，需要参考package.json中的配置

¶去除源码地址 & 文档地址 & 若依官网

使用VS Code全局搜索功能，去除右上角的源码地址和文档地址

去除源码地址和文档地址

利用菜单功能，去除若依官网菜单项目

去除菜单

¶主题风格和菜单图标

在目前的前端项目中，已经提供了非常便利的操作方式，可以切换主题的风格
操作：点击右上角的头像，可以找到**布局设置，**如下操作

修改布局设置

更改主题风格文件位置：src/setting.js

更改主题风格

访问阿里巴巴矢量图库，搜索图标

阿里巴巴矢量图库

将下载好的图标复制到src/assets/icons/svg目录下，就可以给指定菜单设置图标了

给指定菜单设置图标

¶登录名称及背景图

登录名称和背景图，可以直接找到登录的组件进行修改即可
组件位置：src/views/login.vue

修改登录名称和背景图1

修改登录名称和背景图2

¶写在前面

Day1 RuoyiProject

¶项目简介

¶项目名称：帝可得

¶概念：物联网

¶概念：智能售货机

¶术语：售货机术语

¶售货机角色与功能

¶业务流程

¶平台管理员

¶运维人员

¶消费者

¶产品原型

¶库表设计

¶初始AI

¶概念：AIGC

¶提示工程

¶what is 提示工程

¶组成

¶举例

¶常见的编程相关的Prompt

¶表结构

¶生成数据库说明文档

¶生成代码

¶生成代码流程图

¶若伊搭建

¶若伊版本

¶RuoYi-Vue

¶准备工作

¶挂载虚拟机

¶设置虚拟网络

¶客户端链接

¶Docker容器

¶常用选项

¶Redis配置

¶运行项目

¶运行前端项目

¶前提

¶代码下载

¶项目运行

¶前后端项目结构

¶后端代码

¶代码结构

¶模块依赖关系

¶项目中配置

¶表结构

¶前端代码

¶代码结构

¶核心配置

¶业务定制改造

¶包名全局替换

¶新建业务模块

¶新建子模块

¶版本锁定

¶添加模块依赖

¶定制化UI

¶浏览器标签页logo、标题

¶系统页面中的logo、标题

¶去除源码地址 & 文档地址 & 若依官网

¶主题风格和菜单图标

¶登录名称及背景图