系列文章目录

系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

项目资源下载

GitHub下载地址
Gitee下载地址
项目MySql数据库文件

文章目录

系列文章目录
项目资源下载
前言
一、创建所需要的数据库表和后端基础代码
二、设置用户角色之间的关系
三、用户角色关系的后端功能实现以及前端页面设计
四、实现一对一关联查询
五、实现一对多关联查询
六、实现多对多关联查询
总结

前言

今天的主要内容包括：创建所需要的数据库表和后端基础代码、设置用户角色之间的关系、用户角色关系的后端功能实现以及前端页面设计、实现一对一关联查询、实现一对多关联查询、实现多对多关联查询等。今天的内容也比较多，都是数据库的一些基本操作，也有一定难度，还请坚持住。下面就开始今天的学习！

一、创建所需要的数据库表和后端基础代码

按照如下内容输入数据表
然后保存并命名为“course”
然后resources/templates/controller.java.vm全部替换为如下内容

package ${package.Controller};import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.ironmanjay.springboot.common.Result;import ${package.Service}.${table.serviceName};
import ${package.Entity}.${entity};#if(${restControllerStyle})
import org.springframework.web.bind.annotation.RestController;
#else
import org.springframework.stereotype.Controller;
#end
#if(${superControllerClassPackage})
import ${superControllerClassPackage};
#end/*** <p>* $!{table.comment} 前端控制器* </p>** @author ${author}* @since ${date}*/
#if(${restControllerStyle})
@RestController
#else
@Controller
#end
@RequestMapping("#if(${package.ModuleName})/${package.ModuleName}#end/#if(${controllerMappingHyphenStyle})${controllerMappingHyphen}#else${table.entityPath}#end")
#if(${kotlin})
class ${table.controllerName}#if(${superControllerClass}) : ${superControllerClass}()#end#else#if(${superControllerClass})public class ${table.controllerName} extends ${superControllerClass} {#elsepublic class ${table.controllerName} {#end@Resource
private ${table.serviceName} ${table.entityPath}Service;// 新增或者更新
@PostMapping
public Result save(@RequestBody ${entity} ${table.entityPath}) {${table.entityPath}Service.saveOrUpdate(${table.entityPath});return Result.success();}@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {${table.entityPath}Service.removeById(id);return Result.success();}@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids) {${table.entityPath}Service.removeByIds(ids);return Result.success();}@GetMapping
public Result findAll() {return Result.success(${table.entityPath}Service.list());}@GetMapping("/{id}")
public Result findOne(@PathVariable Integer id) {return Result.success(${table.entityPath}Service.getById(id));}@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize) {QueryWrapper<${entity}> queryWrapper = new QueryWrapper<>();queryWrapper.orderByDesc("id");return Result.success(${table.entityPath}Service.page(new Page<>(pageNum, pageSize), queryWrapper));}}#end

然后将CodeGenerator.java中生成的表名（course）输入进去
还要注意代码生成器自己的输出路径
然后使用代码生成器生成代码，发现已经成功生成代码了

二、设置用户角色之间的关系

然后在后台中编辑和新增角色
然后设置每个用户的角色，当然这个完全可以根据用户自己的喜好创建

三、用户角色关系的后端功能实现以及前端页面设计

新建关于“课程管理”页面的路由
最后生成新的菜单如下所示
然后给管理员添加“课程管理”的页面权限

绑定之后需要重新登陆
重新登陆后我们发现已经成功将“课程管理”页面授权了，但是还没有页面内容，下面的工作就是完成“课程管理”的页面内容
在UserController.java中新增查询当前角色的所有用户的功能函数
然后将Course.vue中的内容全部替换为如下内容

