Vue.js与后台交互：路由配置与用户管理
本文介绍了如何在Vue.js应用中配置路由，使得用户界面在主界面中打开并显示用户列表。详细讲解了父子组件间的路由跳转规则，以及在Home.Vue中设置router-view组件的方法。同时，讨论了页面生命周期函数、用户接口设计，特别是分页查询功能的实现。在后端，重点阐述了UserController、UserServiceImpl、UserMapper和服务接口的编辑过程，涉及模糊查询和Like操作。最后，提到了Vue.js的作用域插槽在表格数据展示中的应用以及新建用户表单的验证逻辑。
1.路由配置
使User加入到京淘项目中的表单中打开
（所展现的不是最终效果）
进行对User的跳转的界面停留在主界面中，并且点开用户列表表单时显示在当前的界面中
（要想在此处显示-->在Home.Vue中加入router-view路由占位组件）
1.1.2 路由跳转规则：
格式例子（仅供参考）：
1.1.3父子组件跳转
（实现User表单显示在当前的页面中）
在Home.Vue中设则路由跳转规则：<router-link></router-link>
在index.Vue中加入配置
1.2.1 页面JS分析：
1.生命周期函数
1.2.2用户页面接口：
（使京淘系统页面的查询数据添加页数切换功能）
注意：GetMapping请求无需加（@RequestBody)
putMapping/po(才需加入 @RequestBody）
1.2.3总数分页的构造：
2.模糊查询：
Like 所查询的字需要使用"%文字%"百分号包裹起来进行模糊查询
3.步骤：
3.1编辑UserController
3.2编辑UserServiceImpl
3.3编辑UserMapper
3.4编辑UserService
3.5编辑UserMapper映射文件
3.6最终效果
4.业务说明：
4.1VUE.JS 作用域插槽
说明：一般在表格数据中可能展现的数据遍布全，如果需要获取全部信息，则一般使用作用域插槽
基本语法：当前行数显示全部的数据信息：{{scope.row}}
4.2页面JS分析
点击确定事件
校验进行判断如果输入不符合格式则显示false
如果输入符合格式则显示true
4.3新建用户的操作
将新建用户的表单的数据继承到BasePojo
实现类
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
