目录

vue模板框架-配置路由-跟后端数据连起来

目录

vue模板框架 配置路由 跟后端数据连起来

1.新建一个vue类型的文件

https://i-blog.csdnimg.cn/blog_migrate/181440a3939583831771fd6e0efd379f.png

2.配置路由

https://i-blog.csdnimg.cn/blog_migrate/20e9c85a8739a9e08238351ac13b429a.png

3.在home.vue 添加跳转

https://i-blog.csdnimg.cn/blog_migrate/b253187da0d0fa31fe905c466f0ad87f.png

  1. 学生页面已加载 立马请求 后台查询拿到结果 打印

https://i-blog.csdnimg.cn/blog_migrate/79c90455d55f7335573dfac99ef19c27.png

https://i-blog.csdnimg.cn/blog_migrate/61c6e0f672189c45e1b4a2be6f78380b.png

5.把数据绑定给我们的集合变量 定义一个变量 在table组件使用这个变量 并显示 这个变量的指定属性

https://i-blog.csdnimg.cn/blog_migrate/547bce6569f6f88c57823e275010827c.png

https://i-blog.csdnimg.cn/blog_migrate/d2d46f3ffb223e86a8009348ec0ce559.png

6在页面加上搜索框

https://i-blog.csdnimg.cn/blog_migrate/386da04f6d784b9331e3bfb78b7a3888.png

https://i-blog.csdnimg.cn/blog_migrate/2b1919d1788a41d2b935f62b71d0d8b4.png

7.点击放大镜 调findAll 方法

https://i-blog.csdnimg.cn/blog_migrate/a76eeaef14a77303c2274fffd233ac57.png

8.点击放大镜查询按钮 给文本双向绑定一个查询条件 这个条件对象是要传到后台接口去的 默认现在查询条件是空

https://i-blog.csdnimg.cn/blog_migrate/26ae6cde8bc724aeef76409e9ce891d5.png

https://i-blog.csdnimg.cn/blog_migrate/70df256e4e8a2bbe7c2fbb6b61966885.png

9.把查询条件 传递到接口

https://i-blog.csdnimg.cn/blog_migrate/f1ea964c25ec2ce982c625694b86a586.png

现在测试

第一次运行的时候

https://i-blog.csdnimg.cn/blog_migrate/aaf5ef76c12457246f43db33c40b0f77.png 点放大镜查询

https://i-blog.csdnimg.cn/blog_migrate/2c677f7693fb4a8bac46d2862cee074c.png