新手做毕设---后台管理系统
任务六 前后端数据跨域连接(分页查询并显示)https://editor.csdn.net/md/?articleId=128726353
任务七 前端向后端传参(按姓名模糊查询)
任务六我们通过后端解决跨域允许访问问题,实现前后端跨域连接,并且把查询到的数据在前端进行分页展示。任务六从学习的角度来说,是一次质的飞越,这一个任务完成了,后面的任务大家做起来都不会觉得难,因为你已经基本了解了前后端分离项目开发的基本原理。
本次任务比较简单,主要实现前端数据作为参数向后端传送,后端根据参数进行数据操作。通过本次任务,大家能够:
(1)掌握前端数据向后端传送方式;
(2)掌握后端接收前端数据;
(3)再次巩固前后端跨域访问。
一、后端添加模糊查询
按姓名模糊查询核心就是:当前查看第几页(pageNum),每页需要显示多少条记录(pageSize),再加上姓名
查找语句为:select * from sys_user where username like #{userName} limit #{pageNum},#{pageSize}
1. UserMapper接口改造分页查询和统计汇总方法
UserMapper接口改造分页查询方法,添加上按姓名模糊查询,代码如下:
List<User> selectPage(Integer pageNum, Integer pageSize,String userName);
UserMapper接口改造统计汇总方法,添加上按姓名模糊查询,代码如下:
/*@Select("select count(*) from sys_user where username like #{userName}")
Integer selectTotal(String userName);
2.UserService类改造selectPage方法
在UserService类,修改selectPage方法,代码如下:
public List<User> selectPage(Integer pageNum, Integer pageSize, String userName) {
return userMapper.selectPage(pageNum,pageSize,userName);
}
3. UserController类改造findPage方法
在UserController类,修改映射方法findPage,代码如下:
@GetMapping(“/page”)
public Map<String,Object> findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam String userName){
userName=“%” + userName + “%”;
pageNum=(pageNum-1)*pageSize;
List data=userService.selectPage(pageNum,pageSize,userName);
Integer total=userMapper.selectTotal(userName);
Map<String,Object> res=new HashMap<>();
res.put(“data”,data);
res.put(“total”,total);
return res;
}
关于@RequestBody和@RequestParam区别,这篇博客写得比较全面详细,大家可以参考,我们这里就不过多介绍,大家记住一点,如果是单个的参数传递,一般我们就用@RequestParam,如果是批量数据处理的,比如要批量删除(我们再任务九就会用到)我们就用@RequestBody。
4.运行项目
使用postman作为测试接口,进行按照姓名模糊查询并分页显示。
二、前后页面传递姓名参数
修改前端页面就比较简单了,主要是把文本框username的值传输到后端即可。
1. 在输入姓名的文本框中进行双向绑定
<el-input style="width:250px" suffix-icon="el-icon-search" placeholder="请输入名称搜索" v-model="userName"></el-input>
2. data中定义userName字段
在data中添加userName字段,初始值为空。
3.跨域传参
跨域时将userName参数也传递过去,修改load方法。
load() {
//请求分页查询数据
fetch("http://localhost:8084/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+" &userName="+this.username+"").then(res=>res.json()).then(res=>{
console.log(res)
this.tableData=res.data
this.total=res.total
})
}
4. 为“搜索”按钮添加单击调用load方法事件
为“搜索”按钮添加单击调用load方法事件,代码如下:
<el-button style="margin-left:5px" type="primary" @click="load">搜索</el-button>
5. 保存运行
注意: 确保启动前端,查看结果。
任务总结
本次任务看上去比较简单,功能上只是实现了按姓名模糊查询,但是,从大家的知识学习上却了解了前端参数如何传输到后端,后端根据拿到的数据,然后进行数据操作,再将最终数据返回到前端。
本次任务,主要完成并掌握以下内容:
(1)前后端参数传递方法;
(2)前端参数封装。