若依使用基本步骤

Orange_sparkle2025-10-15 19:58

一、后端

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 操作接口。

javascript 复制代码 
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中的调用后端的接口

javascript 复制代码 
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模块中每个变量、对象和函数的含义，就能知道前端的实现和交互逻辑了。

javascript 复制代码 
<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-input
          v-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-option
            v-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-input
          v-model="queryParams.name"
          placeholder="请输入课程名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="适用人群" prop="applicablePerson">
        <el-input
          v-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-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['course:course:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['course:course:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['course:course:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="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>
    
    <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="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-option
              v-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 = true
  listCourse(queryParams.value).then(response => {
    courseList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
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 = 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
  getCourse(_id).then(response => {
    form.value = response.data
    open.value = true
    title.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 = false
          getList()
        })
      } else {
        addCourse(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 delCourse(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('course/course/export', {
    ...queryParams.value
  }, `course_${new Date().getTime()}.xlsx`)
}

getList()
</script>

2、后端

以课程管理子页面为例，若依自动生成代码时，后端会生成两个文件夹，是java和resources。

JAVA文件夹

Controller（控制器）

  • 路径示例：com.ruoyi.xxx.controller.XxxController
  • 作用：接收前端 HTTP 请求，调用 Service 处理业务，返回 JSON 或页面。
  • 使用 @RestController 或 @Controller，配合 @RequestMapping。

Service 接口与实现类（业务逻辑层）

  • 接口路径：com.ruoyi.xxx.service.IXxxService
  • 实现类路径：com.ruoyi.xxx.service.impl.XxxServiceImpl
  • 作用：封装业务逻辑，调用 Mapper 操作数据库。
  • 通常使用 @Service 注解，并注入 Mapper。

Entity（实体类）

  • 路径示例：com.ruoyi.xxx.domain.Xxx
  • 作用：映射数据库表结构，每个字段对应数据库表的一列。
  • 使用 JPA 注解（如 @Table, @Id, @Column）或 MyBatis 注解（如 @Data 来自 Lombok）。
Mapper 接口（DAO 层）
  • 路径示例：com.ruoyi.xxx.mapper.XxxMapper
  • 作用：定义对数据库的操作方法（如增删改查）。
  • 继承 BaseMapper<T>（MyBatis-Plus）或使用 MyBatis 的 XML 映射。

resources文件夹

resources 文件夹（通常位于 src/main/resources）存放 非代码资源文件，在项目编译后会被打包到 classpath 中。

MyBatis Mapper XML 文件（若未使用 MyBatis-Plus 全注解）
  • 路径示例：resources/mapper/xxx/XxxMapper.xml
  • 作用：定义 SQL 语句，与 Mapper 接口方法对应。
  • 若使用 MyBatis-Plus 且仅用通用 CRUD，可能不需要 XML；但复杂查询仍需 XML。

3、整体流程

（1）前端views/course/course/index.vue代码中默认初始化时调用getList()函数

javascript 复制代码 
/** 查询课程管理列表 */
function getList() {
  loading.value = true
  listCourse(queryParams.value).then(response => {
    courseList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

并传入响应式变量queryParams到listCourse的API接口

javascript 复制代码 
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" }
    ],
  }
})

（2）调用api/course/course.js中的listCourse接口，向后端传送信息并接收返回的结果

javascript 复制代码 
import request from '@/utils/request'

// 查询课程管理列表
export function listCourse(query) {
  return request({
    url: '/course/course/list',
    method: 'get',
    params: query
  })
}

（3）后端的Controller类接收到前端的请求，将参数传给自动注入的Service类courseService，并调用selectCourseList方法

javascript 复制代码 
@RestController
@RequestMapping("/course/course")
public class CourseController extends BaseController
{
    @Autowired
    private ICourseService courseService;

    /**
     * 查询课程管理列表
     */
    @PreAuthorize("@ss.hasPermi('course:course:list')")
    @GetMapping("/list")
    public TableDataInfo list(Course course)
    {
        startPage();
        List<Course> list = courseService.selectCourseList(course);
        return getDataTable(list);
    }

（4）点击selectCourseList方法跳转到业务逻辑的接口类方法，再点击进入实现类

（5）@Service注解将业务类交给IOC容器管理，成为IOC容器中的bean。自动注入mapper数据层接口，并调用方法selectCourseList。

（6）点击selectCourseList方法跳转到mapper接口类，点击进入实现类

（7）mapper标签绑定接口类，resultMap表示映射的目标 Java 类（这里为Course），

  • <result>：普通字段映射，property 是 Java 属性名，column 是数据库列名。
  • <sql> 标签用于定义可重用的 SQL 片段
  • <include refid="selectCourseVo"/> 会被 MyBatis 在运行时替换为 <sql id="selectCourseVo"> 中定义的 SQL 内容。
  • #{name} 会自动从传入的 Course 对象中调用 getName() 获取值，比如传入的queryParams
javascript 复制代码 
queryParams: {
    pageNum: 1,
    pageSize: 10,
    code: null,
    subject: null,
    name: null,
    applicablePerson: null,
  }

（8）返回从数据库中检索的结果到前端进行展示

相关推荐
kevinfkq3 小时前
Java-idea编辑器中Jar方式打包启动
java·intellij-idea·jar
€8113 小时前
Java入门级教程23——配置Nginx服务器、轻量级HTTP服务开发、前后端分离实现完整应用系统
java·开发语言·仓颉·生成验证码
星秀日3 小时前
框架--SpringMVC
java·开发语言·servlet
小蒜学长4 小时前
springboot餐厅信息管理系统设计（代码+数据库+LW）
java·数据库·spring boot·后端
Jabes.yang4 小时前
Java大厂面试实录：从Spring Boot到微服务的技术探讨
java·spring boot·spring cloud·微服务·技术面试
高山上有一只小老虎4 小时前
idea字体大小设置
java
jiunian_cn4 小时前
【Linux】高级IO
java·linux·服务器
要天天开心啊5 小时前
Java序列化和反序列化
java·开发语言
zz-zjx5 小时前
Tomcat核心架构与生产部署指南
java·运维·tomcat
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02BongoCat - 跨平台键盘猫动画工具03GitHub 镜像站点04UV安装并设置国内源05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程07智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践0846个Nano-banana 精选提示词，持续更新中092025羊城杯网络安全大赛 wp10UV 工具安装与国内镜像源配置指南