黑马Java跟学.最新AI+若依框架项目开辟(一)

前瞻

为什么学习若依？

AI局限性

除了第一步：情况搭建AI做不了之外，剩下都能AI实现
若依是什么?

创新项目开辟新方案

AI + 若依

课程安排

前置知识

一、若依搭建

若依版本

官方

若依官方针对差别开辟需求提供了多个版本的框架，每个版本都有其独特的特点和实用场景：

• 前后端混合版本：RuoYi联合了SpringBoot和Bootstrap的前端开辟框架，适合快速构建传统的Web应用步伐，其中前端和后端代码在同一项目中协同工作。
  
• 前后端分离版本：RuoYi-Vue利用SpringBoot作为后端开辟框架，与Vue.js联合，实现了前后端分离的开辟模式。这种架构有助于提高开辟效率，前后端可以独立开辟和部署，更适合现代化的Web应用开辟。
  
• 微服务版本：RuoYi-Cloud基于Spring Cloud & Alibaba微服务架构，为构建大型分布式系统提供了完整的办理方案。它支持服务发现、配置管理、负载均衡等微服务特性，适合需要高可扩展性和高可用性的企业级应用。
  
• 移动端版本：RuoYi-App采用Uniapp进行开辟，联合了Vue.js的上风，可以实现跨平台的移动端应用开辟。一次编写，多端运行的本领使得它成为开辟iOS和Android应用的抱负选择。
  

这些版本的框架为开辟者提供了多样化的选择，无论是传统的Web应用、现代化的前后端分离应用，还是复杂的微服务架构和跨平台的移动端应用，都能找到合适的若依框架版本来满意开辟需求。
非官方

若依框架因其强盛的功能和机动性，吸引了众多第三方开辟者基于其核心架构进行扩展和优化，从而形成了丰富的生态系统。
这些扩展不仅增强了若依框架的功能性，也满意了开辟者在差别场景下的具体需求。比方：

• 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

lRuoYi-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.8JDK 11Mysql >= 5.7.0MySQL 8Redis >= 3.0Redis 5（Win）Maven >= 3.0Maven 3.6Node >= 12Node 16（Vue3）  为了确保教学活动的顺利进行，发起所有学生在开始前安装并配置好这些软件的版本。
  如果学生在安装或配置过程中遇到问题，可以联系播妞获取资助，播妞将提供具体的安装文档和安装包，
  运行后端项目

初始化项目

Git下载

通过idea克隆若依源码，仓库地点：https://gitee.com/y_project/RuoYi-Vue.git

Maven构建

使用idea打开项目后，等候情况查抄（主要是Maven下载项目依赖）

MySQL相干

导入sql

1、创建数据库create schema ry-vue;
2、实行下图的sql脚本文件，完成导入

3、导入后ry-vue库内置30张表

配置信息

在ruoyi-admin模块下，编辑resources目录下的application-druid.yml，修改数据库连接

1. # 数据源配置
2. spring:
3.     datasource:
4.         type: com.alibaba.druid.pool.DruidDataSource
5.         driverClassName: com.mysql.cj.jdbc.Driver
6.         druid:
7.             # 主库数据源
8.             master:
9.                 url: 数据库地址
10.                 username: 数据库账号
11.                 password: 数据库密码

复制代码

Redis相干

启动

在redis解压目录下，实行redis-server.exe redis.windows.conf启动

配置信息

在ruoyi-admin模块下，resources目录下的application.yml，可以设置redis暗码等相干信息

项目运行

在ruoyi-admin模块下，运行com.ruoyi.RuoYiApplication.java，出现如下图表示启动乐成

