Vue前端+Java后端：根据查询条件，分页查询列表展示

需求：

根据查询条件以及页码，页大小向后端请求数据并展示。

---

相关组件：

el-form

• el-form标签中添加属性:inline=“true”，使el-form-item横向分布。
• el-form标签中添加属性:model=“listQuery”，绑定表单数据对象。
• 查询输入框就可以绑定绑定表单数据对象的某个元素，实现输入赋给该元素。
• 按钮，输入框等各放在一个el-form-item即可。
• 代码：
  template

<el-form :inline="true" :model="listQuery" class="operate-form">
         <el-form-item style="float:left" label="输入破片组数:">
           <el-input
             v-model="listQuery.keyword1"
             placeholder="破片组数"
             clearable
           />
         </el-form-item>
         <el-form-item style="float:left;margin-left:10px">
           <el-button type="primary" size="small" @click="handleSearch()">获取列表</el-button>
         </el-form-item>
         <el-form-item style="float:left;margin-left:5px">
           <el-button type="primary" size="small" @click="handleReset()">重置</el-button>
         </el-form-item>
</el-form>

script - 开始

const defaultListQuery = {
 keyword1: null,
 pageSize: 10,
 pageNum: 1
}

script - export default中

data() {
    return {
      listQuery: Object.assign({}, defaultListQuery), // 将defaultListQuery赋给{}，返回值为赋值后的对象
    }
  },
methods: {
    handleSearchFrag() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleResetFrag() {
      this.listQuery = Object.assign({}, defaultListQuery)
      this.getList()
    },
    getList() {
      this.listloading = true
      console.log(this.listQuery)
      this.$http.get('http://localhost:8080/missileTarget/fragList', { params: {
        groupNum: this.listQuery['keyword1'], pageSize: this.listQuery['pageSize'], pageNum: this.listQuery['pageNum']
      }},
      { headers: { 'Content-Type': 'application/json' }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
          console.log(response.data)
          this.listloadingFrag = false
          this.tableData = response.data.data.list
          this.total = response.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    }
}

---

el-table

• el-table标签中添加属性ref="multipleTableFrag"，即给此dom结点即给这个table命名，后面需要一些操作（清除table中所选item等操作）可以直接用this.$refs.multipleTableFrag定位到这个table对其进行操作。
• el-table中添加v-loading="listloadingFrag"属性，当table的数据变化时会显示加载效果，成功获取数据后加载效果消失，显示数据。需要在data(){}中写listloadingFrag = false，请求数据的方法开始的时候让listloadingFrag = true，成功请求到数据后让listloadingFrag = false。
• el-table中添加:data="tableDataFrag"属性，绑定显示的数据。在data(){}中写tableDataFrag: null,，请求数据的方法中写this.tableDataFrag = response.data.data.list。注意，属性前带冒号冒号为v-bind的缩写，表示会动态变化的值，如果静态则不用冒号。
• el-table-column中的prop属性，与获取的list中的对应属性名一样即可实现相应显示。注意大小写。
• 代码

<el-table
         ref="multipleTableFrag"
         v-loading="listloadingFrag"
         :data="tableDataFrag"
         style="width: 100%"
         @selection-change="handleSelectionChangeFrag"
       >
         <el-table-column type="selection" width="50" align="center" />

         <el-table-column prop="id" label="编号" width="80" align="center">
         </el-table-column>

         <el-table-column prop="groupNum" label="破片组数" width="80" align="center">
         </el-table-column>

         <el-table-column prop="imgPath" label="破片场图片路径" width="120" align="center">
         </el-table-column>

         <el-table-column prop="excelPath" label="破片场excel路径" width="150" align="center">
         </el-table-column>

         <el-table-column prop="time" label="操作用户" width="120" align="center">
         </el-table-column>

         <el-table-column prop="time" label="操作时间" width="120" align="center">
         </el-table-column>

         <el-table-column fixed="right" label="操作" width="100" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="handleDeleteFrag(scope.$index, scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>

el-pagination

• .sync实现数据双向绑定，因为el-form和el-pagination均需要改变listQuery的数据。
• 代码

<el-pagination
           background
           layout="total, prev, pager, next, jumper"
           :current-page.sync="listQuery.pageNum"
           :page-size="listQuery.pageSize"
           :total="total"
           @current-change="handleCurrentChangeTarget"
         />

---

前后端数据交互：

vue端请求数据：

getFragList() {
      this.listloading = true
      console.log(this.listQuery)
      this.$http.get('http://localhost:8080/missileTarget/fragList', { params: {
        groupNum: this.listQuery['keyword1'], pageSize: this.listQuery['pageSize'], pageNum: this.listQuery['pageNum']
      }},
      { headers: { 'Content-Type': 'application/json' }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
          console.log(response.data)
          this.listloading = false
          this.tableDataFrag = response.data.data.list
          this.total = response.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    },

---

Java后端返回数据：

样例1：keyword只有一个且为Int类型

@ApiOperation("根据组数获取破片列表")
    @GetMapping("fragList")
    @ResponseBody
    public CommonResult<CommonPage<Fragment>> fragList(@RequestParam(value = "groupNum") Integer keyword1,
                                               @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
                                               @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
        PageHelper.startPage(pageNum, pageSize);
        FragmentExample example = new FragmentExample();
        if (keyword1 == null)
            example.createCriteria().getAllCriteria();
        else
            example.createCriteria().andGroupNumEqualTo(keyword1);
        List<Fragment> fragmentList = fragmentMapper.selectByExample(example);
        System.out.println(fragmentList);
        return CommonResult.success(CommonPage.restPage(fragmentList));
    }

样例2：keyword有两个且为String类型（注意判断空的方式）

@ApiOperation("根据操作者和目标名分页获取目标列表")
    @GetMapping("targetList")
    @ResponseBody
    public CommonResult<CommonPage<Target>> targetList(@RequestParam(value = "keyword1") String keyword1,
                                                   @RequestParam(value = "keyword2") String keyword2,
                                                   @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
                                                   @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
        PageHelper.startPage(pageNum, pageSize);
        TargetExample example = new TargetExample();
        if (StringUtils.isEmpty(keyword1) && StringUtils.isEmpty(keyword2))
            example.createCriteria().getAllCriteria();
        else if(!StringUtils.isEmpty(keyword1) && StringUtils.isEmpty(keyword2))
            example.createCriteria().andNameEqualTo(keyword1);
        else if(StringUtils.isEmpty(keyword1) && !StringUtils.isEmpty(keyword2))
            example.createCriteria().andUserEqualTo(keyword2);
        else
            example.createCriteria().andNameEqualTo(keyword1).andUserEqualTo(keyword2);
        List<Target> targetList = targetMapper.selectByExample(example);
        System.out.println(targetList);
        return CommonResult.success(CommonPage.restPage(targetList));
    }

---

前端接收的数据：

用response.data.data.list获取列表。