axios提交form表单带条件查询并分页

1.传统表单键值对提交application/x-www-form-urlencoded

axios({
      headers:{
          'Content-type': 'application/x-www-form-urlencoded'
      },
      data:{'pageNum':1,'pageSize':8,'brandName':'百度','companyName':'腾讯'},
      url:"http://localhost:8082/vue_demo_war_exploded/getAllBrands",
      method:'post',
  }).then(function(result){
      console.log(result)
  })
  

后端代码

@RequestMapping("/getAllBrands")
public List<Brand> getAllBrands( Integer pageNum,Integer pageSize,Brand brand){

2.json数据提交——application/json

axios({
      data:{'brandName':'百度','companyName':'腾讯'},
      url:"http://localhost:8082/vue_demo_war_exploded/getAllBrands/1/8",
      method:'post',
  }).then(function(result){
      console.log(result)
  })

后端代码

@RequestMapping("/getAllBrands/{pageNum}/{pageSize}")
public List<Brand> getAllBrands(@PathVariable Integer pageNum,@PathVariable Integer pageSize, @RequestBody(required = false) Brand brand){
     

全部代码

<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="品牌名称">
                <el-input v-model="searchForm.brandName" placeholder="品牌名称"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="searchForm.companyName" placeholder="企业名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search()">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌名称" width="180">
            </el-table-column>
            <el-table-column prop="companyName" label="企业名称">
            </el-table-column>
        </el-table>

        <div class="block">
           
            <el-pagination layout="total,prev, pager, next"

            @current-change="handlePageChange"
             :current-page="pageNum"
             :page-size="pageSize"
             :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import axios from 'axios'
export default {

    data() {
        return {
            totalCount:0,
           
            tableData: [],
            pageNum:1,
            pageSize:3,
            searchForm: {
                brandName: '',
                companyName: '',
               
            }
        }
    },
    methods: {
        handlePageChange(val){

            console.log(val)

            this.pageNum=val
            this.getPage()

        },
        getPage() {
            var api= process.env.Back_api
            var that = this
            console.log("-------------------")
            axios({
                url: api+"getAllBrands?pageNum="+that.pageNum,
                headers:{
                    'Content-type': 'application/x-www-form-urlencoded'
                },
                method: "post",
                data: that.searchForm
            }).then(function (result) {
                console.log(result)
                that.tableData = result.data.list
                that.totalCount= result.data.total
               
                console.log("总条数："+that.totalCount)
            })
        },
        search() {
            this.pageNum=1
            this.getPage()

        }

    },
    created() {
        this.getPage()
    }

}
</script>

<style></style>

后台核心代码

 @PostMapping("/getAllBrands")
 public PageInfo<Brand> getAllBrands(  Integer pageNum, Brand brand){


        System.out.println(pageNum);
        return brandService.getPage(pageNum,brand);
 }

当然也可改成

前端axios请求还是采用默认的application/json，那后端java代码改成

 @PostMapping("/getAllBrands")
 public PageInfo<Brand> getAllBrands(  Integer pageNum, @RequestBody Brand brand){


        System.out.println(pageNum);
        return brandService.getPage(pageNum,brand);
 }

特别提醒：@PathVariable和 @RequestParam不要同时使用在一个参数上