说明：1、前端单词收藏夹页面根据后端分页实现无限滚动

ruoyi-ui/src/api/business/english/word.js

@@ -50,3 +50,12 @@ export function delWord(id) {
     method: 'delete'
   })
 }
+
+//查询收藏夹英语单词
+export function collectWord(query){
+  return request({
+    url: '/english/word/collect',
+    method: 'get',
+    params: query
+  })
+}

ruoyi-ui/src/views/business/english/word/collect.vue

@@ -1,39 +1,188 @@
-<template>
+<template xmlns="http://www.w3.org/1999/html">
-  <div class="infinite-list-wrapper" style="overflow:auto">
+  <div class="sea_main_con test-5" @mouseenter="onMouseover" @mouseleave="onMouseout">
-    <ul
+    <div class="infinite-list-wrapper">
-      class="list"
+      <ul
-      v-infinite-scroll="load"
+        class="list"
-      infinite-scroll-disabled="disabled">
+        v-infinite-scroll="loadMore"
-      <li v-for="i in count" class="list-item">{{ i }}</li>
+        infinite-scroll-disabled="disabled"
-    </ul>
+        infinite-scroll-distance="20"
+      >
+        <el-row>
+          <el-col :span="8" v-for="(say, index) in sayLists" :key="index" class="item-img">
+            <el-card :body-style="{ padding: '0px' }">
+              <div style="padding: 14px;">
+                <span>
 
-
+                  <el-tag type="info"
-    <p v-if="loading">加载中...</p>
+                          size="medium"
+                  >英：{{ say.englishWord }}
+                  </el-tag>
+                </span>
+                <div class="bottom clearfix">
+                  <time class="time">
+                    <el-tag type="warning"
+                            size="medium"
+                            color=""
+                    >中：{{ say.chineseWord }}
+                    </el-tag>
+                  </time>
+                  <el-button icon="el-icon-search" circle class="button"></el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <!--</li>-->
+      </ul>
+      <div class="load_icon">
+        <p v-if="loading">加载中<i class="el-icon-loading"/></p>
+        <p v-if="noMore">没有更多了~~~~</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import {collectWord} from "@/api/business/english/word";
+
 export default {
-  name: "collect",
   data() {
     return {
-      count: 10,
+      loading: false,
-      loading: false
+      seen: true,
+      currentDate: new Date(),
+      sayLists: [],
+      // 每次请求回来的数据的个数
+      everyList: 1,
+
+      queryParams: {
+        pageNum: 1,
+        pageSize: 21
+      },
     }
   },
   computed: {
+    noMore() {
+      return this.everyList < 1;
+    },
     disabled() {
-      return this.loading
+      return this.loading || this.noMore
     }
   },
   methods: {
-    load() {
+    loadMore() {
       this.loading = true
       setTimeout(() => {
-        this.count += 2
+        // this.count += 2
+
+        collectWord(this.queryParams).then((response) => {
+          console.log(response.data)
+          this.everyList = response.data.records.length;
+          for (var i = 0; i < response.data.records.length; i++) {
+            this.sayLists.push(response.data.records[i])
+          }
+        }, (error) => {
+
+        })
+        this.queryParams.pageNum += 1;
         this.loading = false
-      }, 200)
+      }, 150)
+    },
+    onMouseover() {
+      this.seen = true;
+    },
+    onMouseout() {
+      this.seen = false;
     }
+
   }
 }
 </script>