后端运行乐成可以通过([http://localhost:8080 )访问，但是不会出现静态页面，可以继续参考下面步骤部署前端，然后通过前端地点来访问。

运行前端项目

初始化项目

进入开辟目录下，使用vscode下令code 打开项目

1. # 克隆vue3项目
2. git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git
4. # 通过vscode打开项目
5. code ./RuoYi-Vue3

复制代码

项目运行

在vscode终端中输入以下下令：

1. # 安装依赖
2. npm install
4. # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
5. npm install --registry=https://registry.npmmirror.com
7. # 启动服务
8. npm run dev

复制代码

打开浏览器，输入：([http://localhost:80) 默认账户/暗码 admin/admin123）若能精确展示登录页面，并能乐成登录，菜单及页面展示正常，则表明情况搭建乐成

二、入门案例

在若依项目乐成搭建之后，深入了解其代码生成器功能是掌握框架的重要一环。
接下来，我们将利用若依框架的代码生成器实现CRM系统中的课程管理功能，这将使我们能够实际体验并掌握如何在项目中有效使用这一工具。
功能需求

   实现CRM系统中的课程管理功能，涵盖增加、删除、修改和查询课程信息的完整前后端代码。
  原型地点：https://app.mockplus.cn/run/prototype/_lwaPYSV9Ue6/byFT7QUzmCqJ/2AadzZnerRIDo?cps=collapse&isShare=true
  

步骤分析

1、准备课程表布局和数据sql文件，导入到数据库中
2、登录系统（系统工具 -> 代码生成 -> 导入课程表）
3、代码生成列表中找到课程表（可预览、编辑、同步、删除生成配置）
4、点击生成代码会得到一个ruoyi.zip
5、实行sql文件导入菜单，按照包内目录布局复制到本身的项目中即可
代码生成

提供课程表

准备课程表布局和数据sql文件，导入到数据库中

系统导入

登录系统（系统工具 -> 代码生成 -> 导入课程表）

配置代码

代码生成列表中找到课程表（可预览、编辑、同步、删除生成配置）

点击生成

点击生成代码，得到一个ruoyi.zip

解压后得到：后端代码、前端代码、菜单sql

代码导入

导入课程菜单

实行sql脚本，导入菜单数据

导入后端代码

将生成的后端代码和mappep文件，导入ruoyi-admin模块中

   注意：如果导入后的代码重启后没见效，可以通过maven先clean再启动
  导入前端代码

将生成的前端代码，导入ruoyi-ui模块中

访问测试

代码生成器默认生成的课程管理模块在系统工具菜单下，打开测试CRUD功能

三、功能详解

我们将对若依的通用功能进行详解。本章内容分为三个重点部门：
系统管理

权限系统

演示

若依提供了企业级通用权限系统，我们这里拿CRM系统先给各人演示下：
地点：https://huike-crm.itheima.net/

• demo账号（超级管理员），可以检察所有功能菜单
  
• zhangsan账号（市场专员），可以检察线索管理菜单
  
• yueyue账号（贩卖专员），可以检察商机、条约等菜单
  

RBAC

lRBAC（基于脚色的访问控制）是一种广泛使用的访问控制模型，通过脚色来分配和管理用户的菜单权限。

表关系

案例

创建新用户小智并关联课研人员脚色，仅限课程管理和统计分析菜单访问。

实现步骤：
①创建菜单
②创建脚色，并分配权限
③创建用户，并关联脚色

数据字典

介绍

若依内置的数据字典，用于维护系统中常见的静态数据。比方：性别、状态…

功能包罗：字典范例管理、字典数据管理

表关系

案例

将课程管理的学科字段改为数据字典维护。

实现步骤：
①添加字典范例和数据

②修改代码生成信息

③下载代码，导入前端

参数设置

参数设置：对系统中的参数进行动态维护。

关闭登录验证码

通知公告

RuoYi的通知公告功能提供了一个方便的方式来发布和管理通知、公告和新闻等信息。管理员可以创建、编辑和删除通知（支持富文本编辑和附件上传）。
系统将信息发送给指定的用户、部门或脚色。用户可以通过系统界面或电子邮件接收通知，从而确保信息及时传达（这部门需要本身开辟）。
通知公告功能有助于组织内部沟通和信息转达，提高了工作效率和信息共享。

日记管理

登录日记

• 记录用户的登录信息，包罗登录时间和地点（IP地点）。
  
• 资助管理员监控登录举动，及时发现任何可疑的登录实验。
  
• 同样提供搜刮和筛选功能，方便查找特定用户的登录历史。
  

操作日记

• 记录用户在系统中的所有操作，如检察、修改数据等。
  
• 资助管理员查抄谁做了什么，以及何时做的，确保数据准确无误。
  
• 可以快速搜刮和找到特定的操作记录，便于管理和检察。
  

系统监控

监控相干

若依提供了一些列强盛的监控工具，能够资助开辟者和运维快速了解应用步伐的性能状态。

• 在线用户：
  
  
  
  • 管理员可以看到当前谁在系统里，他们什么时候登录的，从哪里登录的，属于哪个部门。
    
  • 如果有人没权限还赖着不走，管理员可以一键让他们下线，保证系统的安全。
    
  
  
• 数据监控：
  
  
  
  • 管理员可以实时看到系统的各项指标，好比资源使用情况，数据库状态等。
    
  • 通过图表可以直观地看出系统是否康健，如果出现问题，系统会发出警报。
    
  
  
• 服务监控：
  
  
  
  • 管理员可以监控系统中各个服务是否正常运行，以及它们的性能指标。
    
  • 如果服务出现问题，系统会立刻通知管理员，并通过仪表板展示，方便管理员快速了解情况。
    
  
  
• 缓存监控：
  
  
  
  • 管理员可以监控系统的缓存使用情况，好比缓存是否经常被用到，缓存的大小等。
    
  • 系统还可以自动清理缓存，保持数据的奇怪度，如果缓存有问题，也会发出警报。
    
  
  

定时使命

介绍

若依为定时使命功能提供方便友爱的web界面，实现动态管理使命。

案例

每间隔5秒，控制台输出系统时间。

实现步骤：
①创建使命类

②添加使命规则

• 使命名称：自界说，如：定时查询使命状态
  
• 使命分组：根据字典sys_job_group配置，可自行进行配置
  
• 调用目标字符串：设置背景使命方法名称参数
  
• 实行表达式：可查询官方cron表达式介绍
  
• 实行策略：定时使命自界说实行策略
  
• 并发实行：是否需要多个使命间同时实行
  

③启动使命

系统工具

表单构建

介绍

• 允许用户通过拖放等可视化操作创建表单，好比用来网络数据的表格或调盘问卷。
  
• 可以自界说表单的各个部门，好比添加差别的输入项和设置验证规则，无需编写代码。
  
• 提供了导出数据、导入数据、分享表单和设置权限的功能，方便数据管理和共享。
  

案例

通过表单构建工具，单独制作一个添加课程的表单页面。

实现步骤：
①制作表单并导出

②复制到前端工程

③创建动态菜单

代码生成

• 自动化工具，可以快速生成项目中常用的代码，如数据库操作类、后端控制器、前端页面等。
  
• 支持根据数据库的表布局反向生成代码，减少手动编写的工作量。
  
• 提供三种生成模板：单表、 树表、主子表（一对多），可以生成实用于Spring Boot、MyBatis等盛行框架的代码，提高开辟效率和代码质量。
  
• 树表是一种展示层级数据的表格，能展开折叠，清晰出现父子关系，便于管理。
  

代码生成配置主表实现细节：

系统接口

• Swagger，能够自动生成 API 的同步在线文档，并提供Web界面进行接口调用和测试。
  

四、项目布局

在功能的讲解过程中，涉及的前后端项目的布局和配置文件，我们还比力陌生，为了更好的使用若依进行项目开辟，以是接下来，我们开始进入项目布局这部门内容的学习
后端布局

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

复制代码

项目中配置

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

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

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

1. # 项目相关配置
2. ruoyi:
3.   # 名称
4.   name: RuoYi
5.   # 版本
6.   version: 3.8.7
7.   # 版权年份
8.   copyrightYear: 2024
9.   # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
10.   profile: D:/ruoyi/uploadPath
11.   # 获取ip地址开关
12.   addressEnabled: false
13.   # 验证码类型 math 数字计算 char 字符验证
14.   captchaType: math
16. # 开发环境配置
17. server:
18.   # 服务器的HTTP端口，默认为8080
19.   port: 8080
20.   servlet:
21.     # 应用的访问路径
22.     context-path: /
23.   tomcat:
24.     # tomcat的URI编码
25.     uri-encoding: UTF-8
26.     # 连接数满后的排队数，默认为100
27.     accept-count: 1000
28.     threads:
29.       # tomcat最大线程数，默认为200
30.       max: 800
31.       # Tomcat启动初始化的线程数，默认值10
32.       min-spare: 100
34. # 日志配置
35. logging:
36.   level:
37.     com.ruoyi: debug
38.     org.springframework: warn
40. # 用户配置
41. user:
42.   password:
43.     # 密码最大错误次数
44.     maxRetryCount: 5
45.     # 密码锁定时间（默认10分钟）
46.     lockTime: 10
48. # Spring配置
49. spring:
50.   # 资源信息
51.   messages:
52.     # 国际化资源文件路径
53.     basename: i18n/messages
54.   profiles:
55.     active: druid
56.   # 文件上传
57.   servlet:
58.     multipart:
59.       # 单个文件大小
60.       max-file-size: 10MB
61.       # 设置总上传的文件大小
62.       max-request-size: 20MB
63.   # 服务模块
64.   devtools:
65.     restart:
66.       # 热部署开关
67.       enabled: true
68.   # redis 配置
69.   redis:
70.     # 地址
71.     host: localhost
72.     # 端口，默认为6379
73.     port: 6379
74.     # 数据库索引
75.     database: 0
76.     # 密码
77.     password: 123456
78.     # 连接超时时间
79.     timeout: 10s
80.     lettuce:
81.       pool:
82.         # 连接池中的最小空闲连接
83.         min-idle: 0
84.         # 连接池中的最大空闲连接
85.         max-idle: 8
86.         # 连接池的最大数据库连接数
87.         max-active: 8
88.         # #连接池最大阻塞等待时间（使用负值表示没有限制）
89.         max-wait: -1ms
91. # token配置
92. token:
93.   # 令牌自定义标识
94.   header: Authorization
95.   # 令牌密钥
96.   secret: abcdefghijklmnopqrstuvwxyz
97.   # 令牌有效期（默认30分钟）
98.   expireTime: 30
100. # MyBatis配置
101. mybatis:
102.   # 搜索指定包别名
103.   typeAliasesPackage: com.ruoyi.**.domain
104.   # 配置mapper的扫描，找到所有的mapper.xml映射文件
105.   mapperLocations: classpath*:mapper/**/*Mapper.xml
106.   # 加载全局的配置文件
107.   configLocation: classpath:mybatis/mybatis-config.xml
109. # PageHelper分页插件
110. pagehelper:
111.   helperDialect: mysql
112.   supportMethodsArguments: true
113.   params: count=countSql
115. # Swagger配置
116. swagger:
117.   # 是否开启swagger
118.   enabled: true
119.   # 请求前缀
120.   pathMapping: /dev-api
122. # 防止XSS攻击
123. xss:
124.   # 过滤开关
125.   enabled: true
126.   # 排除链接（多个用逗号分隔）
127.   excludes: /system/notice
128.   # 匹配链接
129.   urlPatterns: /system/*,/monitor/*,/tool/*

复制代码

模块依赖关系

各个模块之间的依赖关系：

前端布局

1. ruoyi-vue3
2. ├── bin                        // 执行脚本
3. ├── html                       // IE低版本提示页
4. ├── node_modules               // 第三方依赖库
5. ├── public                     // 公共资源
6. │   ├── favicon.ico            // favicon图标
7. ├── src                        // 源代码
8. │   ├── api                    // 所有请求
9. │   ├── assets                 // 静态资源
10. │   ├── components             // 全局公用组件
11. │   ├── directive              // 全局指令
12. │   ├── layout                 // 布局
13. │   ├── plugins                // 通用插件
14. │   ├── router                 // 路由配置
15. │   ├── store                  // 状态管理
16. │   ├── utils                  // 全局公用方法
17. │   ├── views                  // 视图组件
18. │   ├── App.vue                // 入口组件
19. │   ├── main.js                // 入口文件
20. │   ├── permission.js          // 权限管理
21. │   └── settings.js            // 系统配置
22. ├── vite                       // 构建工具
23. ├── .env.development           // 开发环境配置
24. ├── .env.production            // 生产环境配置
25. ├── .env.staging               // 测试环境配置
26. ├── .gitignore                 // git 忽略项
27. ├── index.html                 // 入口页面
28. ├── package.json               // 项目配置文件（相当于pom.xml）
29. └── vue.config.js              // Vue项目的配置信息（相当于application.yml）

复制代码

表布局介绍

ruoyi-vue数据库设计包含了多个表布局，用于支持系统的各种功能模块。
这些表可以根据它们的功能和用途进行分类，以便在后期使用时能够快速定位和理解。以下是对这些表布局的分类和简要阐明：

五、源码阅读

本章我们将围绕入门案例生成的课程管理进行讲解，包含前后端代码的分析，以及前后端代码交互的流程，通过这部门的学习，不仅能让我们掌握若依的基础业务逻辑，在此基础上还能为我们日后的定制开辟提供强有力的支持。
前端代码分析

找到src/views/course/course/index.vue文件，照顾护士项目的前端代码已经添加了具体的解释，如下：

1. <template>
2.   <div class="app-container">
4.     <!-- 搜索表单 start -->
5.     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">   
6.       <el-form-item label="课程编码" prop="code">
7.         <el-input
8.           v-model="queryParams.code"
9.           placeholder="请输入课程编码"
10.           clearable
11.           @keyup.enter="handleQuery"
12.         />
13.       </el-form-item>
14.       <el-form-item label="课程学科" prop="subject">
15.         <el-select v-model="queryParams.subject" placeholder="请选择课程学科" clearable>
16.           <el-option
17.             v-for="dict in course_subject"
18.             :key="dict.value"
19.             :label="dict.label"
20.             :value="dict.value"
21.           />
22.         </el-select>
23.       </el-form-item>
24.       <el-form-item label="课程名称" prop="name">
25.         <el-input
26.           v-model="queryParams.name"
27.           placeholder="请输入课程名称"
28.           clearable
29.           @keyup.enter="handleQuery"
30.         />
31.       </el-form-item>
32.       <el-form-item label="适用人群" prop="applicablePerson">
33.         <el-input
34.           v-model="queryParams.applicablePerson"
35.           placeholder="请输入适用人群"
36.           clearable
37.           @keyup.enter="handleQuery"
38.         />
39.       </el-form-item>
40.       <el-form-item>
41.         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
42.         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
43.       </el-form-item>
44.     </el-form>
45.     <!-- 搜索表单 end -->
47.     <!-- 按钮区域 start -->
48.     <el-row :gutter="10" class="mb8">
49.       <el-col :span="1.5">
50.         <el-button
51.           type="primary"
52.           plain
53.           icon="Plus"
54.           @click="handleAdd"
55.           v-hasPermi="['course:course:add']"
56.         >新增</el-button>
57.       </el-col>
58.       <el-col :span="1.5">
59.         <el-button
60.           type="success"
61.           plain
62.           icon="Edit"
63.           :disabled="single"
64.           @click="handleUpdate"
65.           v-hasPermi="['course:course:edit']"
66.         >修改</el-button>
67.       </el-col>
68.       <el-col :span="1.5">
69.         <el-button
70.           type="danger"
71.           plain
72.           icon="Delete"
73.           :disabled="multiple"
74.           @click="handleDelete"
75.           v-hasPermi="['course:course:remove']"
76.         >删除</el-button>
77.       </el-col>
78.       <el-col :span="1.5">
79.         <el-button
80.           type="warning"
81.           plain
82.           icon="Download"
83.           @click="handleExport"
84.           v-hasPermi="['course:course:export']"
85.         >导出</el-button>
86.       </el-col>
87.       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
88.     </el-row>
89.     <!-- 按钮区域end -->
91.     <!-- 数据展示表格 start -->
92.     <el-table v-loading="loading" :data="courseList" @selection-change="handleSelectionChange">
93.       <el-table-column type="selection" width="55" align="center" />
94.       <el-table-column label="课程id" align="center" prop="id" />
95.       <el-table-column label="课程编码" align="center" prop="code" />
96.       <el-table-column label="课程学科" align="center" prop="subject">
97.         <template #default="scope">
98.           <dict-tag :options="course_subject" :value="scope.row.subject"/>
99.         </template>
100.       </el-table-column>
101.       <el-table-column label="课程名称" align="center" prop="name" />
102.       <el-table-column label="价格" align="center" prop="price" />
103.       <el-table-column label="适用人群" align="center" prop="applicablePerson" />
104.       <el-table-column label="课程介绍" align="center" prop="info" />
105.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
106.         <template #default="scope">
107.           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['course:course:edit']">修改</el-button>
108.           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['course:course:remove']">删除</el-button>
109.         </template>
110.       </el-table-column>
111.     </el-table>
112.     <!-- 数据展示表格 end -->
113.    
114.     <!-- 分页区域 start -->
115.     <pagination
116.       v-show="total>0"
117.       :total="total"
118.       v-model:page="queryParams.pageNum"
119.       v-model:limit="queryParams.pageSize"
120.       @pagination="getList"
121.     />
122.     <!-- 分页区域 end -->
124.     <!-- 添加或修改课程管理对话框 -->
125.     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
126.       <el-form ref="courseRef" :model="form" :rules="rules" label-width="80px">
127.         <el-form-item label="课程编码" prop="code">
128.           <el-input v-model="form.code" placeholder="请输入课程编码" />
129.         </el-form-item>
130.         <el-form-item label="课程学科" prop="subject">
131.           <el-select v-model="form.subject" placeholder="请选择课程学科">
132.             <el-option
133.               v-for="dict in course_subject"
134.               :key="dict.value"
135.               :label="dict.label"
136.               :value="dict.value"
137.             ></el-option>
138.           </el-select>
139.         </el-form-item>
140.         <el-form-item label="课程名称" prop="name">
141.           <el-input v-model="form.name" placeholder="请输入课程名称" />
142.         </el-form-item>
143.         <el-form-item label="价格" prop="price">
144.           <el-input v-model="form.price" placeholder="请输入价格" />
145.         </el-form-item>
146.         <el-form-item label="适用人群" prop="applicablePerson">
147.           <el-input v-model="form.applicablePerson" placeholder="请输入适用人群" />
148.         </el-form-item>
149.         <el-form-item label="课程介绍" prop="info">
150.           <el-input v-model="form.info" placeholder="请输入课程介绍" />
151.         </el-form-item>
152.       </el-form>
153.       <template #footer>
154.         <div class="dialog-footer">
155.           <el-button type="primary" @click="submitForm">确 定</el-button>
156.           <el-button @click="cancel">取 消</el-button>
157.         </div>
158.       </template>
159.     </el-dialog>
160.   </div>
161. </template>
163. <script setup name="Course">
167. // 引入后端api接口
168. import { listCourse, getCourse, delCourse, addCourse, updateCourse } from "@/api/course/course";
169. // 获取当前实例代理对象，用于访问组件数据、方法
170. const { proxy } = getCurrentInstance();
171. // 获取课程学科的数据字典
172. const { course_subject } = proxy.useDict('course_subject');
173. // 列表数据
174. const courseList = ref([]);
175. // 是否显示弹框
176. const open = ref(false);
177. // 是否显示加载状态
178. const loading = ref(true);
179. // 是否显示搜索栏
180. const showSearch = ref(true);
181. // 复选框，被选中id的数组
182. const ids = ref([]);
183. // 复选框，是否单选，用于高亮修改、删除按钮
184. const single = ref(true);
185. // 复选框，是否多选，仅高亮删除按钮
186. const multiple = ref(true);
187. // 总（记录）条数
188. const total = ref(0);
189. // 用于区分新增、修改对话框标题
190. const title = ref("");
191. // 定义reactive响应式对象
192. const data = reactive({
193.   // 新增或修改表单数据
194.   form: {},
195.   // 搜索条件参数
196.   queryParams: {
197.     pageNum: 1,
198.     pageSize: 10,
199.     code: null,
200.     subject: null,
201.     name: null,
202.     applicablePerson: null,
203.   },
204.   // 表单校验规则
205.   rules: {
206.     code: [
207.       { required: true, message: "课程编码不能为空", trigger: "blur" }
208.     ],
209.     subject: [
210.       { required: true, message: "课程学科不能为空", trigger: "change" }
211.     ],
212.     name: [
213.       { required: true, message: "课程名称不能为空", trigger: "blur" }
214.     ],
215.     price: [
216.       { required: true, message: "价格不能为空", trigger: "blur" }
217.     ],
218.     applicablePerson: [
219.       { required: true, message: "适用人群不能为空", trigger: "blur" }
220.     ],
221.     info: [
222.       { required: true, message: "课程介绍不能为空", trigger: "blur" }
223.     ],
224.   }
225. });
226. // 将data对象的三个属性，转换为ref响应式对象
227. const { queryParams, form, rules } = toRefs(data);
229. /** 查询课程管理列表 */
230. function getList() {
231.   loading.value = true;
232.   listCourse(queryParams.value).then(response => {
233.     courseList.value = response.rows;
234.     total.value = response.total;
235.     loading.value = false;
236.   });
237. }
239. // 取消按钮
240. function cancel() {
241.   open.value = false;
242.   reset();
243. }
245. // 表单重置
246. function reset() {
247.   form.value = {
248.     id: null,
249.     code: null,
250.     subject: null,
251.     name: null,
252.     price: null,
253.     applicablePerson: null,
254.     info: null,
255.     createTime: null,
256.     updateTime: null
257.   };
258.   proxy.resetForm("courseRef");
259. }
261. /** 搜索按钮操作 */
262. function handleQuery() {
263.   queryParams.value.pageNum = 1;
264.   getList();
265. }
267. /** 重置按钮操作 */
268. function resetQuery() {
269.   proxy.resetForm("queryRef");
270.   handleQuery();
271. }
273. // 多选框选中数据
274. function handleSelectionChange(selection) {
275.   ids.value = selection.map(item => item.id);
276.   single.value = selection.length != 1;
277.   multiple.value = !selection.length;
278. }
280. /** 新增按钮操作 */
281. function handleAdd() {
282.   reset();
283.   open.value = true;
284.   title.value = "添加课程管理";
285. }
287. /** 修改按钮操作 */
288. function handleUpdate(row) {
289.   reset();
290.   const _id = row.id || ids.value
291.   getCourse(_id).then(response => {
292.     form.value = response.data;
293.     open.value = true;
294.     title.value = "修改课程管理";
295.   });
296. }
298. /** 提交按钮 */
299. function submitForm() {
300.   proxy.$refs["courseRef"].validate(valid => {
301.     if (valid) {
302.       if (form.value.id != null) {
303.         updateCourse(form.value).then(response => {
304.           proxy.$modal.msgSuccess("修改成功");
305.           open.value = false;
306.           getList();
307.         });
308.       } else {
309.         addCourse(form.value).then(response => {
310.           proxy.$modal.msgSuccess("新增成功");
311.           open.value = false;
312.           getList();
313.         });
314.       }
315.     }
316.   });
317. }
319. /** 删除按钮操作 */
320. function handleDelete(row) {
321.   const _ids = row.id || ids.value;
322.   proxy.$modal.confirm('是否确认删除课程管理编号为"' + _ids + '"的数据项？').then(function() {
323.     return delCourse(_ids);
324.   }).then(() => {
325.     getList();
326.     proxy.$modal.msgSuccess("删除成功");
327.   }).catch(() => {});
328. }
330. /** 导出按钮操作 */
331. function handleExport() {
332.   proxy.download('course/course/export', {
333.     ...queryParams.value
334.   }, `course_${new Date().getTime()}.xlsx`)
335. }
337. // 页面加载时执行-查询课程管理列表
338. getList();
339. </script>

复制代码

后端代码分析

CourseController

ruoyi-admin模块下找到这个类：com.ruoyi.web.controller.course.CourseController里面有5个对应的方法接口，具体代码如下：

1. package com.sky.course.controller;
3. import com.sky.common.annotation.Log;
4. import com.sky.common.core.controller.BaseController;
5. import com.sky.common.core.domain.AjaxResult;
6. import com.sky.common.core.page.TableDataInfo;
7. import com.sky.common.enums.BusinessType;
8. import com.sky.common.utils.poi.ExcelUtil;
9. import com.sky.course.domain.Course;
10. import com.sky.course.service.ICourseService;
11. import org.springframework.beans.factory.annotation.Autowired;
12. import org.springframework.security.access.prepost.PreAuthorize;
13. import org.springframework.web.bind.annotation.*;
15. import javax.servlet.http.HttpServletResponse;
16. import java.util.List;
18. /**
19. * 课程管理Controller
20. *
21. * @author itheima
22. */
23. @RestController
24. @RequestMapping("/course/course")
25. public class CourseController extends BaseController
26. {
27.     @Autowired
28.     private ICourseService courseService;
30.     /**
31.      * 查询课程管理列表
32.      */
33.     @PreAuthorize("@ss.hasPermi('course:course:list')")
34.     @GetMapping("/list")
35.     public TableDataInfo list(Course course)
36.     {
37.         //1. 开启分页
38.         startPage();
39.         //2. 查询课程列表
40.         List<Course> list = courseService.selectCourseList(course);
41.         //3. 返回表格分页数据对象
42.         return getDataTable(list);
43.     }
45.     /**
46.      * 导出课程管理列表
47.      */
48.     @PreAuthorize("@ss.hasPermi('course:course:export')")
49.     @Log(title = "课程管理", businessType = BusinessType.EXPORT)
50.     @PostMapping("/export")
51.     public void export(HttpServletResponse response, Course course)
52.     {
53.         List<Course> list = courseService.selectCourseList(course);
54.         ExcelUtil<Course> util = new ExcelUtil<Course>(Course.class);
55.         util.exportExcel(response, list, "课程管理数据");
56.     }
58.     /**
59.      * 获取课程管理详细信息
60.      */
61.     @PreAuthorize("@ss.hasPermi('course:course:query')")
62.     @GetMapping(value = "/{id}")
63.     public AjaxResult getInfo(@PathVariable("id") Long id)
64.     {
65.         return success(courseService.selectCourseById(id));
66.     }
68.     /**
69.      * 新增课程管理
70.      */
71.     @PreAuthorize("@ss.hasPermi('course:course:add')")
72.     @Log(title = "课程管理", businessType = BusinessType.INSERT)
73.     @PostMapping
74.     public AjaxResult add(@RequestBody Course course)
75.     {
76.         return toAjax(courseService.insertCourse(course));
77.     }
79.     /**
80.      * 修改课程管理
81.      */
82.     @PreAuthorize("@ss.hasPermi('course:course:edit')")
83.     @Log(title = "课程管理", businessType = BusinessType.UPDATE)
84.     @PutMapping
85.     public AjaxResult edit(@RequestBody Course course)
86.     {
87.         return toAjax(courseService.updateCourse(course));
88.     }
90.     /**
91.      * 删除课程管理
92.      */
93.     @PreAuthorize("@ss.hasPermi('course:course:remove')")
94.     @Log(title = "课程管理", businessType = BusinessType.DELETE)
95.         @DeleteMapping("/{ids}")
96.     public AjaxResult remove(@PathVariable Long[] ids)
97.     {
98.         return toAjax(courseService.deleteCourseByIds(ids));
99.     }
100. }

复制代码

BaseController

Controller继续了BaseController，其中BaseController具体界说如下图：

TableDataInfo

分页查询统一返回对象：表格分页数据对象

AjaxResult

增编削查统一返回对象：操作消息提示

BaseEntity

所有实体类默认继续的BaseEntity基类

权限注解

@PreAuthorize 注解是 Spring Security 框架中用来做权限查抄的。
它在运行方法前先验证权限，权限够就放行，不敷就拦截。

权限控制流程图

前后端交互流程

查询课程管理列表
接口文档

跨域

在前端开辟中，跨域是一个常见的问题，特别是在使用Vue框架进行开辟时。跨域是指在浏览器中发送的AJAX请求的目标地点与当前页面的地点不在同一个域下，这会导致浏览器的同源策略产生限制，从而阻止了跨域请求的发送。然而，我们可以通过署理服务器来办理这个问题。

署理服务器是位于客户端和目标服务器之间的一台服务器，它接收客户端发送的请求，并将请求转发给目标服务器。通过在署理服务器上进行请求转发，可以绕过浏览器的同源策略限制，从而实现跨域请求。
在vue.config.js文件中添加以下内容：

六、二次开辟

接下来我们将利用这些知识，实现外卖管理系统的业务功能开辟，本章造就的是各人如何基于若依进行二次开辟的技能，以是这里我们拿其中一个菜品管理功能给同学们进行讲解
模块定制

若依框架修改器

若依框架修改器是一个可以一键修改RuoYi框架包名、项目名等的工具。
地点：https://gitee.com/lpf_project/RuoYi-MT/releases
资料中已提供，将项目打成压缩包，直接修改即可：

新建业务模块

新建子模块

在sky父工程下创建sky-merchant子模块，在pom.xml中导入核心模块依赖

版本锁定

在RuoYi-Vue父工程pom.xml中进行版本锁定

添加模块依赖

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

菜品管理

利用若依代码生成器（主子表模板），生成菜品管理的前后端代码。

代码生成

①准备SQL并导入数据库

②配置代码生成信息

③下载代码并导入项目

升级改造

页面组件

找到src/views/merchant/dish/index.vue文件，改造菜品查询列表和口味列表，如下：

1. <template>
2.   <div class="app-container">
3.     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
4.       <el-form-item label="菜品名称" prop="name">
5.         <el-input
6.           v-model="queryParams.name"
7.           placeholder="请输入菜品名称"
8.           clearable
9.           @keyup.enter="handleQuery"
10.         />
11.       </el-form-item>
12.       <el-form-item label="售卖状态" prop="status">
13.         <el-select v-model="queryParams.status" placeholder="请选择售卖状态" clearable>
14.           <el-option
15.             v-for="dict in dish_status"
16.             :key="dict.value"
17.             :label="dict.label"
18.             :value="dict.value"
19.           />
20.         </el-select>
21.       </el-form-item>
22.       <el-form-item>
23.         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
24.         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
25.       </el-form-item>
26.     </el-form>
28.     <el-row :gutter="10" class="mb8">
29.       <el-col :span="1.5">
30.         <el-button
31.           type="primary"
32.           plain
33.           icon="Plus"
34.           @click="handleAdd"
35.           v-hasPermi="['merchant:dish:add']"
36.         >新增</el-button>
37.       </el-col>
38.       <el-col :span="1.5">
39.         <el-button
40.           type="success"
41.           plain
42.           icon="Edit"
43.           :disabled="single"
44.           @click="handleUpdate"
45.           v-hasPermi="['merchant:dish:edit']"
46.         >修改</el-button>
47.       </el-col>
48.       <el-col :span="1.5">
49.         <el-button
50.           type="danger"
51.           plain
52.           icon="Delete"
53.           :disabled="multiple"
54.           @click="handleDelete"
55.           v-hasPermi="['merchant:dish:remove']"
56.         >删除</el-button>
57.       </el-col>
58.       <el-col :span="1.5">
59.         <el-button
60.           type="warning"
61.           plain
62.           icon="Download"
63.           @click="handleExport"
64.           v-hasPermi="['merchant:dish:export']"
65.         >导出</el-button>
66.       </el-col>
67.       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
68.     </el-row>
70.     <el-table v-loading="loading" :data="dishList" @selection-change="handleSelectionChange">
71.       <el-table-column type="selection" width="55" align="center" />
72.       <!-- <el-table-column label="主键" align="center" prop="id" /> -->
73.       <el-table-column label="菜品名称" align="center" prop="name" />
74.       <!-- <el-table-column label="售价" align="center" prop="price" /> -->
75.       <el-table-column label="售价" align="center">
76.       <template #default="{ row }">
77.         <span>￥{{ row.price }}</span>
78.       </template>
79.     </el-table-column>
80.       <el-table-column label="图片" align="center" prop="image" width="100">
81.         <template #default="scope">
82.           <image-preview :src="scope.row.image" :width="50" :height="50"/>
83.         </template>
84.       </el-table-column>
85.       <el-table-column label="售卖状态" align="center" prop="status">
86.         <template #default="scope">
87.           <dict-tag :options="dish_status" :value="scope.row.status"/>
88.         </template>
89.       </el-table-column>
90.       <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
91.         <template #default="scope">
92.          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
93.         </template>
94.       </el-table-column>
95.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
96.         <template #default="scope">
97.           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['merchant:dish:edit']">修改</el-button>
98.           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['merchant:dish:remove']">删除</el-button>
99.         </template>
100.       </el-table-column>
101.     </el-table>
102.    
103.     <pagination
104.       v-show="total>0"
105.       :total="total"
106.       v-model:page="queryParams.pageNum"
107.       v-model:limit="queryParams.pageSize"
108.       @pagination="getList"
109.     />
111.     <!-- 添加或修改菜品管理对话框 -->
112.     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
113.       <el-form ref="dishRef" :model="form" :rules="rules" label-width="80px">
114.         <el-form-item label="菜品名称" prop="name">
115.           <el-input v-model="form.name" placeholder="请输入菜品名称" />
116.         </el-form-item>
117.         <el-form-item label="售价" prop="price">
118.           <el-input v-model="form.price" placeholder="请输入售价" />
119.         </el-form-item>
120.         <el-form-item label="图片" prop="image">
121.           <image-upload v-model="form.image"/>
122.         </el-form-item>
123.         <el-form-item label="描述信息" prop="description">
124.           <el-input v-model="form.description" placeholder="请输入描述信息" />
125.         </el-form-item>
126.         <el-form-item label="售卖状态" prop="status">
127.           <el-select v-model="form.status" placeholder="请选择售卖状态">
128.             <el-option
129.               v-for="dict in dish_status"
130.               :key="dict.value"
131.               :label="dict.label"
132.               :value="parseInt(dict.value)"
133.             ></el-option>
134.           </el-select>
135.         </el-form-item>
136.         <el-divider content-position="center">菜品口味关系信息</el-divider>
137.         <el-row :gutter="10" class="mb8">
138.           <el-col :span="1.5">
139.             <el-button type="primary" icon="Plus" @click="handleAddDishFlavor">添加</el-button>
140.           </el-col>
141.           <el-col :span="1.5">
142.             <el-button type="danger" icon="Delete" @click="handleDeleteDishFlavor">删除</el-button>
143.           </el-col>
144.         </el-row>
145.         <el-table :data="dishFlavorList" :row-class-name="rowDishFlavorIndex" @selection-change="handleDishFlavorSelectionChange" ref="dishFlavor">
146.           <el-table-column type="selection" width="50" align="center" />
147.           <el-table-column label="序号" align="center" prop="index" width="50"/>
148.           <el-table-column label="口味名称" prop="name" width="150">
149.             <template #default="scope">
150.               <!-- <el-input v-model="scope.row.name" placeholder="请输入口味名称" /> -->
151.               <el-select v-model="scope.row.name" placeholder="请选择口味名称"
152.               @change="changeFlavorName(scope.row)" >
153.                 <el-option
154.                   v-for="dishFlavor in dishFlavorListSelect"
155.                   :key="dishFlavor.name"
156.                   :label="dishFlavor.name"
157.                   :value="dishFlavor.name"
158.                 />
159.               </el-select>
160.             </template>
161.           </el-table-column>
162.           <el-table-column label="口味列表" prop="value" width="350">
163.             <template #default="scope">
164.               <!-- <el-input v-model="scope.row.value" placeholder="请输入口味列表" /> -->
165.               <el-select v-model="scope.row.value" placeholder="请选择口味列表" multiple
166.               @focus="focusFlavorName(scope.row)" style="width: 90%;">
167.                 <el-option
168.                   v-for="value in checkValueList"
169.                   :key="value"
170.                   :label="value"
171.                   :value="value"
172.                 />
173.               </el-select>
174.             </template>
175.           </el-table-column>
176.         </el-table>
177.       </el-form>
178.       <template #footer>
179.         <div class="dialog-footer">
180.           <el-button type="primary" @click="submitForm">确 定</el-button>
181.           <el-button @click="cancel">取 消</el-button>
182.         </div>
183.       </template>
184.     </el-dialog>
185.   </div>
186. </template>
188. <script setup name="Dish">
189. import { listDish, getDish, delDish, addDish, updateDish } from "@/api/merchant/dish";
190. import { ref } from "vue";
192. const { proxy } = getCurrentInstance();
193. const { dish_status } = proxy.useDict('dish_status');
195. const dishList = ref([]);
196. const dishFlavorList = ref([]);
197. const open = ref(false);
198. const loading = ref(true);
199. const showSearch = ref(true);
200. const ids = ref([]);
201. const checkedDishFlavor = ref([]);
202. const single = ref(true);
203. const multiple = ref(true);
204. const total = ref(0);
205. const title = ref("");
207. const data = reactive({
208.   form: {},
209.   queryParams: {
210.     pageNum: 1,
211.     pageSize: 10,
212.     name: null,
213.     status: null,
214.   },
215.   rules: {
216.     name: [
217.       { required: true, message: "菜品名称不能为空", trigger: "blur" }
218.     ],
219.     price: [
220.       { required: true, message: "售价不能为空", trigger: "blur" }
221.     ],
222.     image: [
223.       { required: true, message: "图片不能为空", trigger: "blur" }
224.     ],
225.     status: [
226.       { required: true, message: "售卖状态不能为空", trigger: "change" }
227.     ],
228.   }
229. });
231. const { queryParams, form, rules } = toRefs(data);
232. //-----------------------------
233. // 定义口味名称和口味列表静态数据
234. const dishFlavorListSelect=ref([
235.   {name:"辣度",value:["不辣","微辣","中辣","重辣"]},
236.   {name:"忌口",value:["不要葱","不要蒜","不要香菜","不要辣"]},
237.   {name:"甜味",value:["无糖","少糖","半糖","多糖"]}
238. ]);
239. // 存储当前选中口味列表数组
240. const checkValueList=ref([]);
241. // 定义改变口味名称时更新当前选中的口味列表
242. function changeFlavorName(row){
243.   // 清空当前行value
244.   row.value=[];
245.   // 根据选中name去查找静态数据的value
246.   checkValueList.value=dishFlavorListSelect.value.find(item=>item.name==row.name).value;
247. }
248. // 定义口味列表获取焦点时更新当前选中的口味列表
249. function focusFlavorName(row){
250.   // 根据选中name去查找静态数据的value
251.   checkValueList.value=dishFlavorListSelect.value.find(item=>item.name==row.name).value;
252. }
254. //-----------------------------
255. /** 查询菜品管理列表 */
256. function getList() {
257.   loading.value = true;
258.   listDish(queryParams.value).then(response => {
259.     dishList.value = response.rows;
260.     total.value = response.total;
261.     loading.value = false;
262.   });
263. }
265. // 取消按钮
266. function cancel() {
267.   open.value = false;
268.   reset();
269. }
271. // 表单重置
272. function reset() {
273.   form.value = {
274.     id: null,
275.     name: null,
276.     price: null,
277.     image: null,
278.     description: null,
279.     status: null,
280.     createTime: null,
281.     updateTime: null
282.   };
283.   dishFlavorList.value = [];
284.   proxy.resetForm("dishRef");
285. }
287. /** 搜索按钮操作 */
288. function handleQuery() {
289.   queryParams.value.pageNum = 1;
290.   getList();
291. }
293. /** 重置按钮操作 */
294. function resetQuery() {
295.   proxy.resetForm("queryRef");
296.   handleQuery();
297. }
299. // 多选框选中数据
300. function handleSelectionChange(selection) {
301.   ids.value = selection.map(item => item.id);
302.   single.value = selection.length != 1;
303.   multiple.value = !selection.length;
304. }
306. /** 新增按钮操作 */
307. function handleAdd() {
308.   reset();
309.   open.value = true;
310.   title.value = "添加菜品管理";
311. }
313. /** 修改按钮操作 */
314. function handleUpdate(row) {
315.   reset();
316.   const _id = row.id || ids.value
317.   getDish(_id).then(response => {
318.     form.value = response.data;
319.     dishFlavorList.value = response.data.dishFlavorList;
320.     // 将口味列表value字符串转为json数组
321.     if(dishFlavorList.value!=null){
322.       dishFlavorList.value.forEach(item => {
323.       item.value = JSON.parse(item.value);
324.     });
325.     }
328.     open.value = true;
329.     title.value = "修改菜品管理";
330.   });
331. }
333. /** 提交按钮 */
334. function submitForm() {
335.   proxy.$refs["dishRef"].validate(valid => {
336.     if (valid) {
337.       form.value.dishFlavorList = dishFlavorList.value;
338.       // 将口味列表中value通过JSON工具类转为字符串
339.       if(form.value.dishFlavorList!=null){
340.         form.value.dishFlavorList.forEach(item=>{
341.         item.value = JSON.stringify(item.value)
342.       })
343.       }
345.    
346.       if (form.value.id != null) {
347.         updateDish(form.value).then(response => {
348.           proxy.$modal.msgSuccess("修改成功");
349.           open.value = false;
350.           getList();
351.         });
352.       } else {
353.         addDish(form.value).then(response => {
354.           proxy.$modal.msgSuccess("新增成功");
355.           open.value = false;
356.           getList();
357.         });
358.       }
359.     }
360.   });
361. }
363. /** 删除按钮操作 */
364. function handleDelete(row) {
365.   const _ids = row.id || ids.value;
366.   proxy.$modal.confirm('是否确认删除菜品管理编号为"' + _ids + '"的数据项？').then(function() {
367.     return delDish(_ids);
368.   }).then(() => {
369.     getList();
370.     proxy.$modal.msgSuccess("删除成功");
371.   }).catch(() => {});
372. }
374. /** 菜品口味关系序号 */
375. function rowDishFlavorIndex({ row, rowIndex }) {
376.   row.index = rowIndex + 1;
377. }
379. /** 菜品口味关系添加按钮操作 */
380. function handleAddDishFlavor() {
381.   let obj = {};
382.   obj.name = "";
383.   obj.value = "";
384.   dishFlavorList.value.push(obj);
385. }
387. /** 菜品口味关系删除按钮操作 */
388. function handleDeleteDishFlavor() {
389.   if (checkedDishFlavor.value.length == 0) {
390.     proxy.$modal.msgError("请先选择要删除的菜品口味关系数据");
391.   } else {
392.     const dishFlavors = dishFlavorList.value;
393.     const checkedDishFlavors = checkedDishFlavor.value;
394.     dishFlavorList.value = dishFlavors.filter(function(item) {
395.       return checkedDishFlavors.indexOf(item.index) == -1
396.     });
397.   }
398. }
400. /** 复选框选中数据 */
401. function handleDishFlavorSelectionChange(selection) {
402.   checkedDishFlavor.value = selection.map(item => item.index)
403. }
405. /** 导出按钮操作 */
406. function handleExport() {
407.   proxy.download('merchant/dish/export', {
408.     ...queryParams.value
409.   }, `dish_${new Date().getTime()}.xlsx`)
410. }
412. getList();
413. </script>

复制代码

图片上传组件

由于之前的图片访问是本地的路径和服务，需要发起请求才能获取图片，现在我们使用了OSS，图片可直接访问，无需再次访问后端服务，所从前端的图片访问逻辑我们需要修改

• 修改文件位置：src/components/imageUpload/index.vue
  
• 如果图片路径是以http开头的，则不走背景服务访问，直接访问OSS，之前的不变，如下图
  

页面调整

如果使用若依框架项目做为脚手架，那么我们肯定需要在页面表现中，符合本身公司或者项目的标识才行，需要更换的地方很多，我们依次来办理它

• 浏览器标签页logo标识、标题
  
• 系统页面中的logo标识、标题
  
• 去除源码地点 & 文档地点
  
• 主题风格和菜单图标
  
• 登录名称及配景图
  

浏览器标签页icon、标题

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

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

系统页面中的logo、标题

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

若依的系统页面标题引用的是开辟情况的配置，我们只需要修改开辟的情况的VITE_APP_TITLE属性即可

去除源码 & 文档

主题和自界说图标

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

在前端代码中也有对应的操作，更好主题风格文件位置：src/setting.js

更换主题颜色文件位置：src/store/modules/settings.js

访问阿里巴巴矢量图库，搜刮图标：https://www.iconfont.cn/search/index?searchType=icon&q=%E8%8F%9C%E5%93%81%E7%AE%A1%E7%90%86

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

登录页面中标题、配景图

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告