思路一样,先通过前端看请求路径和参数,然后开发后台提供数据接口
- 通过数据库表建立实体类
- 参照前端页面的控制台编写controller
- 编写Service
- 建立通用Mapper接口简化开发
- 测试
controller
编写controller先思考四个问题,参照前端页面的控制台
-
请求方式:查询,肯定是Get
-
请求路径:分页查询,/brand/page
-
请求参数:根据我们刚才编写的页面,有分页功能,有排序功能,有搜索过滤功能,因此至少要有5个参数:
-
page:当前页,int
-
rows:每页大小,int
-
sortBy:排序字段,String
-
desc:是否为降序,boolean
-
key:搜索关键词,String
-
-
响应结果:分页结果一般至少需要两个数据
-
total:总条数
-
items:当前页数据
-
totalPage:有些还需要总页数
-
这里我们封装一个类,来表示分页结果;
另外,这个PageResult以后可能在其它项目中也有需求,因此我们将其抽取到 leyou-common
中,提高复用性;
不要忘记在leyou-item-service工程的pom.xml中引入leyou-common的依赖:。
public class PageResult<T> {
private Long total;// 总条数
private Integer totalPage;// 总页数
private List<T> items;// 当前页数据
//getter/setter和构造函数略
}
接下来,我们编写Controller
参数意义
@RestController
@RequestMapping("brand") //请求路径:分页查询,/brand/page
public class BrandController {
@Autowired
private BrandService brandService;
/**
* 根据查询条件分页并排序查询品牌信息
* @param key
* @param page
* @param rows
* @param sortBy
* @param desc
* @return
*/
@GetMapping("page") //请求方式:查询,肯定是Get
public ResponseEntity<PageResult<Brand>> queryBrandsByPage(
//接受请求参数
@RequestParam(value = "key", required = false)String key,
@RequestParam(value = "page", defaultValue = "1")Integer page,
@RequestParam(value = "rows", defaultValue = "5")Integer rows,
@RequestParam(value = "sortBy", required = false)String sortBy,
@RequestParam(value = "desc", required = false)Boolean desc
){
//根据请求参数查询品牌数据
PageResult<Brand> result = this.brandService.queryBrandsByPage(key, page, rows, sortBy, desc);
if (CollectionUtils.isEmpty(result.getItems())){
return ResponseEntity.notFound().build();
}
return ResponseEntity.ok(result);
}
}
Service
用Mybatis的相关方法做模糊查询和分页
PageHelper是国内非常优秀的一款开源的mybatis分页插件
@Service
public class BrandService {
@Autowired
private BrandMapper brandMapper;
/**
* 根据查询条件分页并排序查询品牌信息
*
* @param key
* @param page
* @param rows
* @param sortBy
* @param desc
* @return
*/
public PageResult<Brand> queryBrandsByPage(String key, Integer page, Integer rows, String sortBy, Boolean desc) {
// 初始化example对象
Example example = new Example(Brand.class);
Example.Criteria criteria = example.createCriteria();
// 根据name模糊查询,或者根据首字母查询
if (StringUtils.isNotBlank(key)) {
criteria.andLike("name", "%" + key + "%").orEqualTo("letter", key);
}
// 添加分页条件
PageHelper.startPage(page, rows);
// 添加排序条件
if (StringUtils.isNotBlank(sortBy)) {
example.setOrderByClause(sortBy + " " + (desc ? "desc" : "asc"));
}
List<Brand> brands = this.brandMapper.selectByExample(example);
// 包装成pageInfo
PageInfo<Brand> pageInfo = new PageInfo<>(brands);
// 包装成分页结果集返回
return new PageResult<>(pageInfo.getTotal(), pageInfo.getList());
}
axios
异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery。但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分。因此不可能为了发起ajax请求而去引用这么大的一个库。
Vue官方推荐的ajax请求框架叫做:axios