带条件的分页查询（ssm后端+vue前端）

Vue前端

el-form组件 + el-table组件 + el-pagination组件

el-form输入查询条件进行查询，其中输入的查询、页数和每页记录数组成一个form表单，el-table对获取的数据list进行展示，字段绑定注意别出错，el-pagination的几个属性绑定的form表单的字段。

template中：

			<el-form :inline="true" :model="listQueryStl" style="margin-top: 15px;margin-bottom: 15px;height: 15px">
			
                     <el-form-item class="style1">
                        <el-input
                          v-model="listQueryStl.keyword1"
                          placeholder="战斗部名称"
                          clearable
                        />
                      </el-form-item>
                      
                      <el-form-item class="style1">
                        <el-button type="primary" size="small" @click="handleSearchStl()">获取战斗部列表</el-button>
                      </el-form-item>
                      
                </el-form>
                
           <el-table
              ref="multipleTableStl"
              v-loading="listloadingStl"
              :data="tableDataStl"
              style="width: 100%"
              @selection-change="handleSelectionChangeStl"
            >
              <el-table-column type="selection" width="30" align="center" />

                            <el-table-column prop="warhead_id" label="战斗部编号" width="80" align="center" />

              <el-table-column prop="warhead_name" label="战斗部名称" width="80" align="center" />

              <el-table-column prop="ammunition_name" label="弹药名称" width="80" align="center" />

              <el-table-column prop="warhead_img_name" label="模型图片名" width="100" align="center" />

              <el-table-column prop="warhead_model_name" label="模型名" width="100" align="center" />

              <el-table-column prop="user" label="用户名" width="80" align="center" />

              <el-table-column fixed="right" label="下载和查看" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" style="margin:0" @click="showStlImg(scope.row)">查看模型图片</el-button>
                  <el-button type="text" size="small" style="margin:0" @click="getFileStl(scope.row)">下载模型</el-button>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" style="margin:0" @click="showPowerFiled(scope.row)">查看威力场模型</el-button>
                  <el-button type="text" size="small" style="margin:0" @click="addPowerFiled(scope.row)">添加威力场模型</el-button>
                  <el-button type="text" size="small" @click="updateDataStl(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" style="margin:0" @click="handleDeleteStl(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :current-page.sync="listQueryStl.pageNum"
              :page-size="listQueryStl.pageSize"
              :total="totalStl"
              @current-change="handleCurrentChangeStl"
            />

script的data中：

listloadingStl: false, //加载中
listQueryStl: {
        keyword1: null,
        pageSize: 6,
        pageNum: 1
      },

script的mothods中：

getStlList() {
      this.listloadingStl = true //加载中
      this.$http.get('http://localhost:8080/warheadModel/stlList', { params: {
        stlName: this.listQueryStl['keyword1'], pageSize: this.listQueryStl['pageSize'], pageNum: this.listQueryStl['pageNum']
      }},
      { headers: { 'Content-Type': 'application/json' }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
          console.log(response.data)
          this.listloadingStl = false //结束加载中效果
          this.tableDataStl = response.data.data.list //获取后端按条件查询到的list
          this.totalStl = response.data.data.total//获取后端按条件查询到的记录总数
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    },

SSM后端

DAO + Service + Controller实现条件分页查询

在main目录下的dao、service、controller文件夹中编写代码。其中数据对应的实体可自己编写或生成。

主要思路是

1. 在dao层分别编写查询分页数据列表的语句+查询数据总条数的语句，有几种查询写几组。
2. 在service中将某一查询查询到的数据list和总数以键值对加入json对象。
3. controller中获取页数、每页数据数和查询条件，调取相应的service获取封装好的json对象，将此json对象发送给前端。
4. 前端用response.data.data.list和response.data.data.total分别获取json对象中的数据list和数据总数。（因为我的controller中的方法返回值类型为CommonResult< JSONObject>，所以需要response.data.data.list获取list，如果返回值就为JSONObject，用response.data.list获取。）

dao主要代码：

@Mapper
public interface WarheadModelDao {
	//查数据
    @Select("select * from warhead_model limit #{start} , #{end}")
    public List<WarheadModel> findAll(int start, int end);
	//获取总的数据条数
    @Select("select count(*) from warhead_model")
    public int countFindAll();

    @Select("select * from warhead_model where warhead_name=#{warheadName} limit #{start} , #{end}")
    public List<WarheadModel> findByWarheadName(String warheadName,int start,int end);

    @Select("select count(*) from warhead_model where warhead_name=#{warheadName}")
    public int countFindByWarheadName(String warheadName);
}

service主要代码：

public interface WarheadModelService {
    JSONObject findAll(int start, int end);
    JSONObject findByWarheadName(String warheadName,int start,int end);
}

service实现类的主要代码：

@Service
@Transactional
public class WarheadModelServiceImpl implements WarheadModelService {
    @Resource
    private WarheadModelDao warheadModelDao;
    
    //因为需要返回一个列表和一个int值，所以选择json对象，将两个数据按键值对的形式加入json对象
    @Override
    public JSONObject findAll(int start, int end) {
        JSONObject jsonObject = new JSONObject();
        List<WarheadModel> list = warheadModelDao.findAll(start,end); //查找的数据列表
        int total = warheadModelDao.countFindAll(); //该表下的数据总条数
        jsonObject.put("list",list);
        jsonObject.put("total",total);
        return jsonObject;
    }

    @Override
    public JSONObject findByWarheadName(String warheadName,int start, int end) {
        JSONObject jsonObject = new JSONObject();
        List<WarheadModel> list = warheadModelDao.findByWarheadName(warheadName,start,end); //条件查找+某页的数据列表
        int total = warheadModelDao.countFindByWarheadName(warheadName); //条件查找该表的数据总数
        jsonObject.put("list",list);
        jsonObject.put("total",total);
        return jsonObject; 
    }

}

controller主要代码：

@RestController
@RequestMapping("/warheadModel")
public class WarheadModelController {
    @Autowired
    private WarheadModelService warheadModelService;

    @ApiOperation("根据战斗部名分页获取战斗部列表//part1")
    @GetMapping("stlList")
    @ResponseBody
    public CommonResult<JSONObject> stlList(@RequestParam(value = "stlName",required = false) String keyword1,
                                                                    @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
                                                                    @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
        int start = (pageNum - 1) * pageSize; //根据页数和每页数据数计算查询的start和end
        int end = pageSize;
        JSONObject jsonObject = new JSONObject();
        if (keyword1 == null) //查询条件为空，直接查所有的数据
            jsonObject = warheadModelService.findAll(start,end);
        else //查询条件不为空，按条件查询
            jsonObject = warheadModelService.findByWarheadName(keyword1,start,end);
        return CommonResult.success(jsonObject);
    }

}