<template><div><div style="margin: 10px 0"><el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input><el-button class="ml-5" type="primary" @click="load">搜索</el-button><el-button type="warning" @click="reset">重置</el-button></div><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='我再想想'icon="el-icon-info"icon-color="red"title="您确定批量删除这些数据吗？"@confirm="delBatch"><el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></div><el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="ID" width="80"></el-table-column><el-table-column prop="name" label="课程名称"></el-table-column><el-table-column prop="score" label="分数"></el-table-column><el-table-column prop="times" label="课时"></el-table-column><el-table-column prop="teacher" label="授课老师"></el-table-column><el-table-column label="启用"><template slot-scope="scope"><el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ccc"@change="changeEnable(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="200" align="center"><template slot-scope="scope"><el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='我再想想'icon="el-icon-info"icon-color="red"title="您确定删除吗？"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[2, 5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><el-dialog title="课程信息" :visible.sync="dialogFormVisible" width="30%"><el-form label-width="80px" size="small"><el-form-item label="名称"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="学分"><el-input v-model="form.score" autocomplete="off"></el-input></el-form-item><el-form-item label="课时"><el-input v-model="form.times" autocomplete="off"></el-input></el-form-item><el-form-item label="老师"><el-select clearable v-model="form.teacherId" placeholder="请选择"><el-option v-for="item in teachers" :key="item.id" :label="item.nickname":value="item.id"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div>
</template><script>export default {name: "Course",data() {return {form: {},tableData: [],name: '',multipleSelection: [],pageNum: 1,pageSize: 10,total: 0,dialogFormVisible: false,teachers: [],user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},}},created() {this.load()},methods: {load() {this.request.get("/course/page", {params: {pageNum: this.pageNum,pageSize: this.pageSize,name: this.name,}}).then(res => {this.tableData = res.data.recordsthis.total = res.data.total});this.request.get("/user/role/ROLE_TEACHER").then(res => {this.teachers = res.data})},changeEnable(row) {this.request.post("/course/update", row).then(res => {if (res.code === '200') {this.$message.success("操作成功")}})},del(id) {this.request.delete("/course/" + id).then(res => {if (res.code === '200') {this.$message.success("删除成功")this.load()} else {this.$message.error("删除失败")}})},handleSelectionChange(val) {console.log(val)this.multipleSelection = val},delBatch() {let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]this.request.post("/course/del/batch", ids).then(res => {if (res.code === '200') {this.$message.success("批量删除成功")this.load()} else {this.$message.error("批量删除失败")}})},save() {this.request.post("/course", this.form).then(res => {if (res) {this.$message.success("保存成功")this.dialogFormVisible = falsethis.load()} else {this.$message.error("保存失败")}})},reset() {this.name = ""this.load()},handleAdd() {this.dialogFormVisible = truethis.form = {}},handleEdit(row) {this.form = rowthis.dialogFormVisible = true},handleSizeChange(pageSize) {console.log(pageSize)this.pageSize = pageSizethis.load()},handleCurrentChange(pageNum) {console.log(pageNum)this.pageNum = pageNumthis.load()},download(url) {window.open(url)}}}
</script><style scoped></style>

然后来到前端发现已经成功显示“课程管理”界面了，我们在里面新增数据，这个数据可以随意新增
然后我们发现已经成功新增课程信息了
接下来我们还要给本门课程分配授课老师
分配之后页面并没有显示
但是数据库已经存进数据了
因为我们在数据库中存储的是授课老师的id，而在页面要展示授课老师的名称，如下所示。那么接下来的任务就是实现关联查询，可以根据授课老师的id显示授课老师的名称

四、实现一对一关联查询

在前端的request.js中修改超时时间为30s
然后在Course.java中新增teacher字段，要注意注解要和我保持一样，因为这个是默认不存在的，如果不加这个注解就会报错
然后在CourseMapper.xml中新建关联查询的sql语句
然后在CourseMapper.java中新建如下mapper
然后在CourseServiceImpl.java加入如下代码
然后在ICourseService.java中加入如下代码
然后修改CourseController.java中的findPage函数，返回所需的数据
然后此时我们来到前端发现，我们刚才分配的授课老师已经成功显示了，这样我们就实现了关联查询

五、实现一对多关联查询

当我们授课老师讲授多门课的时候，就要建立授课老师和课程名称的多对一关系，所以接下来的任务就是如何实现查看老师所讲授的所有课程
我们首先修改User.vue中的如下几个部分，给老师角色新增查看所有教授课程和课程学分的点击表格
然后我们来到前端测试发现已经成功显示了，当然现在还没有数据，那么接下来的任务就是成功显示数据
然后我们再修改User.vue中的如下部分
然后来到前端测试，发现角色一栏已经不是英文标记了，而是英文标记对应的中文标签，这样好看一些
接下来就要实现我们授课老师和课程名称的多对一关系了，首先在User.java实体类中新增如下字段，为了保存当前老师教授的所有课程
然后修改User.vue中此部分内容
然后将UserMapper.xml全部修改为如下内容

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ironmanjay.springboot.mapper.UserMapper"><update id="updatePassword">update sys_user set `password` = #{userPasswordDTO.newPassword} where `username` = #{userPasswordDTO.username};</update><resultMap id="pageUser" type="com.ironmanjay.springboot.entity.User"><result column="id" property="id"></result><result column="username" property="username"></result><result column="nickname" property="nickname"></result><result column="email" property="email"></result><result column="phone" property="phone"></result><result column="address" property="address"></result><result column="create_time" property="createTime"></result><result column="avatar" property="avatar"></result><result column="role" property="role"></result><collection property="courses" javaType="java.util.ArrayList" ofType="com.ironmanjay.springboot.entity.Course"><result column="name" property="name"></result><result column="score" property="score"></result></collection></resultMap><select id="findPage" resultMap="pageUser">select sys_user.*,course.* from sys_userleft join courseon sys_user.id = course.teacher_id<where><if test="username != null and username != ''">and sys_user.username like concat('%',#{username},'%')</if><if test="email != null and email != ''">and sys_user.email like concat('%',#{email},'%')</if><if test="address != null and address != ''">and sys_user.address like concat('%',#{address},'%')</if></where></select></mapper>

然后在UserMapper.java中加入如下内容
然后在UserServiceImpl.java中加入如下内容
然后在IUserService.java中加入如下内容
然后修改UserController.java中的如下部分
最后来到前端测试，发现已经成功建立起了授课老师和课程名称的一对多关系

