Пейджинговая операция SpringBoot+Vue

Spring Boot

springboot -- форма операции 02

Не рекомендуется использовать запрос на подкачку, поставляемый с mybatis, плагин pagehelper и т. д. Более удобно и быстро использовать оператор запроса MySql.

На основе приведенной выше операции с таблицей добавьте операцию подкачки, чтобы улучшить основной код. Подробности последней статьиCRUD и импорт и экспорт файлов.

Процесс

Развитие Backend

1. Определите класс сущности, возвращаемый запросом на подкачку. Возвращаемые данные представляют собой список. Рекомендуется использовать дженерики.

(RespPageEntity.java)

@Data
public class RespPageEntity {
    private List<?> data;
    private Long total;
}

2. Определите метод уровня управления.Чтобы избежать нулевых значений, в параметрах запроса указаны значения по умолчанию.

(пользователь-controller.java)

/**
 * 根据页码和大小分页查询
 * @param page 当前页，默认为1
 * @param size 当前每页显示行数，默认为5
 * @return 页信息的实体
 */
@GetMapping("/page/")
public RespPageEntity getAllUserByPage(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "5") Integer size) {
    return userService.getAllUserByPage(page, size);
}

3. Метод бизнес-уровня разделен на два этапа: 1 для получения общего объема данных, 2 для получения информации о странице запроса, поэтому необходимо добавить аннотацию транзакции @Transactional.

(UserService.java)

@Transactional
public RespPageEntity getAllUserByPage(Integer page, Integer size) {
    RespPageEntity pageEntity = new RespPageEntity();
    // 默认从0开始
    if (page != null && size != null) {
        page = (page-1)*size;
    }
    // 获取当前也用户信息
    List<User> users =  userMapper.getAllUserByPage(page, size);
    pageEntity.setData(users);
    // 获取当前用户总量
    Long total = userMapper.getTotal();
    pageEntity.setTotal(total);
    return pageEntity;
}

4. Оператор sql в файле сопоставления.

(UserMapper.xml)

<select id="getAllUserByPage" resultMap="BaseResultMap">
  select
    *
  FROM
    userinfo
  limit #{page}, #{size}
</select>
<select id="getTotal" resultType="java.lang.Long">
  select count(*) from userinfo;
</select>

5. Тест почтальона, например, адрес http://127.0.0.1:8081/user/page/ возвращает значение по умолчанию или http://127.0.0.1:8081/user/page/?page=1&size=5.

Идеальный передний конец

1. Добавьте раздел подкачки (User.vue) во временный компонент шаблона.

<div style="display: flex;justify-content: center;margin-top: 10px">
  <el-pagination
    background
    @size-change="sizeChange"
    @current-change="currentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="sizes, prev, pager, next, jumper, ->, total, slot"
    :total="total">
  </el-pagination>
</div>

2. Начальное значение

pageSize:5,
currentPage:1,
total:0,

3. Номер, отображаемый на каждой странице, и номер текущей страницы.

sizeChange(size) {
  this.pageSize=size;
  this.initUser();
},
currentChange(page) {
  this.currentPage=page;
  this.initUser();
},

4. Измените метод страницы инициализации

initUser() {
  this.getRequest("/user/page/?page="+this.currentPage+"&size="+this.pageSize).then(resp => {
    if (resp) {
      this.userinfo=resp.data;
      this.total=resp.total;
    }
  })
}

Рендеринг после запуска

Категории