前端分页实现

yyets-history-ui/src/view/Main.vue

@@ -3,17 +3,17 @@
     <div class="grid-content bg-purple-light div-content">
       <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
         <el-form-item label="剧目:" class="form-item">
-          <el-input v-model="searchForm.name" placeholder="剧目"></el-input>
+          <el-input v-model="searchForm.name" placeholder="剧目" @keyup.enter.native="search(true)"></el-input>
         </el-form-item>
         <el-form-item class="form-item">
-          <el-button type="primary" :loading="loading" @click="onSubmit">查询</el-button>
+          <el-button type="primary" :loading="loading" @click="search(true)">查询</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div>
       <el-table
         :data="tableData"
-        :height="tableHeight"
+        height="75vh"
         border
         style="width: 100%">
         <el-table-column
@@ -50,7 +50,7 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="750px">
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="750px" top="8vh">
       <el-form :inline="true" class="demo-form-inline">
         <el-form-item label="资源分组:" class="form-item">
           <el-select placeholder="资源分组" v-model="linkGroup" :change="linkGroupChange(linkGroup)">
@@ -75,7 +75,7 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <el-table :data="resourceLinksTableData" height="300px">
+      <el-table :data="resourceLinksTableData" height="330px">
         <el-table-column property="episode" label="分集" width="150"></el-table-column>
         <el-table-column property="name" label="文件名" width="200"></el-table-column>
         <el-table-column property="size" label="大小"></el-table-column>
@@ -93,19 +93,32 @@
         </el-table-column>
       </el-table>
     </el-dialog>
+    <el-pagination class="pagination"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="searchForm.pageNo"
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="searchForm.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      background
+      :total="total"
+      v-show="tableData.length > 0">
+    </el-pagination>
      <textarea id="hiddenLink" style="display: none"></textarea>
   </div>
 </template>
 
 <script>
-  const baseUri = '/resource/page/';
-  const pageNo = 1;
+  const baseUri = '/resource/page';
   export default {
     data() {
       return {
         searchForm: {
           name: '',
+          pageNo: 1,
+          pageSize: 10
         },
+        total: 0,
         loading: false,
         dialogVisible: false,
         resourceLinks: [],
@@ -114,11 +127,19 @@
         tableData: [],
         dialogTitle: '资源列表',
         linkGroup: 0,
-        operationType: 0,
-        tableHeight: window.screen.height - 290
+        operationType: 0
       }
     },
     methods: {
+      handleSizeChange(pageSize) {
+        this.searchForm.pageSize = pageSize;
+        this.searchForm.pageNo = 1;
+        this.search();
+      },
+      handleCurrentChange(pageNo) {
+        this.searchForm.pageNo = pageNo;
+        this.search();
+      },
       viewSeason(resource, i) {
         this.resourceRow = resource;
         let season = resource.seasons[i];
@@ -163,37 +184,38 @@
           });
         }
       },
-      onSubmit() {
-        if (!this.searchForm.name) {
-          this.$message({
-            message: '请输入剧目',
-            type: 'warning'
-          });
-          return;
+      search(newIn) {
+        if(newIn) {
+          this.searchForm.pageNo = 1;
+        }
+        let queryParams = '';
+        let i = 0;
+        for (let key in this.searchForm) {
+          let prefix = i === 0 ? '?' : '&';
+          queryParams += `${prefix}${key}=${this.searchForm[key]}`;
+          i++;
         }
-        let uri = baseUri + pageNo + '/' + this.searchForm.name;
+        let uri = baseUri + queryParams;
         this.loading = true;
         this.$axios.get(uri).then(response => {
           this.loading = false;
-          this.tableData = response.data;
-          this.$message({
-            message: '查询成功',
-            type: 'success'
-          });
+          let data = response.data;
+          this.tableData = data.list;
+          this.total = data.total;
+          this.searchForm.pageSize = data.pageSize;
+          this.searchForm.pageNo = data.pageNum;
+          if(newIn) {
+            this.$message({
+              message: '查询成功',
+              type: 'success'
+            });
+          }
         }).catch(error => {
           this.loading = false;
           console.dir(error);
           this.$message.error('查询失败');
         });
       }
-    },
-    created() {
-      document.onkeydown = e => {
-        let keyCode = e.code;
-        if (keyCode === 'Enter') {
-          this.onSubmit();
-        }
-      }
     }
   }
 </script>
@@ -202,9 +224,12 @@
     margin-top: 20px;
     width: 100%;
   }
-
   .form-item {
     margin-left: 20px;
     float: left;
   }
+  .pagination {
+    text-align: left;
+    margin-left: 5px;
+  }
 </style>

yyets-history/src/main/java/com/zhangjiashuai/yyetshistory/config/YyetsHistoryProperties.java