六、实现多对多关联查询

首先新建一个关系数据表，如下配置
名称为student_course
为了让学生可以看到课程信息，给学生角色分配课程管理菜单
为了避免学生角色新增、删除和编辑课程，在Course.vue中添加如下代码
然后在Course.vue中新增学生选课的按钮，并修改按钮间距
然后在CourseMapper.xml中新增如下内容
然后在CourseMapper.java中加入如下内容
然后在CourseServiceImpl.java中加入如下内容
然后在ICourseService.java中加入如下内容
然后在CourseController.java中加入如下内容
然后在Course.vue中加入如下函数
然后此时前端界面已经有了选课按钮
为了后面可以成功以学生角色选课，我们还需要保存当前学生角色的id，我么我们需要在UserDTO.java中新增一个字段，这样在学生角色登录的时候我们就可以获取到他的id了
然后我们使用学生角色重新登陆
然后我们使用登录的学生角色选课，发现已经成功选课了
然后查看数据表，发现数据也已经成功保存了
为了让管理员可以看到学生选了哪些课程，我们首先以管理员角色登录
然后在User.vue中新增查看选课信息的按钮
然后修改User.vue中如下几处内容
此时已经可以在前端看见查看学生的选课记录按钮了，现在我们只需要获取到相应数据即可
然后来到User.java中新增学生选课字段
为了查到学生的选课记录，将UserMapper.xml全部替换为如下内容，各位读者要注意和自己的包名相匹配

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ironmanjay.springboot.mapper.UserMapper"><update id="updatePassword">update sys_user set `password` = #{userPasswordDTO.newPassword} where `username` = #{userPasswordDTO.username};</update><resultMap id="pageUser" type="com.ironmanjay.springboot.entity.User"><result column="id" property="id"></result><result column="username" property="username"></result><result column="nickname" property="nickname"></result><result column="email" property="email"></result><result column="phone" property="phone"></result><result column="address" property="address"></result><result column="create_time" property="createTime"></result><result column="avatar" property="avatar"></result><result column="role" property="role"></result><collection property="courses" javaType="java.util.ArrayList" ofType="com.ironmanjay.springboot.entity.Course"><result column="teacherCourseName" property="name" /><result column="teacherScore" property="score" /></collection><collection property="stuCourses" javaType="java.util.ArrayList" ofType="com.ironmanjay.springboot.entity.Course"><result column="stuCourseName" property="name" /><result column="stuScore" property="score" /></collection></resultMap><select id="findPage" resultMap="pageUser">select sys_user.*, sc.name as stuCourseName, tc.name as teacherCourseName, tc.score as teacherScore, sc.score as stuScore from sys_userleft join student_courseon sys_user.id = student_course.student_idleft join course scon student_course.course_id = sc.idleft join course tcon sys_user.id = tc.teacher_id<where><if test="username != null and username != ''">and sys_user.username like concat('%',#{username},'%')</if><if test="email != null and email != ''">and sys_user.email like concat('%',#{email},'%')</if><if test="address != null and address != ''">and sys_user.address like concat('%',#{address},'%')</if></where></select></mapper>

然后来到前端测试，发现已经成功显示了学生的选课信息，我们也就完成了学生与课程信息的多对多关联关系

总结

以上就是今天学习的全部内容了，内容虽然比昨天的少了一些，但还是不少啊，继续加油！明天将会带来用户前台页面设计与实现的相关内容。明天见！

SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）相关推荐

SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
springboot实战项目——个人博客系统
1.项目介绍 1.1项目效果博客首页登录功能注册功能文章分类文章归档文章页面发布文章 (集成富文本编译器) 1.2项目使用技术前端: vue element-ui 后端: Spring ...
SpringBoot入门建站全系列（二十八）整合Kafka做日志监控
SpringBoot入门建站全系列(二十八)整合Kafka做日志监控一.概述 Apache Kafka是一个分布式发布 - 订阅消息系统和一个强大的队列,可以处理大量的数据,并使您能够将消息从一个端 ...
java后台oa项目整套,[VIP源码]【S020】springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码...
java源码项目名称:springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码springboot项目源码0 `" C+ a" `" ~0 ...
Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括:文章展示.热门文章.文章分类.标签云用户登录评论.匿名评论用户留言.匿名留言评论管理.文章发布.文章管理文章数 ...
一款小清新的 SpringBoot+ Mybatis 前后端分离后台管理系统项目
今日推荐推荐3个快速开发平台前后端都有项目经验又有着落了推荐一个高仿微信的项目有点屌!!一二线城市知名 IT 互联网公司名单(新版) 项目介绍前后端分离架构,分离开发,分离部署,前后端互不影 ...
基于SpringBoot+Vue开发的前后端分离博客项目-Java后端接口开发
文章目录 1. 前言 2. 新建Springboot项目 3. 整合mybatis plus 第一步:导依赖第二步:写配置文件第三步:mapper扫描+分页插件第四步:代码生成配置第五步:执行 ...

SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）