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
this.totalStl = response.data.data.total
} else {
this.$message({
type: 'error',
message: '失败'
})
}
})
},
SSM后端
DAO + Service + Controller实现条件分页查询
在main目录下的dao、service、controller文件夹中编写代码。其中数据对应的实体可自己编写或生成。
主要思路是
- 在dao层分别编写查询分页数据列表的语句+查询数据总条数的语句，有几种查询写几组。
- 在service中将某一查询查询到的数据list和总数以键值对加入json对象。
- controller中获取页数、每页数据数和查询条件，调取相应的service获取封装好的json对象，将此json对象发送给前端。
- 前端用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;
@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;
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);
}
}
|