vue使用axios对后端接口发送post请求

后端接口

/***
     * 分页条件查询
     * @param current 当前页
     * @param limit   每页页数
     * @param projectQuery  查询条件
     * @return
     */
    @PostMapping("pageCondition/{current}/{limit}")
    public Result pageCondition(@PathVariable long current,
                                @PathVariable long limit,
                                @RequestBody(required = false) ProjectQuery projectQuery){

        Page<Project> page = new Page<>(current, limit);

        //构件条件
        QueryWrapper<Project> queryWrapper = new QueryWrapper<>();
        String name = projectQuery.getName();
        Integer level = projectQuery.getLevel();
        String begin = projectQuery.getBegin();
        String end = projectQuery.getEnd();
        if(!StringUtils.isEmpty(name)){
            queryWrapper.like("name", name);
        }
        if(!StringUtils.isEmpty(level)){
            queryWrapper.eq("level", level);
        }
        if(!StringUtils.isEmpty(begin)){
            queryWrapper.ge("create_tome", begin);
        }
        if(!StringUtils.isEmpty(end)){
            queryWrapper.eq("update_time", end);
        }

        projectService.page(page, queryWrapper);
        long total = page.getTotal();
        List<Project> record = page.getRecords();
        Map<String, Object> data = new HashMap<>();
        data.put("total", total);
        data.put("items", record);

        return Result.ok().data(data);
    }

ProjectQuery对象信息如下，构造一个查询条件：

@Data
public class ProjectQuery {

    @ApiModelProperty(value = "分区名称，模糊查询")
    private String name;

    @ApiModelProperty(value = "分区级别")
    private Integer level;

    @ApiModelProperty(value = "查询开始时间", example = "2019-10-11 10:10:10")
    private String begin;  //所使用的的String类型，前端传过来的数据无需进行格式转换

    @ApiModelProperty(value = "查询结束时间", example = "2019-10-11 10:10:10")
    private String end;  //所使用的的String类型，前端传过来的数据无需进行格式转换

}

 

前端请求

onSubmit(page = 1, limit = 10) { //条件查询表单的查询按钮事件
                console.log('执行条件查询......');
                const _this = this;
                this.$axios({
                    // 默认请求方式为get
                    method: 'post',
                    url: 'http://localhost:8001/projectservice/pageCondition/'+page+"/"+limit,
                    // 传递参数
                    data: {
                        name: _this.projectQuery.name,
                        level: _this.projectQuery.level,
                        begin:  _this.projectQuery.begin,
                        end:  _this.projectQuery.end
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    _this.result = response.data.data.items
                    _this.total = response.data.data.total
                    console.log(response)
                }).catch(error => {
                    // 请求失败，
                    console.log(error)
                });
            }

其中后端的@RequestBody所需的参数应该是post请求的data，而不是params，data里面对应的参数刚好是后端接口所需的查询条件，除了直接在data里放key-value外（由axios自动转为json字符串了），也可以自己构造对象，通过stringify（）转换为json字符串：

let obj = qs.stringify({
		key: value
	})

然后放在axios参数data里，其中axios详细参数如下： 

axios({
    url: '连接地址 path参数直接放里面',
    method: 'post 默认是 get',
    params: '必须是一个无格式对象 query参数',
    data: '是作为请求主体被发送的数据 body参数',
    timeout: 1000,
    headers: 'object 发送的自定义请求头'
})

 

效果

查询name为“计算机网络”的数据：