Day96 项目实战3 品牌查询

31 篇文章 0 订阅

 

思路一样,先通过前端看请求路径和参数,然后开发后台提供数据接口

  • 通过数据库表建立实体类
  • 参照前端页面的控制台编写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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值