[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-tZ8iDql5":3,"public-project-articles-tZ8iDql5":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},1282,"tZ8iDql5",49,"15. Springboot3+Vue3实现模块之间的关联","## 什么叫模块之间的关联？它都有哪些形式？\n1. 两个普通业务模块之间\n\n比如说：图书分类（小说、爱情、人文、教材）、图书信息（高等数学、……）\n\n商品分类：（男装、女装、零食……）、商品信息（瓜子、男士西服、女裙……）\n\n……\n\n2. 普通业务模块和角色模块之间\n\n旅游攻略（是哪个用户发布的）管理员可以看到所有人发布的，用户只能看到自己发布的\n\n教学计划（是由哪个教师负责的）\n\n任务管理（是由哪个用户负责的）\n\n……\n\n我们可以总结一下：它是一个业务模块，同时关联一个角色模块的id\n\n## 两个普通业务模块之间\n借助上节课的旅游攻略，我们做一个新的模块叫：攻略分类。然后把具体的旅游攻略跟攻略分类绑定上就可以了。\n\n```sql\nCREATE TABLE `category` (\n  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',\n  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '分类标题',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='攻略分类表';\n```\n\n怎么把旅游攻略和攻略分类关联上呢？\n\n1. 要在旅游攻略表里面创建一个关联字段（这不是让你创建一个外键，只是一个很普通的字段而已）\n2. 在实体类和sql里面对应的也加上这个字段\n3. 我要给这个字段初始化数据了，在页面新增或者编辑的时候，要把数据传递到后端，操作到数据库里\n\n```html\n\u003Cel-form-item prop=\"title\" label=\"攻略分类\">\n  \u003Cel-select\n      v-model=\"data.form.categoryId\"\n      placeholder=\"请选择攻略分类\"\n      style=\"width: 100%\"\n  >\n    \u003Cel-option\n        v-for=\"item in data.categoryData\"\n        :key=\"item.id\"\n        :label=\"item.title\"\n        :value=\"item.id\"\n    \u002F>\n  \u003C\u002Fel-select>\n\u003C\u002Fel-form-item>\n```\n\n```javascript\nconst loadCategory = () => {\n  request.get('\u002Fcategory\u002FselectAll').then(res => {\n    if (res.code === '200') {\n      data.categoryData = res.data\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\nloadCategory()\n```\n\n4. 数据库存的是分类的id，如何展示分类标题？有两个方法，我都教给你，看你喜欢哪个？\n    1. java代码里写关联逻辑\n\n```java\n\u002F\u002F 这个list里面存储了旅游攻略的原始数据（只有分类id，categoryId）\nfor (Introduction dbIntroduction : list) {\n    \u002F\u002F 先拿到categoryId\n    Integer categoryId = dbIntroduction.getCategoryId();\n    \u002F\u002F 通过categoryId从category表里通过主键查询出分类数据\n    Category category = categoryMapper.selectById(categoryId);\n    if (ObjectUtil.isNotEmpty(category)) {\n        \u002F\u002F 把分类的title赋值给categoryTitle\n        dbIntroduction.setCategoryTitle(category.getTitle());\n    }\n}\n```\n\n    2. sql里写关联逻辑\n\n```sql\nselect introduction.*, category.title as categoryTitle from `introduction`\nleft join category on introduction.category_id = category.id\n```\n\n\n\n## 业务模块与角色模块之间\n借助上节课的旅游攻略，我们把它跟用户角色关联上，达到用户只能看到自己发布的攻略，管理员可以看到所有的。\n\n怎么把旅游攻略和用户模块关联上呢？\n\n1. 要在旅游攻略表里面创建一个关联字段（这不是让你创建一个外键，只是一个很普通的字段而已）\n2. 在实体类和sql里面对应的也加上这个字段\n3. 我要给这个字段初始化数据了，在页面新增或者编辑的时候，要把数据传递到后端，操作到数据库里\n\n```java\nAccount currentUser = TokenUtils.getCurrentUser();\nintroduction.setUserId(currentUser.getId());\n```\n\n4. 数据库存的是分类的id，如何展示分类标题？有两个方法，我都教给你，看你喜欢哪个？\n    1. java代码里写关联逻辑\n    2. sql里写关联逻辑\n\n关联查询汇总代码（a和b两种方法）：\n\n```java\npublic PageInfo\u003CIntroduction> selectPage(Integer pageNum, Integer pageSize, Introduction introduction) {\n    \u002F\u002F 开启分页查询\n    PageHelper.startPage(pageNum, pageSize);\n    List\u003CIntroduction> list = introductionMapper.selectAll(introduction);\n    \u002F\u002F 这个list里面存储了旅游攻略的原始数据（只有分类id，categoryId）\n    \u002F*for (Introduction dbIntroduction : list) {\n        \u002F\u002F 先拿到categoryId\n        Integer categoryId = dbIntroduction.getCategoryId();\n        Integer userId = dbIntroduction.getUserId();\n        \u002F\u002F 通过categoryId从category表里通过主键查询出分类数据\n        Category category = categoryMapper.selectById(categoryId);\n        User user = userMapper.selectById(userId.toString());\n        if (ObjectUtil.isNotEmpty(category)) {\n            \u002F\u002F 把分类的title赋值给categoryTitle\n            dbIntroduction.setCategoryTitle(category.getTitle());\n        }\n        if (ObjectUtil.isNotEmpty(user)) {\n            dbIntroduction.setUserName(user.getName());\n        }\n    }*\u002F\n    return PageInfo.of(list);\n}\n```\n\n```sql\n\u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Introduction\">\n    select introduction.*, category.title as categoryTitle, user.name as userName from `introduction`\n    left join category on introduction.category_id = category.id\n    left join user on introduction.user_id = user.id\n    \u003Cwhere>\n        \u003Cif test=\"title != null and title != ''\">and introduction.title like concat('%', #{title}, '%')\u003C\u002Fif>  \u003C!-- 相当于 title like '%1%' -->\n    \u003C\u002Fwhere>\n    order by id desc\n\u003C\u002Fselect>\n```\n\n\n\n## 第13节权限补充\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F38425080\u002F1740565014085-eef357dc-0060-4978-8be1-d1f76fa3cb96.png)\n\n```java\n\u002F\u002F 查之前要先给他条件\nAccount currentUser = TokenUtils.getCurrentUser();\nif (\"USER\".equals(currentUser.getRole())) {\n    introduction.setUserId(currentUser.getId());\n}\n```\n\n","coding",1,4454,1529,"2025-02-26 18:28:55","2026-05-03 22:49:02","带小白做毕设2025系列课程","graduation-project-2025",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42,49,56,63,70,77,84,91,98,105,112,119,126,127,134,141,148,155],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},766,"XmlcAcY0","00. 带小白做毕设2025课程介绍",19012,1512,"2025-02-22 15:29:01","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},767,"nmjXCdVH","01. 前端Vue3 框架的快速搭建以及项目工程的讲解",15797,1513,"2025-02-13 17:13:40",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},768,"pMdPrVeH","02. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架",15959,1514,"2025-02-14 11:25:07",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},771,"8PikYMQU","03. Springboot3框架的快速搭建以及项目工程的讲解",12768,1517,"2025-02-21 17:21:51",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},772,"Q1TCG9Jj","04. Springboot3整合MyBatis实现数据库操作",11144,1518,"2025-03-07 15:50:30",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},773,"De7YPnEc","05. Springboot3+vue3实现增删改查、分页查询、批量删除（上）",10827,1519,"2025-02-22 15:09:19",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},774,"YKEHfsPd","06. Springboot3+vue3实现增删改查、分页查询、批量删除（下）",7760,1520,"2025-02-22 22:00:02",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},775,"sNDKpWVJ","07. Springboot3+Vue3实现excel批量导入导出",6552,1521,"2025-02-23 10:49:24",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},776,"1uMP9O6C","08. Springboot3+vue3实现登录注册功能",7964,1522,"2025-02-23 18:14:13",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},777,"WahvQp1v","09. Springboot3+vue3实现JWT登录鉴权",7151,1523,"2025-02-23 21:58:00",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},778,"QFFAqZh1","10. Springboot3+vue3实现文件上传和下载",6171,1524,"2025-02-24 14:16:27",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},1278,"S2eL2g5L","11. Springboot3+vue3实现个人中心、修改密码",5945,1525,"2025-02-24 18:10:59",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},1279,"LkN8Mmsn","12. Springboot3+Vue3实现系统公告功能",4967,1526,"2025-02-25 11:50:13",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},1280,"i7wziuEN","13. Springboot3+Vue3实现角色权限控制",4446,1527,"2025-02-25 11:51:38",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},1281,"pGwiTCRn","14. Springboot3+Vue3实现富文本编辑器功能",4578,1528,"2025-02-26 16:04:58",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1283,"gb01JPC2","16. Springboot3+Vue3实现echarts数据统计",4307,1530,"2025-03-03 16:58:21",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1284,"59bDkSFf","17. Springboot3+Vue3实现提交审核业务功能",3793,1531,"2025-03-04 11:58:16",{"id":142,"uuid":143,"project_id":6,"title":144,"type":9,"status":10,"public_enabled":10,"views":145,"sort":146,"created_at":147,"updated_at":14,"project_title":15,"project_slug":16},1285,"gApyb58X","18. Springboot3+Vue3实现预约审核业务功能",3332,1532,"2025-03-05 20:07:24",{"id":149,"uuid":150,"project_id":6,"title":151,"type":9,"status":10,"public_enabled":10,"views":152,"sort":153,"created_at":154,"updated_at":14,"project_title":15,"project_slug":16},1286,"XfpY5re0","19. Springboot3+Vue3实现前台首页的设计",3508,1533,"2025-03-05 20:08:12",{"id":156,"uuid":157,"project_id":6,"title":158,"type":9,"status":10,"public_enabled":10,"views":159,"sort":160,"created_at":161,"updated_at":14,"project_title":15,"project_slug":16},1287,"BnSPRBOc","20. Springboot3+Vue3实现前台轮播图和详情页的设计",4062,1534,"2025-03-17 17:13:36"]