前端分析

在对页面的员工信息处理完之后，我们就开始去处理下一个功能，对分类的功能做一个整体的开发。这是我们的分类管理的界面，现在我们去对界面的分类的展示做一个开发。可以看到是需要进行分页查询，所以我们首先去做一个数据的展示。

那就还是从前端页面展示。单纯的面向前端编程。
我们所作的就是这个界面

可以找到这个二界面大致去看看，我们先着重去看页面分页相关的。初次打开这个界面的时候一定会有一个自动的分页查询，所以我们可以去着重去看是否有自动执行的方法或者是挂载的方法。
我们找到了，挂载的方法是会在打开这个页面自动执行的。

这里调用了这个方法，我们可以点进去去查看相关的请求路径

我们找到了这个具体的请求路径，其实这个具体的请求路径是卸载一个js里面的.我们这样就可以找到怎么设置Controller的路径，以及通过上面的分析知道需要提供哪些参数了。

其实的话，我们可以去用浏览器打开页面去点击捕获请求也可以查看到提交了哪些请求参数。我们点击分类的时候可以捕捉到下面的请求

点开看，这就是完整的请求和携带参数。默认是查找第一页的十条数据。404的原因是我们还没写具体的后端逻辑或者没有启动服务器，就调试了页面。

这就是整体的前端分析。

后端分页功能开发

我们需要具体的实体类，这个类是分类的实体类。
对照数据库表

于是写这样的一个实体类

package com.jgdabc.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * 分类
 */
@Data
public class Category implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;


    //类型 1 菜品分类 2 套餐分类
    private Integer type;


    //分类名称
    private String name;


    //顺序
    private Integer sort;


    //创建时间
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;


    //更新时间
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;


    //创建人
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;


    //修改人
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;

//
//    //是否删除
//    private Integer isDeleted;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

实体类的里面注解的字段属性是未来做公共属性自动填充的。

然后按照模式去写三层架构。

首先数据支持dao或者说是mapper层。

package com.jgdabc.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jgdabc.entity.Category;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface CategoryMapper extends BaseMapper<Category> {
}

1
2
3
4
5
6
7
8
9
10

然后service层

package com.jgdabc.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.jgdabc.entity.Category;

public interface CategoryService extends IService<Category> {
   
}

1
2
3
4
5
6
7
8
9

service层实现

package com.jgdabc.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.jgdabc.common.CustomException;
import com.jgdabc.entity.Category;
import com.jgdabc.entity.Dish;
import com.jgdabc.entity.Setmeal;
import com.jgdabc.mapper.CategoryMapper;
import com.jgdabc.service.CategoryService;
import com.jgdabc.service.DishService;
import com.jgdabc.service.SetMealService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Slf4j
@Service
public class CategoryServiceImpl extends ServiceImpl<CategoryMapper, Category> implements CategoryService {
   
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这就是mybatisplus需要定义的模式。我删除了这些方法里面之后需要的一些拓展的自定义的方法，为了不影响本次的说明。

然后我们就可以去开发Controllerl.
按照这个请求路径

package com.jgdabc.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jgdabc.common.R_;
import com.jgdabc.entity.Category;
import com.jgdabc.service.CategoryService;
import com.mysql.cj.log.Log;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
//分类

@Slf4j
@RestController
@RequestMapping("/category")

public class CategoryController {
    @Autowired
    /**
     * 新增分类
     */

    private CategoryService categoryService;
   
    @GetMapping("/page")
    public R_<Page> page(int page,int pageSize)
    {
//        分页构造器
        Page<Category> pageinfo = new Page<>(page,pageSize);
//        条件构造器
        LambdaQueryWrapper<Category> queryWrapper = new LambdaQueryWrapper<>();
//添加排序条件，根据sort
        queryWrapper.orderByAsc(Category::getSort);
//        进行分页查询
        categoryService.page(pageinfo,queryWrapper);
        return R_.success(pageinfo);


    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

我们最终还是返回R_包装的结果。

前端接收过来然后展示