@@ -7,7 +7,9 @@
 @Data
 public class YyetsHistoryProperties {
 
-    private static final int DEFAULT_PAGE_SIZE = 10;
+    public static final int DEFAULT_PAGE_SIZE = 10;
+    public static final int MAX_PAGE_SIZE = 100;
+
     /**
      * 保留的链接类型
      */

yyets-history/src/main/java/com/zhangjiashuai/yyetshistory/controller/ResourceController.java

@@ -6,6 +6,7 @@
 import lombok.extern.slf4j.Slf4j;
 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;
 
 @Slf4j
@@ -20,10 +21,11 @@ public ResourceController(ResourceService resourceService) {
     private ResourceService resourceService;
 
     @GetMapping("/page")
-    public PageInfo<Resource> selectPage(String name, int pageNo) {
-        PageInfo<Resource> resources = resourceService.selectPage(name, pageNo);
+    public PageInfo<Resource> selectPage(@RequestParam(required = false) String name,
+                @RequestParam int pageNo, @RequestParam int pageSize) {
+        PageInfo<Resource> resources = resourceService.selectPage(name, pageNo, pageSize);
         log.info("查询成功, name: {}, pageNo: {}, pageSize: {}, total: {}",
-                name, pageNo, resources.getPageSize(), resources.getTotal());
+                name, resources.getPageNum(), resources.getPageSize(), resources.getTotal());
         return resources;
     }
 }

yyets-history/src/main/java/com/zhangjiashuai/yyetshistory/repository/ResourceMapper.java

@@ -1,6 +1,7 @@
 package com.zhangjiashuai.yyetshistory.repository;
 
 import cn.hutool.core.collection.CollectionUtil;
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
@@ -12,16 +13,25 @@
 @Mapper
 public interface ResourceMapper extends BaseMapper<ResourceDO> {
 
+    LambdaQueryWrapper<ResourceDO>  ORDER_BY_NAME_WRAPPER = Wrappers.<ResourceDO>lambdaQuery()
+            .orderByAsc(ResourceDO::getName);
+
     static LambdaQueryWrapper<ResourceDO> queryWrapperByNameLike(String name) {
         return Wrappers.<ResourceDO>lambdaQuery()
                 .like(ResourceDO::getName, name).orderByAsc(ResourceDO::getName);
     }
 
     default long countByNameLike(String name) {
+        if(StrUtil.isEmpty(name)) {
+            return selectCount(ORDER_BY_NAME_WRAPPER);
+        }
         return selectCount(queryWrapperByNameLike(name));
     }
 
     default List<ResourceDO> selectByNameLike(String name) {
+        if(StrUtil.isEmpty(name)) {
+            return selectList(ORDER_BY_NAME_WRAPPER);
+        }
         return selectList(queryWrapperByNameLike(name));
     }
 

yyets-history/src/main/java/com/zhangjiashuai/yyetshistory/service/impl/ResourceServiceImpl.java

@@ -19,6 +19,10 @@
 
 import java.util.*;
 
+import static com.zhangjiashuai.yyetshistory.config.YyetsHistoryProperties.MAX_PAGE_SIZE;
+import static java.lang.Math.max;
+import static java.lang.Math.min;
+
 @Service
 public class ResourceServiceImpl implements ResourceService {
 
@@ -62,7 +66,8 @@ public Resource parseResource(ResourceDO resourceDO) {
         resource.setId(infoJson.getLongValue("id"));
         JSONArray list = dataObject.getJSONArray("list");
         if(CollectionUtil.isEmpty(list)) {
-            throw new NullPointerException("list is null");
+            resource.setSeasons(Collections.emptyList());
+            return resource;
         }
         List<Resource.Season> seasons = new ArrayList<>(list.size());
         resource.setSeasons(seasons);
@@ -127,6 +132,8 @@ public Resource parseResource(ResourceDO resourceDO) {
 
     @Override
     public PageInfo<Resource> selectPage(String name, int pageNo, int pageSize) {
+        pageNo = max(1, pageNo);
+        pageSize = min(max(1, pageSize), MAX_PAGE_SIZE);
         Page<ResourceDO> page = PageHelper.<ResourceDO>startPage(pageNo, pageSize).doSelectPage(() -> findByNameLike(name));
         return page.toPageInfo(this::parseResource);
     }

yyets-history/src/main/resources/application.yml

@@ -10,7 +10,7 @@ spring:
 logging:
   level:
     root: info
-    "com.zhangjiashuai.yyetshistory.repository.impl": debug
+#    "com.zhangjiashuai.yyetshistory.repository": debug
   file:
     name: logs/yyets-history.log
 mybatis-plus:

yyets-history/src/main/resources/static/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>yyets-history-ui</title><link rel="shortcut icon" href=/favicon.ico><link href=/static/css/app.ed97e7e8937515c294f76315ce5bfecb.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.fccd8c50e92f68dc616b.js></script><script type=text/javascript src=/static/js/app.9068120f11367698196d.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>yyets-history-ui</title><link rel="shortcut icon" href=/favicon.ico><link href=/static/css/app.c47def4c299e43e77fa8d055898c3b10.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.fccd8c50e92f68dc616b.js></script><script type=text/javascript src=/static/js/app.ecd545ccb3ffeda10e4b.js></script></body></html>