当前位置：首页 > news >正文

若依使用基本步骤

news 2025/10/13 9:49:53

一、后端

1、下载ruoyi-vue

RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

2、导入mysql与配置信息

3、启动redis

4、启动后端

二、前端

1、下载ruoyi-vue3

RuoYi-Vue3: 🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

2、安装依赖

npm install

3、启动前端

npm run dev

三、若依自动生成代码

四、前后端交互

1、前端

以课程管理子页面为例，若依自动生成代码时，前端会生成两个文件，一个是api/course/course.js和views/course/course/index.vue。

1）course.js

这个 JavaScript 文件是一个 API 接口封装模块，主要用于在前端项目中统一管理与“课程管理”相关的后端接口调用，提供课程管理的 CRUD 操作接口。

import request from '@/utils/request'// 查询课程管理列表
export function listCourse(query) {return request({url: '/course/course/list',method: 'get',params: query})
}// 查询课程管理详细
export function getCourse(id) {return request({url: '/course/course/' + id,method: 'get'})
}// 新增课程管理
export function addCourse(data) {return request({url: '/course/course',method: 'post',data: data})
}// 修改课程管理
export function updateCourse(data) {return request({url: '/course/course',method: 'put',data: data})
}// 删除课程管理
export function delCourse(id) {return request({url: '/course/course/' + id,method: 'delete'})
}

2）index.vue

index.vue代码主要分为两个模块，template和script。template是用来生成HTML代码的，主要负责页面的展示，script主要控制template的数据来源和行为，如果需要还可以添加style模块，负责前端css样式功能。

文件中通过以下代码引入course.js中的调用后端的接口

import { listCourse, getCourse, delCourse, addCourse, updateCourse } from "@/api/course/course"

在 Vue 3 中，如果你用 <script setup>（组合式 API），默认是没有 this 的，也不能直接访问 Vue 实例上的方法（比如 $message、$refs、自定义的 $modal 等）。

但有时候你又需要这些功能，怎么办？

Vue 提供了一个方法：getCurrentInstance()

getCurrentInstance()：获取当前组件的内部实例对象。

Vue 3 最核心、最重要的两个概念：ref 和 reactive。它们是 Vue 3 响应式系统的基石

ref：用来包装基本类型数据（比如数字、字符串）或单个 DOM 元素，让它们变成“会自动更新的变量”。
reactive：用来包装对象或数组，让整个对象变成“会自动更新的”。

toRefs：能把 reactive 对象里的每个属性转成 ref，这样在模板或函数中可以直接用 queryParams（它是 ref，有 .value）。比如：const { queryParams, form, rules } = toRefs(data)

搞清楚script模块中每个变量、对象和函数的含义，就能知道前端的实现和交互逻辑了。

