1、 前台页面
<template>
<div>
<v-layout class="px-3 pb-2">
<v-flex xs2>
<v-btn color="info" small>新增</v-btn>
</v-flex>
<v-spacer/>
<v-flex xs4>
<v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
</v-flex>
</v-layout>
<v-data-table
:headers="headers"
:items="brands"
:pagination.sync="pagination"
:total-items="totalBrands"
:loading="loading"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td class="text-xs-center">{{ props.item.id }}</td>
<td class="text-xs-center">{{ props.item.name }}</td>
<td class="text-xs-center"><image :src="props.item.image"/></td>
<td class="text-xs-center">{{ props.item.letter }}</td>
<td class="text-xs-center">
<v-btn flat icon color="info">
<v-icon>edit</v-icon>
</v-btn>
<v-btn flat icon color="red">
<v-icon>delete</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
name: "MyBrand",
data(){
return {
headers: [
{ text: '品牌id', align: 'center', sortable: true, value: 'id'},
{ text: '品牌名称', align: 'center', sortable: false, value: 'name'},
{ text: '品牌LOGO', align: 'center', sortable: false, value: 'image'},
{ text: '品牌首字母', align: 'center', sortable: true, value: 'letter'},
{ text: '操作', align: 'center', sortable: false, value: 'caozuo'}
],
brands: [],
pagination: {},
totalBrands: 0,
loading: false,
key: ''
}
},
created(){
//分页查询
this.loadBrands();
},
watch: {
//监控key(搜索条件)
key(){
this.pagination.page = 1;
//this.loadBrands();
},
//深度监控pagination
pagination: {
deep: true,
handler(){
this.loadBrands();
}
}
},
methods: {
loadBrands(){
// 开启进度条
this.loading = true;
this.$http.get('/item/brand/page?access-token=1', {
params: {
page: this.pagination.page, //当前页
rows: this.pagination.rowsPerPage, //每页条数
sortBy: this.pagination.sortBy, //排序字段
desc: this.pagination.descending, //是否降序
key: this.key //搜索条件
}
}).then(resp => {
this.brands = resp.data.items;
this.totalBrands = resp.data.total;
//关闭进度条
this.loading = false;
});
}
}
}
</script>
<style scoped>
</style>
2、 后台controller
import cn.wangkf.common.vo.PageResult;
import cn.wangkf.item.pojo.Brand;
import cn.wangkf.item.service.BrandService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
/**
* Created by wangk on 2019-01-05.
*/
@RestController
@RequestMapping("brand")
public class BrandController {
@Autowired
private BrandService brandService;
//分页查询
@GetMapping("page")
public ResponseEntity<PageResult<Brand>> queryBrandByPage(
//另一种方法就是放在一个对象里面
@RequestParam(value = "page", defaultValue = "1") Integer page,
@RequestParam(value = "rows", defaultValue = "5") Integer rows,
@RequestParam(value = "sortBy", required = false) String sortBy,
@RequestParam(value = "desc", defaultValue = "false") Boolean desc,
@RequestParam(value = "key", required = false) String key
){
return ResponseEntity.ok(brandService.queryBrandByPage(page,rows,sortBy,desc,key));
}
}
3、 实现类
import cn.wangkf.common.enums.ExceptionEnum;
import cn.wangkf.common.exception.LgException;
import cn.wangkf.common.vo.PageResult;
import cn.wangkf.item.mapper.BrandMapper;
import cn.wangkf.item.pojo.Brand;
import cn.wangkf.item.service.BrandService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;
import tk.mybatis.mapper.entity.Example;
import java.util.List;
/**
* Created by wangk on 2019-01-05.
*/
@Service
public class BrandServiceImpl implements BrandService {
@Autowired
private BrandMapper brandMapper;
//通用Mapper和分页助手pagehelper共同实现分页查询
@Override
public PageResult<Brand> queryBrandByPage(Integer page, Integer rows, String sortBy, Boolean desc, String key) {
//1、分页
PageHelper.startPage(page, rows);
//2、过滤
Example example = new Example(Brand.class);
if (StringUtils.isNotBlank(key)) {
//过滤条件
example.createCriteria().orLike("name", "%"+key+"%").orEqualTo("letter", key.toUpperCase());
}
//3、排序
if (StringUtils.isNotBlank(sortBy)) {
String orderByClause = sortBy + (desc ? " DESC" : " ASC");
example.setOrderByClause(orderByClause);
}
//4、查询(
List<Brand> list = brandMapper.selectByExample(example);
if (CollectionUtils.isEmpty(list)) { //异常处理
throw new LgException(ExceptionEnum.BRAND_NOT_FOUND);
}
//分页助手解析list
PageInfo<Brand> info = new PageInfo<>(list);
return new PageResult<>(info.getTotal(), list);
}
}
接口
import cn.wangkf.common.vo.PageResult;
import cn.wangkf.item.pojo.Brand;
/**
* Created by wangk on 2019-01-05.
*/
public interface BrandService {
/**
*
* @param page
* @param rows
* @param sortBy
* @param desc
* @param key
* @return 分页查询结果
*/
public PageResult<Brand> queryBrandByPage(Integer page, Integer rows, String sortBy, Boolean desc, String key);
}
通用Mapper (需要在启动类里添加包件扫描)
@MapperScan(“cn.wangkf.item.mapper”)
import cn.wangkf.item.pojo.Brand;
import org.mybatis.spring.annotation.MapperScan;
import tk.mybatis.mapper.additional.idlist.SelectByIdListMapper;
import tk.mybatis.mapper.common.Mapper;
/**
* Created by wangk on 2019-01-05.
*/
public interface BrandMapper extends Mapper<Brand> {
}
注:要实现sql控制台日志打印在yaml文件里引入依赖包即可
#sql在控制台打印便于调试找错
mybatis:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl