说明：1、前端添加单词收藏按钮以及新增收藏夹页面

2、后端定义获取收藏夹接口

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+
+
+    <p v-if="loading">加载中...</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "collect",
+  data() {
+    return {
+      count: 10,
+      loading: false
+    }
+  },
+  computed: {
+    disabled() {
+      return this.loading
+    }
+  },
+  methods: {
+    load() {
+      this.loading = true
+      setTimeout(() => {
+        this.count += 2
+        this.loading = false
+      }, 200)
+    }
+  }
+}
+</script>

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

@@ -84,6 +84,21 @@
         >导出
         </el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-star-off"
+          size="mini"
+          @click="handleCollect"
+          v-hasPermi="['english:word:collect']"
+        >
+          <router-link :to="'/openapi/english/collect/'" class="link-type">
+            收藏夹
+          </router-link>
+        </el-button>
+
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -229,7 +244,7 @@
 
 
       <div v-loading="loadingC">
-        <div class="div1" >
+        <div class="div1">
           {{ form.englishWord }}
         </div>
         <div class="div2">
@@ -328,9 +343,9 @@ export default {
     //根据id查询放入抽屉
     findById(id) {
       this.loadingC = true;
-      getWord(id).then(res =>{
+      getWord(id).then(res => {
         this.form = res.data
-        this.loadingC=false
+        this.loadingC = false
       })
     },
 
@@ -338,6 +353,7 @@ export default {
     //关闭抽屉
     handleClose(done) {
       done();
+      this.getList();
     },
 
     /** 详细按钮操作 */
@@ -462,12 +478,17 @@ export default {
       this.download('english/word/export', {
         ...this.queryParams
       }, `word_${new Date().getTime()}.xlsx`)
+    },
+
+    //收藏夹操作
+    handleCollect() {
+
     }
   }
 };
 </script>
 <style>
-.div1{
+.div1 {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   height: 180px;
   margin: 10px;
@@ -477,7 +498,8 @@ export default {
   text-shadow: 2px 2px 2px grey;
   font-size: 30px;
 }
-.div2{
+
+.div2 {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   margin: 10px;
   padding: 30px;

xjs-business/xjs-business-english/src/main/java/com/xjs/word/controller/EnglishWordController.java

@@ -31,6 +31,18 @@ public class EnglishWordController extends BaseController {
     private IEnglishWordService englishWordService;
 
 
+    /**
+     * 英语单词收藏夹
+     * @return TableDataInfo
+     */
+    @RequiresPermissions("english:word:collect")
+    @GetMapping("collect")
+    public TableDataInfo collect() {
+        List<EnglishWord> englishWordList=englishWordService.getEnglishWordByCollect();
+        return getDataTable(englishWordList);
+    }
+
+
     //------------------------代码自动生成-----------------------------------
 
     /**

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

@@ -12,6 +12,12 @@ import java.util.List;
  */
 public interface IEnglishWordService {
 
+    /**
+     * 查询收藏的单词列表
+     * @return
+     */
+    List<EnglishWord> getEnglishWordByCollect();
+
 
     //------------------------代码自动生成-----------------------------------
     /**

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

@@ -41,6 +41,11 @@ public class EnglishWordServiceImpl implements IEnglishWordService {
     private RedisService redisService;
 
 
+    @Override
+    public List<EnglishWord> getEnglishWordByCollect() {
+        return null;
+    }
+
     /**
      * 查询英语单词、远程调用获取翻译字典
      *
@@ -50,9 +55,11 @@ public class EnglishWordServiceImpl implements IEnglishWordService {
     @Override
     public EnglishWord selectEnglishWordById(Long id) {
         EnglishWord englishWord = englishWordMapper.selectById(id);
+        Optional.ofNullable(englishWord).orElseThrow(() -> new BusinessException("数据丢失了~~~~"));
         //每次调用查看次数+1
         Long count = englishWord.getLookCount() + 1;
         englishWord.setLookCount(count);
+        englishWordMapper.updateById(englishWord);
         //redis中的hsah键
         String hkey = englishWord.getEnglishWord() + ":" + id;
         Object value = redisService.getCacheMapValue(TRAN_DICT, hkey);
@@ -125,6 +132,20 @@ public class EnglishWordServiceImpl implements IEnglishWordService {
         return englishWordMapper.updateById(englishWord);
     }
 
+    /**
+     * 批量删除英语单词 (清除redis缓存)
+     *
+     * @param ids 需要删除的英语单词主键
+     * @return 结果
+     */
+    @Override
+    public int deleteEnglishWordByIds(Long[] ids) {
+        for (Long id : ids) {
+            //需要查出对象才能删除缓存，后续看需求添加
+        }
+        return englishWordMapper.deleteEnglishWordByIds(ids);
+    }
+
 
     //------------------------代码自动生成-----------------------------------
 
@@ -139,16 +160,7 @@ public class EnglishWordServiceImpl implements IEnglishWordService {
         return englishWordMapper.selectEnglishWordList(englishWord);
     }
 
-    /**
-     * 批量删除英语单词
-     *
-     * @param ids 需要删除的英语单词主键
-     * @return 结果
-     */
-    @Override
-    public int deleteEnglishWordByIds(Long[] ids) {
-        return englishWordMapper.deleteEnglishWordByIds(ids);
-    }
+
 
     /**
      * 删除英语单词信息