+
+<style scoped class="scss">
+
+.item-img {
+  margin-left: 60px;
+  margin-top: 20px;
+}
+
+.sea_main_con {
+  width: 1002px;
+  height: 800px;
+  border: 1px #b8b7b7 solid;
+  overflow-y: scroll;
+  border-radius: 4px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2px;
+  margin-bottom: 5px;
+}
+
+.test-5::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+.test-5::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  background-color: rgb(103, 194, 58);
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.test-5::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #ededed;
+  border-radius: 10px;
+}
+
+.time {
+  font-size: 13px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.button {
+  padding: 0;
+  float: right;
+}
+
+.image {
+  width: 100%;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both
+}
+
+.el-col-8 {
+  width: 24.3%;
+}
+
+.load_icon {
+  width: 100%;
+  text-align: center;
+}
+</style>

ruoyi-ui/src/views/business/english/word/index.vue

@@ -85,6 +85,7 @@
         </el-button>
       </el-col>
       <el-col :span="1.5">
+        <router-link :to="'/openapi/english/collect/'" class="link-type">
         <el-button
           type="warning"
           plain
@@ -93,10 +94,9 @@
           @click="handleCollect"
           v-hasPermi="['english:word:collect']"
         >
-          <router-link :to="'/openapi/english/collect/'" class="link-type">
             收藏夹
-          </router-link>
         </el-button>
+        </router-link>
 
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -155,7 +155,7 @@
 
     <!-- 修改英语单词对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body >
-      <el-form ref="formEdit" :model="form" :rules="rulesEdit" label-width="80px">
+      <el-form ref="formEdit" :model="form" :rules="rulesEdit" label-width="80px" v-loading="loadingEdit">
         <el-form-item label="英语单词" prop="englishWord">
           <el-input v-model="form.englishWord" placeholder="请输入英语单词"/>
         </el-form-item>
@@ -189,7 +189,7 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" v-loading="loadingEdit">
+      <div slot="footer" class="dialog-footer" >
         <el-button type="primary" @click="submitFormEdit">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -197,7 +197,7 @@
 
     <!--添加英语对话框-->
     <el-dialog :title="title" :visible.sync="openAdd" width="500px" append-to-body>
-      <el-form ref="formAdd" :model="form" :rules="rulesAdd" label-width="80px">
+      <el-form ref="formAdd" :model="form" :rules="rulesAdd" label-width="80px" v-loading="loadingEdit">
         <el-form-item label="中英文" prop="content">
           <el-input v-model="form.content" placeholder="请输入中文或英文"/>
         </el-form-item>
@@ -442,7 +442,10 @@ export default {
                 this.loadingEdit= false
                 this.open = false;
                 this.getList();
+              }).catch(err =>{
+                this.loadingEdit= false
               });
+
             }
           }
         }
@@ -453,11 +456,16 @@ export default {
       this.$refs["formAdd"].validate(valid => {
           if (valid) {
             if (this.form.id == null) {
+              this.loadingEdit= true
               addWord(this.form).then(response => {
                 this.$modal.msgSuccess("新增成功");
                 this.openAdd = false;
+                this.loadingEdit= false
                 this.getList();
+              }).catch(err =>{
+                this.loadingEdit= false
               });
+
             }
           }
         }

xjs-business/xjs-business-english/src/main/java/com/xjs/word/service/impl/EnglishWordServiceImpl.java

@@ -79,13 +79,13 @@ public class EnglishWordServiceImpl implements IEnglishWordService {
             if (Objects.isNull(r.getData().getErrorCode())) {
                 //指定to为翻译字典转换的内容
                 englishWord.setContent(r.getData().getTo());
-                //添加缓存到redis并设置7天有效时间
-                Map<String, Object> build = new HashMap<>();
-                build.put(hkey, englishWord);
-                redisService.setCacheMap(TRAN_DICT, build);
-                redisService.expire(TRAN_DICT, TRAN_DICT_EXPIRE, TimeUnit.DAYS);
             }
         }
+        //添加缓存到redis并设置7天有效时间
+        Map<String, Object> build = new HashMap<>();
+        build.put(hkey, englishWord);
+        redisService.setCacheMap(TRAN_DICT, build);
+        redisService.expire(TRAN_DICT, TRAN_DICT_EXPIRE, TimeUnit.DAYS);
         return englishWord;
     }