整合CRUD
前后端对接流程
我们这里拿查询所有user做实例
全栈开发流程
添加路由
模板中给的其实也有目录,我们看着复制粘贴根据自己的需求改改即可
点击路由显示页面
redirect:'/teacher/table'作用是当访问/teacher时会自动跳到/teacher/table
component是做布局的,就是页面做固定不动的部分
在api文件夹创建js文件,定义接口地址和参数
创建vue页面引入js文件,调用方法实现功能
我们先来了解一下response对象
以下是response对象的属性和方法
所以说,response就是代表接口返回的数据
在看我们后端定义的接口
这里的scope.row是获取行数据是固定写法
这样功能就实现了
==补充下分页条实现方式==
分页条
直接拿element-ui里面的来用就可以
因为我分页条和表单在同一页面,所以写在同一组件下
多条件查询
直接拿element-ui里面的来用就可以
因为我分页条和表单在同一页面,所以写在同一组件下
主要是js对象和java对象的问题,注意区分即可
其余的也是直接用element-ui组件直接拿过来改改数据
有了查询对象之后把查询对象传入我们写的获取讲师列表即可
我们在查询按钮绑定方法
测试
删除功能
增加功能
3、定义增加API
4、引入js,写vue页面
5、测试
6、补充
修改功能
我们想让增加和修改在同一页面下进行
增加和修改不同点在于,修改要做数据回显
那么如何区分这两个请求呢?
答案是修改的时候地址栏会有id,而保存没有
定义Api、定义路由、定义跳转路径
==修改功能逻辑==
测试
修改成功