<template><div class="app-container"><el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="课程编码" prop="code"><el-inputv-model="queryParams.code"placeholder="请输入课程编码"clearable@keyup.enter="handleQuery"/></el-form-item><el-form-item label="课程学科" prop="subject"><el-select v-model="queryParams.subject" placeholder="请选择课程学科" clearable><el-optionv-for="dict in course_subject":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-form-item><el-form-item label="课程名称" prop="name"><el-inputv-model="queryParams.name"placeholder="请输入课程名称"clearable@keyup.enter="handleQuery"/></el-form-item><el-form-item label="适用人群" prop="applicablePerson"><el-inputv-model="queryParams.applicablePerson"placeholder="请输入适用人群"clearable@keyup.enter="handleQuery"/></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-buttontype="primary"plainicon="Plus"@click="handleAdd"v-hasPermi="['course:course:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="Edit":disabled="single"@click="handleUpdate"v-hasPermi="['course:course:edit']">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="Delete":disabled="multiple"@click="handleDelete"v-hasPermi="['course:course:remove']">删除</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="Download"@click="handleExport"v-hasPermi="['course:course:export']">导出</el-button></el-col><right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="courseList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="课程id" align="center" prop="id" /><el-table-column label="课程编码" align="center" prop="code" /><el-table-column label="课程学科" align="center" prop="subject"><template #default="scope"><dict-tag :options="course_subject" :value="scope.row.subject"/></template></el-table-column><el-table-column label="课程名称" align="center" prop="name" /><el-table-column label="价格" align="center" prop="price" /><el-table-column label="适用人群" align="center" prop="applicablePerson" /><el-table-column label="课程介绍" align="center" prop="info" /><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="['course:course:edit']">修改</el-button><el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['course:course:remove']">删除</el-button></template></el-table-column></el-table><paginationv-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="500px" append-to-body><el-form ref="courseRef" :model="form" :rules="rules" label-width="80px"><el-form-item label="课程编码" prop="code"><el-input v-model="form.code" placeholder="请输入课程编码" /></el-form-item><el-form-item label="课程学科" prop="subject"><el-select v-model="form.subject" placeholder="请选择课程学科"><el-optionv-for="dict in course_subject":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item><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="applicablePerson"><el-input v-model="form.applicablePerson" placeholder="请输入适用人群" /></el-form-item><el-form-item label="课程介绍" prop="info"><el-input v-model="form.info" placeholder="请输入课程介绍" /></el-form-item></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="Course">
import { listCourse, getCourse, delCourse, addCourse, updateCourse } from "@/api/course/course"const { proxy } = getCurrentInstance()
const { course_subject } = proxy.useDict('course_subject')const courseList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = 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,code: null,subject: null,name: null,applicablePerson: null,},rules: {code: [{ required: true, message: "课程编码不能为空", trigger: "blur" }],subject: [{ required: true, message: "课程学科不能为空", trigger: "change" }],name: [{ required: true, message: "课程名称不能为空", trigger: "blur" }],price: [{ required: true, message: "价格不能为空", trigger: "blur" }],applicablePerson: [{ required: true, message: "适用人群不能为空", trigger: "blur" }],info: [{ required: true, message: "课程介绍不能为空", trigger: "blur" }],}
})const { queryParams, form, rules } = toRefs(data)/** 查询课程管理列表 */
function getList() {loading.value = truelistCourse(queryParams.value).then(response => {courseList.value = response.rowstotal.value = response.totalloading.value = false})
}// 取消按钮
function cancel() {open.value = falsereset()
}// 表单重置
function reset() {form.value = {id: null,code: null,subject: null,name: null,price: null,applicablePerson: null,info: null,createTime: null,updateTime: null}proxy.resetForm("courseRef")
}/** 搜索按钮操作 */
function handleQuery() {queryParams.value.pageNum = 1getList()
}/** 重置按钮操作 */
function resetQuery() {proxy.resetForm("queryRef")handleQuery()
}// 多选框选中数据
function handleSelectionChange(selection) {ids.value = selection.map(item => item.id)single.value = selection.length != 1multiple.value = !selection.length
}/** 新增按钮操作 */
function handleAdd() {reset()open.value = truetitle.value = "添加课程管理"
}/** 修改按钮操作 */
function handleUpdate(row) {reset()const _id = row.id || ids.valuegetCourse(_id).then(response => {form.value = response.dataopen.value = truetitle.value = "修改课程管理"})
}/** 提交按钮 */
function submitForm() {proxy.$refs["courseRef"].validate(valid => {if (valid) {if (form.value.id != null) {updateCourse(form.value).then(response => {proxy.$modal.msgSuccess("修改成功")open.value = falsegetList()})} else {addCourse(form.value).then(response => {proxy.$modal.msgSuccess("新增成功")open.value = falsegetList()})}}})
}/** 删除按钮操作 */
function handleDelete(row) {const _ids = row.id || ids.valueproxy.$modal.confirm('是否确认删除课程管理编号为"' + _ids + '"的数据项？').then(function() {return delCourse(_ids)}).then(() => {getList()proxy.$modal.msgSuccess("删除成功")}).catch(() => {})
}/** 导出按钮操作 */
function handleExport() {proxy.download('course/course/export', {...queryParams.value}, `course_${new Date().getTime()}.xlsx`)
}getList()
</script>