vue iview中向后端请求springboot后端数据searchForm表单中字段显示undefined的问题。

这个问题困扰了我一天的时间。

首先简单说明以下，我前端请求一开始用的POST，请求代码片段如下：

export const postRequest = (url, params) => {
    let accessToken = getStore("accessToken");
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            ret = ret.substring(0, ret.length - 1);
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'accessToken': accessToken
        }
    });
};

this.postRequest("/question/getByConditionMp", this.searchForm).then(res => {
    //请求成功后的代码省略...
})

searchForm中的数据如下（模板代码我就省略了）：

searchForm: {
					// 搜索框对应data对象
					status: "",
					question_type: "",
					difficulty: "",
					score: "",
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "createTime", // 默认排序字段
					order: "desc" // 默认排序方式
				},

SpringBoot后端接收代码如下：

@RequestMapping(value = "/getByConditionMp", method = RequestMethod.POST)
	@ResponseBody
	@ApiOperation(value = "根据Condition查询,MP方式")
	public Result<IPage<Map<String, Object>>> getByConditionMp(Question question, PageVo pageVo) {
		System.out.println("参数为"+question.toString());
		question.setId(null); //加这行的目的时我这里Id是利用代码逻辑生成的，即使查询操作也会有id生成，而我这里查询是基本不会用到id查询的，所以我就把id设置为null了

		QueryWrapper<Question> queryWrapper = new QueryWrapper<>(question);

		IPage<Map<String, Object>> page = PageUtil.initMpPage(pageVo);
		iQuestionService.pageMaps(page, queryWrapper);

		List<Map<String, Object>> records = page.getRecords();

以上代码能正常获取到后端数据，但是有一个非常奇怪的问题，前端初始页面时能正常获取到数据，根据页面上这几个条件查询也没有问题，然而表单利用this.$refs.searchForm.resetFields()重置以后，再重新请求后端，第一次点击重置按钮，就会报错（后端返回的错误）nested exception is java.lang.NumberFormatException: For input string: "undefined"，第二次点击就不会报错，非常奇怪。

然后打开浏览器查看网络请求，发现凡是在搜索表单searForm中更改过的参数，在第一次重置的时候，都变成了undefined，而第二次点击又变成了什么都没有，应该就是空字符串。

于是尝试各种修改前端代码，都没能成功，问题依旧。

然而。。。我试着把post请求换成了get请求，同时把后端改成get请求，竟然不报错了。

前端请求代码片段如下：

export const getRequest = (url, params) => {
    let accessToken = getStore('accessToken');
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params,
        headers: {
            'accessToken': accessToken
        }
    });
};

this.getRequest("/question/getByConditionMp", this.searchForm).then(res => {
    //请求成功后的代码省略...
})

后端代码就是把post换成了get而已，其他没有变：

@RequestMapping(value = "/getByConditionMp", method = RequestMethod.GET)
	@ResponseBody
	@ApiOperation(value = "根据Condition查询,MP方式")
	public Result<IPage<Map<String, Object>>> getByConditionMp(Question question, PageVo pageVo) {
		System.out.println("参数为"+question.toString());
		question.setId(null); //加这行的目的时我这里Id是利用代码逻辑生成的，即使查询操作也会有id生成，而我这里查询是基本不会用到id查询的，所以我就把id设置为null了

		QueryWrapper<Question> queryWrapper = new QueryWrapper<>(question);

		IPage<Map<String, Object>> page = PageUtil.initMpPage(pageVo);
		iQuestionService.pageMaps(page, queryWrapper);

		List<Map<String, Object>> records = page.getRecords();

再也没有出现过前端请求的searchForm表单中的属性值是undefined的问题，我目前也不知道前端请求体里面显示undefined为什么还和后端有关系，留待日后完善或有大神告知吧。

 

另外，因为我前端查询时有like的有eq的，比如标题就是模糊查询，分数就是完全相等，这个怎么搞呢，我一开始搜了很多帖子都看不明白，我看有自己写注解往实体类上面加的，最后发现mybatis plus已经有现成的注解了，那就是：

@TableField(condition = SqlCondition.LIKE)

只需要把它放在需要模糊查询的实体类属性里面就可以了，就是这么简单。