（七）---前端向后端传参---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建_vue+flask+mysql+elementui 数据怎么传输

任务六 前后端数据跨域连接（分页查询并显示）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);
1

UserMapper接口改造统计汇总方法，添加上按姓名模糊查询，代码如下：

 /*@Select("select count(*) from sys_user where username like #{userName}")
     Integer selectTotal(String userName);
1
2

2.UserService类改造selectPage方法

在UserService类，修改selectPage方法，代码如下：

public List<User> selectPage(Integer pageNum, Integer pageSize, String userName) {
    return userMapper.selectPage(pageNum,pageSize,userName);
}
1
2
3
4
5

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>
1

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
          })
        }
1
2
3
4
5
6
7
8
9

4. 为“搜索”按钮添加单击调用load方法事件

为“搜索”按钮添加单击调用load方法事件，代码如下：

 <el-button style="margin-left:5px" type="primary" @click="load">搜索</el-button>
1

5. 保存运行

注意： 确保启动前端，查看结果。

任务总结

本次任务看上去比较简单，功能上只是实现了按姓名模糊查询，但是，从大家的知识学习上却了解了前端参数如何传输到后端，后端根据拿到的数据，然后进行数据操作，再将最终数据返回到前端。
本次任务，主要完成并掌握以下内容：
（1）前后端参数传递方法；
（2）前端参数封装。