若依框架
若依是什么?
若依(RuoYi)是一款基于JavaEE技术的企业级快速开发平台让Java开发者用少量代码，就能快速搭建和开发出各种管理系统工具
后端环境搭建
克隆：复制官网克隆地址url，设置项目目录
msyql创建数据库，并执行目录下的两个sql脚本
启动redis
redis-server.exe redis.windows.conf
运行项目
前端环境搭建
git克隆
https://gitee.com/ys-gitee/RuoYi-Vue3.git
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git
打开项目
code ./RouYi-vue3
安装依赖
配置镜像源
npm config set registry=https://registry.npmmirror.com
打开终端：输入npm install
运行前端项目
npm run dev
入门案例
我们将利用若依框架的代码生成器实现CRM系统中的课程管理功能
1、准备课程表结构和数据sql文件，导入到数据库中
2、登录系统（系统工具 -> 代码生成 -> 导入课程表）
代码生成列表中找到课程表（可预览、编辑、同步、删除生成配置）
点击生成代码会得到一个
ruoyi.zip
3、解压缩ruoyi分别导入后端、前端、数据库中
系统管理功能详解
权限控制
若依内置了强大的权限控制系统，为企业级项目提供了通用的解决方案。
案例
创建新用户小智并关联课研人员角色，仅限课程管理和统计分析菜单访问。
实现步骤：
①创建菜单
②创建角色，并分配权限
③创建用户，并关联角色
创建菜单
此时目录下是不会跳转的，因为没有建立菜单
创建角色，分配菜单权限
创建用户、关联角色
数据字典
若依内置的数据字典，用于维护系统中常见的静态数据。例如:性别、状态.
功能包括:字典类型管理、字典数据管理
案例：数据字典，将课程管理的学科字段改为数据字典维护
实现步骤：
①添加字典类型和数据
点击指定的字典类型值
②修改代码生成信息
③下载代码，导入前端
这里只是修改了前端代码
同理：可以动手做一下适用人群的 数据字典，记得修改数据库对应的键值
参数设置
对系统中的参数进行动态维护，比如验证码功能参数
此时登录就不需要输入验证码了
还可以开放注册功能，前端把注册按钮隐藏了，需要修改一下代码
通知公告
RuoYi的通知公告功能提供了一个方便的方式来发布和管理通知、公告和新闻等信息。管理员可以创建、编辑和删除通知（支持富文本编辑和附件上传）。
系统将信息发送给指定的用户、部门或角色。用户可以通过系统界面或电子邮件接收通知，从而确保信息及时传达（这部分需要自己开发）。
日志管理
浏览器好像有点问题，我用的是edge，目前不知道原因
系统监控功能详解
数据监控
druid提供的强大数据监控功能，所以需要另外登录
定时任务
案例：每间隔5秒，控制台输出系统时间
实现步骤：
①创建任务类
②添加任务规则
任务名称：自定义，如：定时查询任务状态
任务分组：根据字典
sys_job_group配置，可自行进行配置调用目标字符串：设置后台任务方法名称参数
执行表达式：可查询官方
cron表达式介绍执行策略：定时任务自定义执行策略
并发执行：是否需要多个任务间同时执行
两种调用方法的选择，一般选用spring bean的方式：对象名.方法名
③启动任务-状态为启用即可
问题：不知道为什么任务启动瞬间会执行多次任务；猜测是时间单位的问题？
系统工具功能详解
表单构建
给生成文件改名add.vue，复制到前端工程
添加到菜单
此时生成的表单页面就可以显示了
代码生成
生成树表结构
系统接口
使用内置Swagger进行后端接口测试
使用开发者工具获取token进行认证
修改配置文件swagger配置
成功响应
后端结构
ruoyi-admin包
RuoYiServletlnitializer将工程打包成war包并部署到外部的Servlet容器（如Tomcat）中运行
ruoyi-common包
ruoyi-framework包
其他包
项目中的配置
模块依赖关系
前端结构
表结构
源码阅读
前端代码分析
后端代码分析
Controller继承了BaseController，其中BaseController详细定义如下图：
分页查询统一返回对象：表格分页数据对象TableDataInfo
增删改查统一返回对象：操作消息提醒
所有实体类默认继承的BaseEntity基类
权限注解
@PreAuthorize 注解是 Spring Security 框架中用来做权限检查的。
它在运行方法前先验证权限，权限够就放行，不够就拦截。
前后端交互流程
查询课程管理列表
跨域问题
在前端开发中，跨域是一个常见的问题，特别是在使用Vue框架进行开发时。跨域是指在浏览器中发送的AJAX请求的目标地址与当前页面的地址不在同一个域下，这会导致浏览器的同源策略产生限制，从而阻止了跨域请求的发送。然而，我们可以通过代理服务器来解决这个问题。
代理服务器是位于客户端和目标服务器之间的一台服务器，它接收客户端发送的请求，并将请求转发给目标服务器。通过在代理服务器上进行请求转发，可以绕过浏览器的同源策略限制，从而实现跨域请求。
在vue.config.js文件中添加以下内容：拦截指定前缀“ /dev-api” ,转发到localhost：8080, 重写路径
二次开发
接下来我们将利用这些知识，实现外卖管理系统的业务功能开发，本节培养的是如何基于若依进行二次开发的技能，所以这里我们使用其中一个菜品管理功能作为案例
模块定制
若依框架修改器
若依框架修改器是一个可以一键修改RuoYi框架包名、项目名等的工具。
地址：https://gitee.com/lpf_project/RuoYi-MT/releases
资料中已提供，将项目打成压缩包，直接修改即可：
新建业务模块
新建时，路径弄错了，模块没删除干净
Idea中，新建一个maven模块，发现位置取错了就想把模块删了然后新建一个，结果提示坐标为...的模块已存在 - 想去放牛 - 博客园
注意新建子模块的时候，不要新增 <groupId>org.example</groupId>，会导致路径不一致，父工程不方便锁定
在RuoYi-Vue父工程pom.xml中进行版本锁定
在ruoyi-admin模块pom.xml中添加模块依赖
菜品管理
代码生成
建mysql表并配置代码生成信息
代码导入
前端后端代码导入，注意路径
升级改造
主要是一些前端显示的调整，需要修改前端部分代码
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="菜品名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入菜品名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="售卖状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择售卖状态" clearable>
<el-option
v-for="dict in dish_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['merchant:dish:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['merchant:dish:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['merchant:dish:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['merchant:dish:export']"
>导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dishList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="菜品名称" align="center" prop="name" />
<el-table-column label="售价" align="center">
<template #default="scope">
<div>
￥ {{ scope.row.price }}
</div>
</template>
</el-table-column>
<el-table-column label="图片" align="center" prop="image" width="100">
<template #default="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="售卖状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="dish_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['merchant:dish:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['merchant:dish:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改菜品管理对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form ref="dishRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="菜品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入菜品名称" />
</el-form-item>
<el-form-item label="售价" prop="price">
<el-input v-model="form.price" placeholder="请输入售价" />
</el-form-item>
<el-form-item label="图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="描述信息" prop="description">
<el-input v-model="form.description" placeholder="请输入描述信息" />
</el-form-item>
<el-form-item label="售卖状态" prop="status">
<el-select v-model="form.status" placeholder="请选择售卖状态">
<el-option
v-for="dict in dish_status"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-divider content-position="center">菜品口味关系信息</el-divider>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="Plus" @click="handleAddDishFlavor">添加</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="Delete" @click="handleDeleteDishFlavor">删除</el-button>
</el-col>
</el-row>
<el-table :data="dishFlavorList" :row-class-name="rowDishFlavorIndex" @selection-change="handleDishFlavorSelectionChange" ref="dishFlavor">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50"/>
<el-table-column label="口味名称" prop="name" width="150">
<template #default="scope">
<!-- <el-input v-model="scope.row.name" placeholder="请输入口味名称" /> -->
<el-select v-model="scope.row.name" placeholder="请选择口味名称"
@change="changeFlavorName(scope.row)">
<el-option v-for="dishFlavor in dishFlavorListSelect"
:key="dishFlavor.name"
:label="dishFlavor.name"
:value="dishFlavor.name"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="口味列表" prop="value" width="350">
<template #default="scope">
<!-- <el-input v-model="scope.row.value" placeholder="请输入口味列表" /> -->
<el-select v-model="scope.row.value" placeholder="请选择口味列表" multiple
@focus="focusFlavorName(scope.row)" style="width: 90%;">
<el-option v-for="value in checkValueList"
:key="value"
:label="value"
:value="value"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Dish">
import { listDish, getDish, delDish, addDish, updateDish } from "@/api/merchant/dish"
const { proxy } = getCurrentInstance()
const { dish_status } = proxy.useDict('dish_status')
const dishList = ref([])
const dishFlavorList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const checkedDishFlavor = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
status: null,
},
rules: {
name: [
{ required: true, message: "菜品名称不能为空", trigger: "blur" }
],
price: [
{ required: true, message: "售价不能为空", trigger: "blur" }
],
image: [
{ required: true, message: "图片不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "售卖状态不能为空", trigger: "change" }
],
}
})
const { queryParams, form, rules } = toRefs(data)
//定义口味名称和口味列表静态数据
const dishFlavorListSelect = ref([
{name: '辣度', value: ["不辣","微辣","中辣","重辣"]},
{name: '忌口', value: ["不要葱","不要蒜","不要香菜","不要辣"]},
{name: '甜味', value: ["无糖","少糖","半糖","多糖"]},
]);
// 存储当前选中口味列表数组
const checkValueList = ref([]);
// 定义改变口味名称时更新当前选中的口味列表
function changeFlavorName(row) {
// 清空当前行的value
row.value = [];
// 根据选中的name 去查找静态数据的value
checkValueList.value = dishFlavorListSelect.value.find(item => item.name === row.name).value;
}
// 定义口味列表获取焦点时更新当前选中的口味列表
function focusFlavorName(row) {
// 根据选中的name 去查找静态数据的value
checkValueList.value = dishFlavorListSelect.value.find(item => item.name === row.name).value;
}
/** 查询菜品管理列表 */
function getList() {
loading.value = true
listDish(queryParams.value).then(response => {
dishList.value = response.rows
total.value = response.total
loading.value = false
})
}
// 取消按钮
function cancel() {
open.value = false
reset()
}
// 表单重置
function reset() {
form.value = {
id: null,
name: null,
price: null,
image: null,
description: null,
status: null,
createTime: null,
updateTime: null
}
dishFlavorList.value = []
proxy.resetForm("dishRef")
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef")
handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
reset()
open.value = true
title.value = "添加菜品管理"
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset()
const _id = row.id || ids.value
getDish(_id).then(response => {
form.value = response.data
dishFlavorList.value = response.data.dishFlavorList
// 将口味列表value字符串转为json数组
if(dishFlavorList.value != null){
dishFlavorList.value.forEach(item => {
item.value = JSON.parse(item.value);
});
}
open.value = true
title.value = "修改菜品管理"
})
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["dishRef"].validate(valid => {
if (valid) {
form.value.dishFlavorList = dishFlavorList.value
if(form.value.dishFlavorList != null){
// 将口味列表中的value通过JSON工具类转为字符串
form.value.dishFlavorList.forEach(item => {
item.value = JSON.stringify(item.value);
});
}
if (form.value.id != null) {
updateDish(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功")
open.value = false
getList()
})
} else {
addDish(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功")
open.value = false
getList()
})
}
}
})
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value
proxy.$modal.confirm('是否确认删除菜品管理编号为"' + _ids + '"的数据项？').then(function() {
return delDish(_ids)
}).then(() => {
getList()
proxy.$modal.msgSuccess("删除成功")
}).catch(() => {})
}
/** 菜品口味关系序号 */
function rowDishFlavorIndex({ row, rowIndex }) {
row.index = rowIndex + 1
}
/** 菜品口味关系添加按钮操作 */
function handleAddDishFlavor() {
let obj = {}
obj.name = ""
obj.value = ""
dishFlavorList.value.push(obj)
}
/** 菜品口味关系删除按钮操作 */
function handleDeleteDishFlavor() {
if (checkedDishFlavor.value.length == 0) {
proxy.$modal.msgError("请先选择要删除的菜品口味关系数据")
} else {
const dishFlavors = dishFlavorList.value
const checkedDishFlavors = checkedDishFlavor.value
dishFlavorList.value = dishFlavors.filter(function(item) {
return checkedDishFlavors.indexOf(item.index) == -1
})
}
}
/** 复选框选中数据 */
function handleDishFlavorSelectionChange(selection) {
checkedDishFlavor.value = selection.map(item => item.index)
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('merchant/dish/export', {
...queryParams.value
}, `dish_${new Date().getTime()}.xlsx`)
}
getList()
</script>
页面调整
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
