文章缓存 redis定时转移到mongoDb

ruoyi-admin/src/main/java/com/ruoyi/web/controller/note/NmNoteController.java

@@ -3,6 +3,7 @@ package com.ruoyi.web.controller.note;
 import java.util.List;
 
 import com.ruoyi.common.core.domain.entity.SysUser;
+import com.ruoyi.common.core.redis.RedisCache;
 import com.ruoyi.note.domain.NoteContentMgDb;
 import com.ruoyi.note.service.INoteRepositoryService;
 import org.springframework.security.access.prepost.PreAuthorize;
@@ -37,20 +38,6 @@ public class NmNoteController extends BaseController
     @Autowired
     private INmNoteService nmNoteService;
 
-    @Autowired
-    private INoteRepositoryService noteRepositoryService;
-
-
-    //测试
-    @GetMapping("/selectBymenuNote2")
-    public void save() {
-        NoteContentMgDb noteContentMgDb = new NoteContentMgDb();
-        noteContentMgDb.setId(7L);
-        noteContentMgDb.setNoteContent("宋人头2");
-        noteRepositoryService.save(noteContentMgDb);
-    }
-
-
 
     /**
      * 用户查看栏目下的所有便签
@@ -59,9 +46,8 @@ public class NmNoteController extends BaseController
     @GetMapping("/selectBymenuNote")
     public TableDataInfo selectBymenuNote(Long menuId)
     {
-        SysUser sysUser=getAuthUser();
         NmNote nmNote= new NmNote();
-        nmNote.setUserId(sysUser.getUserId());
+        nmNote.setUserId(getAuthUser().getUserId());
         nmNote.setMenuId(menuId);
         startPage();
         List<NmNote> list = nmNoteService.selectNmNoteList(nmNote);
@@ -69,17 +55,28 @@ public class NmNoteController extends BaseController
     }
 
 
+
     /**
-     * 用户新增便签
+     * 用户新增便签 直接创建成功
      */
     @PostMapping("/addUserNote")
     public AjaxResult userAddNote(@RequestBody NmNote nmNote)
     {
-        SysUser sysUser=getAuthUser();
+
-        nmNote.setUserId(sysUser.getUserId());
+        nmNote.setUserId(getAuthUser().getUserId());
         return toAjax(nmNoteService.insertNmNote(nmNote));
     }
 
+    /**
+     * 实时更新文章信息 不用做缓存
+     */
+    @PostMapping("/userUpdateNote")
+    public AjaxResult userUpdateNote(@RequestBody NmNote nmNote)
+    {
+
+        return toAjax(nmNoteService.userUpdateNote(nmNote));
+    }
+
     /**
      *用户 获取便签详细信息 然后修改
      */

ruoyi-admin/src/main/java/com/ruoyi/web/test/controller/MongdbApplicationTests.java

@@ -1,11 +1,18 @@
 package com.ruoyi.web.test.controller;
 
+import com.github.wujun234.uid.UidGenerator;
+import com.ruoyi.common.constant.Constants;
+import com.ruoyi.common.core.redis.RedisCache;
 import com.ruoyi.note.domain.NoteContentMgDb;
 import com.ruoyi.note.service.INoteRepositoryService;
+import org.bson.types.ObjectId;
 import org.junit.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 
+import javax.annotation.Resource;
+import java.util.Collection;
 import java.util.List;
+import java.util.Map;
 
 /**
  * @Auther: Wang
@@ -16,6 +23,16 @@ public class MongdbApplicationTests  extends BaseSpringBootTest{
     @Autowired
     private INoteRepositoryService noteRepositoryService;
 
+    @Autowired
+    private RedisCache redisCache;
+
+
+    @Resource
+    private UidGenerator cachedUidGenerator;
+
+    @Resource
+    private UidGenerator defaultUidGenerator;
+
     /**
      * 查询所有信息
      */
@@ -31,7 +48,7 @@ public class MongdbApplicationTests  extends BaseSpringBootTest{
     @Test
     public void save() {
         NoteContentMgDb noteContentMgDb = new NoteContentMgDb();
-        noteContentMgDb.setId(19L);
+        noteContentMgDb.setId(15108230363503104L);
         noteContentMgDb.setNoteContent("宋人头");
         noteRepositoryService.save(noteContentMgDb);
     }
@@ -43,7 +60,7 @@ public class MongdbApplicationTests  extends BaseSpringBootTest{
     @Test
     public void update() {
         NoteContentMgDb noteContentMgDb = new NoteContentMgDb();
-        noteContentMgDb.setId(2L);
+//        noteContentMgDb.setId(2L);
         noteContentMgDb.setNoteContent("吴很帅");
         noteRepositoryService.update(noteContentMgDb);
     }
@@ -55,4 +72,51 @@ public class MongdbApplicationTests  extends BaseSpringBootTest{
     public void delete() {
         noteRepositoryService.delete(3);
     }
+
+
+
+
+
+
+
+
+
+    @Test
+    public  void addredis(){
+    for (int i=0;i<10;i++){
+        redisCache.setCacheObject(Constants.NM_NOTE_CONTENT+defaultUidGenerator.getUID(),i);
+    }
+
+    }
+    @Test
+    public  void getRedis(){
+       String redis= redisCache.getCacheObject("nm_note:15563127529716224");
+        System.out.println("redis:"+redis);
+
+    }
+
+
+    /**
+     * 缓存文章 转义到 mgDB
+     *
+     * @param
+     * @return
+     */
+    @Test
+    public void redisToMgDB(){
+
+
+
+    }
+
+
+
+
+
+
+
+
+
+
+
 }

ruoyi-admin/src/main/resources/application.yml

@@ -82,7 +82,7 @@ token:
     # 令牌自定义标识
     header: Authorization
     # 令牌密钥
-    secret: abcdefghijklmnopqrstuvwxyz
+    secret: abc4abcdefghijklmnopqrstuvwxyz
     # 令牌有效期（默认30分钟）
     expireTime: 300
 

ruoyi-common/src/main/java/com/ruoyi/common/constant/Constants.java

@@ -2,7 +2,7 @@ package com.ruoyi.common.constant;
 
 /**
  * 通用常量信息
- * 
+ *
  * @author ruoyi
  */
 public class Constants
@@ -121,4 +121,9 @@ public class Constants
      * 资源映射路径 前缀
      */
     public static final String RESOURCE_PREFIX = "/profile";
+
+    /**
+     * mongodb note文章
+     */
+    public static final String NM_NOTE_CONTENT = "nm_note:";
 }

ruoyi-note/src/main/java/com/ruoyi/note/domain/NmNote.java

@@ -8,8 +8,7 @@ import org.apache.commons.lang3.builder.ToStringBuilder;
 import org.apache.commons.lang3.builder.ToStringStyle;
 import com.ruoyi.common.annotation.Excel;
 
-import javax.persistence.Column;
+import javax.persistence.*;
-import javax.persistence.Table;
 import java.util.Date;
 
 /**
@@ -27,6 +26,8 @@ public class NmNote
     private static final long serialVersionUID = 1L;
 
     /** Note便签ID */
+    @Id
+    @GeneratedValue(generator = "JDBC")//返回自增长主键
     @Column(name = "note_id")
     @Excel(name = "Note便签ID")
     private Long noteId;
@@ -112,4 +113,12 @@ public class NmNote
     private Date updateTime;
 
 
+    @Column(name = "tiymce_ueditor")
+    private  Long tiymceUeditor;
+
+    /**富文本文章内容*/
+    @Transient
+    private  String UeditorContent;
+
+
 }

ruoyi-note/src/main/java/com/ruoyi/note/service/INmNoteService.java

@@ -66,4 +66,20 @@ public interface INmNoteService
      * @return 便签管理
      */
     public NmNote selectNmNoteuserById(Long noteId,Long userID);
+
+    /**
+     * 用户便签内容 实时储存到数据库
+     *
+     * @param  nmNote
+     * @return
+     */
+    public int userUpdateNote(NmNote nmNote);
+
+    /**
+     * redis的文章 转移更新到MongoDb
+     *
+     * @param
+     * @return
+     */
+    public void redisToMongonDB();
 }

ruoyi-note/src/main/java/com/ruoyi/note/service/INoteRepositoryService.java

@@ -1,6 +1,10 @@
 package com.ruoyi.note.service;
 
+import com.mongodb.client.MongoCollection;
+import com.mongodb.client.model.Filters;
 import com.ruoyi.note.domain.NoteContentMgDb;
+import com.sun.corba.se.spi.ior.ObjectId;
+import org.springframework.data.mongodb.core.mapping.Document;
 
 import java.util.List;
 
@@ -18,4 +22,7 @@ public interface INoteRepositoryService {
     List<NoteContentMgDb> findAll();
 
     void delete(Integer id);
+
+    //根据id查询
+    List<NoteContentMgDb> findById(String id);
 }

ruoyi-note/src/main/java/com/ruoyi/note/service/impl/NmNoteServiceImpl.java

@@ -1,13 +1,31 @@
 package com.ruoyi.note.service.impl;
 
+import java.util.Collection;
 import java.util.List;
+import java.util.Map;
+
+import cn.hutool.core.date.DateUtil;
+import com.github.wujun234.uid.UidGenerator;
+import com.mongodb.BasicDBObject;
+import com.mongodb.DBObject;
+import com.mongodb.client.MongoCollection;
+import com.mongodb.client.MongoCursor;
+import com.ruoyi.common.constant.Constants;
+import com.ruoyi.common.core.redis.RedisCache;
 import com.ruoyi.common.utils.DateUtils;
+import com.ruoyi.note.domain.NmNoteContent;
+import com.ruoyi.note.domain.NoteContentMgDb;
+import com.ruoyi.note.service.INmNoteContentService;
+import com.ruoyi.note.service.INoteRepositoryService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.mongodb.core.mapping.Document;
 import org.springframework.stereotype.Service;
 import com.ruoyi.note.mapper.NmNoteMapper;
 import com.ruoyi.note.domain.NmNote;
 import com.ruoyi.note.service.INmNoteService;
 
+import javax.annotation.Resource;
+
 /**
  * 便签管理Service业务层处理
  *
@@ -15,11 +33,23 @@ import com.ruoyi.note.service.INmNoteService;
  * @date 2020-09-12
  */
 @Service
-public class NmNoteServiceImpl implements INmNoteService
+public class NmNoteServiceImpl implements INmNoteService {
-{
     @Autowired
     private NmNoteMapper nmNoteMapper;
 
+    @Resource
+    private UidGenerator defaultUidGenerator;
+
+    @Autowired
+    private INmNoteContentService nmNoteContentService;
+
+    @Autowired
+    private INoteRepositoryService noteRepositoryService;
+
+    @Autowired
+    private RedisCache redisCache;
+
+
     /**
      * 查询便签管理
      *
@@ -27,8 +57,7 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 便签管理
      */
     @Override
-    public NmNote selectNmNoteById(Long noteId)
+    public NmNote selectNmNoteById(Long noteId) {
-    {
         return nmNoteMapper.selectNmNoteById(noteId);
     }
 
@@ -39,8 +68,7 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 便签管理
      */
     @Override
-    public List<NmNote> selectNmNoteList(NmNote nmNote)
+    public List<NmNote> selectNmNoteList(NmNote nmNote) {
-    {
         return nmNoteMapper.selectNmNoteList(nmNote);
     }
 
@@ -51,10 +79,11 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 结果
      */
     @Override
-    public int insertNmNote(NmNote nmNote)
+    public int insertNmNote(NmNote nmNote) {
-    {
         nmNote.setCreateTime(DateUtils.getNowDate());
-        return nmNoteMapper.insertNmNote(nmNote);
+        nmNote.setTitle(DateUtil.now());
+        nmNote.setTiymceUeditor(defaultUidGenerator.getUID());
+        return nmNoteMapper.insertSelective(nmNote);
     }
 
     /**
@@ -64,8 +93,7 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 结果
      */
     @Override
-    public int updateNmNote(NmNote nmNote)
+    public int updateNmNote(NmNote nmNote) {
-    {
         nmNote.setUpdateTime(DateUtils.getNowDate());
         return nmNoteMapper.updateNmNote(nmNote);
     }
@@ -77,8 +105,7 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 结果
      */
     @Override
-    public int deleteNmNoteByIds(Long[] noteIds)
+    public int deleteNmNoteByIds(Long[] noteIds) {
-    {
         return nmNoteMapper.deleteNmNoteByIds(noteIds);
     }
 
@@ -89,8 +116,7 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 结果
      */
     @Override
-    public int deleteNmNoteById(Long noteId)
+    public int deleteNmNoteById(Long noteId) {
-    {
         return nmNoteMapper.deleteNmNoteById(noteId);
     }
 
@@ -101,11 +127,71 @@ public class NmNoteServiceImpl implements INmNoteService
      * @return 便签管理
      */
     @Override
-    public NmNote selectNmNoteuserById(Long noteId,Long userID) {
+    public NmNote selectNmNoteuserById(Long noteId, Long userID) {
         NmNote nmNote = new NmNote();
         nmNote.setNoteId(noteId);
         nmNote.setUserId(userID);
-        return nmNoteMapper.selectOne(nmNote);
+        NmNote isnmNote1 = nmNoteMapper.selectOne(nmNote);
+        //查询对应的文章数据
+        //1.查redis缓存
+        String noteContent = redisCache.getCacheObject(Constants.NM_NOTE_CONTENT + isnmNote1.getTiymceUeditor());
+        if (noteContent != null && !"".equals(noteContent)) {
+            isnmNote1.setUeditorContent(noteContent);
+        } else {
+        // 2不存在就走mogodb
+            List<NoteContentMgDb> NoteContentMgDb = noteRepositoryService.findById(isnmNote1.getTiymceUeditor() + "");
+            isnmNote1.setUeditorContent(NoteContentMgDb.get(0).getNoteContent());
+        }
+        return isnmNote1;
+    }
+
+    /**
+     * 实时修改数据 保存到缓存中
+     *
+     * @param nmNote
+     * @return int
+     */
+    @Override
+    public int userUpdateNote(NmNote nmNote) {
+        //储存到redis中  只缓存频繁操作的文章内容
+        redisCache.setCacheObject(Constants.NM_NOTE_CONTENT+nmNote.getTiymceUeditor(),nmNote.getUeditorContent());
+        return  1;
+    }
+
+    /**
+     * redis的文章 转移更新到MongoDb
+     *
+     * @param
+     * @return
+     */
+    @Override
+    public void redisToMongonDB() {
+        //模糊查询 获取所有的key
+        Collection<String> listNote= redisCache.keys(Constants.NM_NOTE_CONTENT+"*");
+        for(String str:listNote){
+            //文章UUID
+            String mgDbContentUUID=str.replace(Constants.NM_NOTE_CONTENT,"");
+            //文章
+            String redisContent= redisCache.getCacheObject(str);
+            //查询mongoDb  存在就修改 不存在就新增
+            List<NoteContentMgDb> listMgDbContent =  noteRepositoryService.findById(mgDbContentUUID);
+            if (listMgDbContent!=null&&!listMgDbContent.isEmpty()){
+                //修改
+                NoteContentMgDb noteContentMgDb = new NoteContentMgDb();
+                noteContentMgDb.setId(Long.valueOf(mgDbContentUUID));
+                noteContentMgDb.setNoteContent(redisContent);
+                noteRepositoryService.update(noteContentMgDb);
+            }else {
+                //新增
+                NoteContentMgDb noteContentMgDb = new NoteContentMgDb();
+                noteContentMgDb.setId(Long.valueOf(mgDbContentUUID));
+                noteContentMgDb.setNoteContent(redisContent);
+                noteRepositoryService.save(noteContentMgDb);
+            }
+            //删除对应缓存
+            redisCache.deleteObject(str);
+        }
+
     }
 
 

ruoyi-note/src/main/java/com/ruoyi/note/service/impl/NoteRepositoryServiceImpl.java

@@ -1,10 +1,15 @@
 package com.ruoyi.note.service.impl;
 
 
+import com.mongodb.client.MongoCollection;
+import com.mongodb.client.model.Filters;
 import com.ruoyi.note.domain.NoteContentMgDb;
 import com.ruoyi.note.service.INoteRepositoryService;
+
+import org.bson.types.ObjectId;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.mongodb.core.MongoTemplate;
+import org.springframework.data.mongodb.core.mapping.Document;
 import org.springframework.data.mongodb.core.query.Criteria;
 import org.springframework.data.mongodb.core.query.Query;
 import org.springframework.data.mongodb.core.query.Update;
@@ -23,6 +28,8 @@ public class NoteRepositoryServiceImpl implements INoteRepositoryService {
     @Autowired
     private MongoTemplate mongoTemplate;
 
+
+
     /**
      * 新增信息
      * @param student
@@ -66,4 +73,16 @@ public class NoteRepositoryServiceImpl implements INoteRepositoryService {
         NoteContentMgDb byId = mongoTemplate.findById(1, NoteContentMgDb.class);
         mongoTemplate.remove(byId);
     }
+
+
+
+    @Override
+    public List<NoteContentMgDb> findById(String id) {
+        //修改的条件
+        Query query = new Query(Criteria.where("_id").is(Long.valueOf(id)));
+        //修改的内容
+        return mongoTemplate.find(query, NoteContentMgDb.class);
+    }
+
+
 }

ruoyi-note/src/main/resources/mapper/note/NmNoteMapper.xml

@@ -22,11 +22,12 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="isEncryption"    column="is_encryption"    />
         <result property="createTime"    column="create_time"    />
         <result property="updateTime"    column="update_time"    />
+        <result property="tiymceUeditor"    column="tiymce_ueditor"    />
     </resultMap>
 
 
     <sql id="selectNmNoteVo">
-        select note_id, user_id, title, description, menu_id, background, note_count, note_sort, is_state, read_progress, is_star, is_delete, top_flag, is_share, is_encryption, create_time, update_time from nm_note
+        select note_id, user_id, title, description, menu_id, background, note_count, note_sort, is_state, read_progress, is_star, is_delete, top_flag, is_share, is_encryption, create_time, update_time,tiymce_ueditor from nm_note
     </sql>
 
     <select id="selectNmNoteList" parameterType="NmNote" resultMap="NmNoteResult">
@@ -47,7 +48,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="topFlag != null "> and top_flag = #{topFlag}</if>
             <if test="isShare != null "> and is_share = #{isShare}</if>
             <if test="isEncryption != null "> and is_encryption = #{isEncryption}</if>
+            <if test="tiymceUeditor != null "> and tiymce_ueditor = #{tiymceUeditor}</if>
         </where>
+        order by create_time desc
     </select>
 
     <select id="selectNmNoteById" parameterType="Long" resultMap="NmNoteResult">
@@ -75,6 +78,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="isEncryption != null">is_encryption,</if>
             <if test="createTime != null">create_time,</if>
             <if test="updateTime != null">update_time,</if>
+            <if test="tiymceUeditor != null">tiymce_ueditor,</if>
          </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="noteId != null">#{noteId},</if>
@@ -94,6 +98,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="isEncryption != null">#{isEncryption},</if>
             <if test="createTime != null">#{createTime},</if>
             <if test="updateTime != null">#{updateTime},</if>
+            <if test="tiymceUeditor != null">#{tiymceUeditor},</if>
          </trim>
     </insert>
 
@@ -116,6 +121,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="isEncryption != null">is_encryption = #{isEncryption},</if>
             <if test="createTime != null">create_time = #{createTime},</if>
             <if test="updateTime != null">update_time = #{updateTime},</if>
+            <if test="tiymceUeditor != null">tiymce_ueditor = #{tiymceUeditor},</if>
         </trim>
         where note_id = #{noteId}
     </update>

ruoyi-ui/src/api/note/note.js

@@ -19,10 +19,25 @@ export function userGetNoteInfo(noteId) {
 
 
 
+// 新增便签管理
+export function addUserNote(data) {
+  return request({
+    url: '/note/note/addUserNote',
+    method: 'post',
+    data: data
+  })
+}
 
 
 
-
+// 修改便签文章的内容 实时保存
+export function userUpdateNote(data) {
+  return request({
+    url: '/note/note/userUpdateNote',
+    method: 'put',
+    data: data
+  })
+}
 
 
 // 查询便签管理列表

ruoyi-ui/src/components/BookmarkList/index.vue

@@ -2,7 +2,7 @@
   <div>
 
 
-    <div v-for="bm in bookmarkList" class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
+    <div v-for="bm in bookmarkList" class="bookmark"   @click="winurl(bm.noteId,bm.tiymceUeditor,bm.bookmarkId,bm.url)">
       <div class="bookmark-item">
 
         <span class="bookmark-title" >{{bm.title}}</span>
@@ -48,9 +48,15 @@
         isdescription:false,
         noteTime:true,
         isBookmarkIcon:false,
+        Ueditor:undefined,
+
       }
     },
     created() {
+      var that=this;
+      //便签ID
+      that.Ueditor = that.$route.query.Ueditor;
+
       var a=2;
       if(a==2){
         //便签模式 只能这么显示
@@ -73,8 +79,9 @@
     },
 
     methods: {
-      windowurl(A, B) {
+      winurl:function(noteId,tiymceueditor,bookmarkId,url) {
-        this.$emit('on-windowurl', A, B)
+
+       this.$emit('on-windowurl', noteId, tiymceueditor,bookmarkId,url);
       }
 
     }

ruoyi-ui/src/router/index.js

@@ -161,6 +161,17 @@ export const constantRoutes = [
           title: '书签页面',icon:'user',
           requireAuth: false,//加该字段,表示进入这个路由是需要登录的true
         },
+        children: [
+          {
+            path: '/NqEdit',
+            name: 'NqEdit',
+            component: resolve => require(['../views/bookmark/common/NqEdit.vue'], resolve),
+            meta:{
+              title: 'Quill编辑器',icon:'user',
+              requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
+            },
+          }
+        ]
       },{
         path: '/UserTagAll',
         name: 'UserTagAll',
@@ -185,14 +196,6 @@ export const constantRoutes = [
           title: '测试页面',icon:'user',
           requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
         },
-      },{
-        path: '/NqEdit',
-        name: 'NqEdit',
-        component: resolve => require(['../views/bookmark/common/NqEdit.vue'], resolve),
-        meta:{
-          title: 'Quill编辑器',icon:'user',
-          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
-        },
       }
     ],
 

ruoyi-ui/src/views/bookmark/bookmark/index.vue

@@ -22,14 +22,14 @@
         </div>
 
         <div class="sousouright-iconadd">
-          <el-dropdown trigger="click" size="small" :hide-on-click="false">
+          <el-dropdown trigger="click" size="small" :hide-on-click="true" >
               <span class="el-dropdown-link">
           <i class="el-icon-plus" style="font-size: 18px;"/>
              </span>
             <el-dropdown-menu slot="dropdown" class="sq-dropdown">
               <el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbookmarkurl">添加连接
               </el-dropdown-item>
-              <el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">添加文本</el-dropdown-item>
+              <el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbooNote" >添加文本</el-dropdown-item>
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="d">导入书签</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -59,9 +59,9 @@
 
           <div class="filter-tbar">
             <div class="filter-classification">
-              <div class="classification " @click="showopen(0)"><span>网页</span></div>
+              <div  :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>网页</span></div>
-              <div class="classification" @click="showopen(1)"><span>文本</span></div>
+              <div :class="['classification',property=='1'?' classification-click':'']" @click="showopen(1)"><span>文本</span></div>
-              <div class="classification" @click="showopen(2)"><span>其他</span></div>
+              <div :class="['classification',property=='2'?' classification-click':'']" @click="showopen(2)"><span>其他</span></div>
               <!--        <div class="classification" @click="showopen(3)"><span>其他</span></div>-->
             </div>
             <div class="setUpThe">
@@ -290,10 +290,12 @@
                       <i class="el-icon-position"></i>
                     </div>
                   </el-header>
-                  <div class="main-url-title">部分网站不允许内嵌套打开,请在设置中选择自己喜欢的打开方式!</div>
+<!--                  <div class="main-url-title">部分网站不允许内嵌套打开,请在设置中选择自己喜欢的打开方式!</div>-->
                   <div class="mianUrl-botoom"  v-loading="iframeLoading"  >
 <!--                    webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"-->
-                    <iframe sandbox="allow-forms allow-scripts allow-popups" class="openurl" :src="gourl"  target="_self"  tabindex="-1"  />
+<!--                    <iframe sandbox="allow-forms allow-scripts allow-popups" class="openurl" :src="gourl"  target="_self"  tabindex="-1"  />-->
+                    <router-view :key="$route.query.t"></router-view>
+
                   </div>
         </el-main>
       </el-container>
@@ -322,6 +324,7 @@
   import {
     selectBymenuNote,
     userGetNoteInfo,
+    addUserNote
   } from "@/api/note/note";
   import {format} from 'timeago.js';
 
@@ -332,6 +335,8 @@
 
     data: function () {
       return {
+        //网页0 文本1 其他1
+        property:0,
         sousuo: '',
         drawer: false,
         // 遮罩层
@@ -405,6 +410,7 @@
         noteParams: {
           pageNum: 1,
           pageSize: 15,
+          noteId: undefined,
           userId: undefined,
           title: undefined,
           description: undefined,
@@ -419,7 +425,8 @@
           topFlag: undefined,
           isShare: undefined,
           isEncryption: undefined,
-          createUserName: undefined
+          createUserName: undefined,
+          tiymceUeditor:undefined
         },
       }
     },
@@ -452,6 +459,7 @@
         // that.queryParams.menuId = 1;
       } else {
         that.queryParams.menuId = routedata;
+        that.noteParams.menuId = routedata;
       }
 
       //搜索值
@@ -477,14 +485,10 @@
 
     },
     mounted() {
-      this.newBookmark();
+
     },
     methods: {
-      /**初始化 分类全部的意思**/
+
-      newBookmark() {
-        //默认选中 全部
-        document.getElementsByClassName("classification")[0].classList.add("classification-click");
-      },
 
       /**自动获取高度**/
       getHeight() {
@@ -503,7 +507,7 @@
         //判断是否加载了所有数据
         var i = that.queryParams.pageNum + 1;
         that.$set(that.queryParams, 'pageNum', i)
-        console.log("this.queryParams.pageNum:" + that.queryParams.pageNum)
+        // console.log("this.queryParams.pageNum:" + that.queryParams.pageNum)
         var listcount = Math.ceil(that.total / 15);
         console.log("该目录共有页数:" + listcount)
 
@@ -512,55 +516,45 @@
           that.noMore = true;
           that.listnoMore = true;
           that.listloading = false
-          console.log("禁止滚动了")
+          // console.log("禁止滚动了")
           return;
         } else {
 
           this.listloading = true
           setTimeout(() => {
-            selectBymenuIdUserID(this.queryParams).then(response => {
+            switch(this.property) {
-              if (response.rows.length != 0 && response.code == 200) {
+              case 0:
-                console.log("response.rows" + response.rows)
+                this. getListConcat();
-                this.bookmarkList = this.bookmarkList.concat(response.rows);
+                break;
-
+              case 1:
-                this.total = response.total;
+                this.getNoteList();
-                this.listloading = false
+                break;
-                console.log("请求完毕" + that.queryParams.pageNum)
+              default:
-              } else {
+            }
-                //出错了
-                //加载完毕了 禁止滚动
-                this.noMore = true;
-                this.listloading = false
-              }
-            });
           }, 1000);
         }
 
-        // if (this.queryParams.pageNum = listcount) {
-        //   //加载完毕了 禁止滚动
-        //   that.noMore = true;
-        //   that.listnoMore = true;
-        //   that.listloading = false
-        //   console.log("刚刚好2页 禁止滚动了")
-        // }
 
       },
 
       /**切换显示 全部 网页 文本 其他**/
       showopen(e) {
-        //1 是文本
+        var that=this;
-        if (e==1){
+        that.property=e;
-          this.getNoteList();
+        console.log("queryParams"+this.queryParams.pageNum);
-        }else if(e==0){
+        console.log("noteParams"+this.noteParams.pageNum);
-          this.getList();
-        }
-        document.getElementsByClassName("classification")[e].classList.add("classification-click");
-        for (var i = 0; i < 4; i++) {
-          if (i != e) {
-            document.getElementsByClassName("classification")[i].classList.remove('classification-click');
-          }
-        }
 
+        switch(e) {
+          case 0:
+            this.getList();
+            break;
+          case 1:
+            this.getNoteList();
+            break;
+          default:
+            this.bookmarkList=null;
+
+        }
 
       },
       /** 转换书签菜单数据结构 */
@@ -695,6 +689,7 @@
           createTime: undefined,
           sqTags: [],
           sort: undefined,
+
         };
         this.resetForm("form");
       },
@@ -730,7 +725,29 @@
       /**切换排序规则**/
       handleCommand(command) {
         this.queryParams.sort = command;
-        this.getList();
+        switch(this.property) {
+          case 0:
+            this.getList();
+            break;
+          case 1:
+            this.getNoteList();
+            break;
+          default:
+            this.getList();
+        }
+
+
+      },
+      /**添加遍签**/
+      addbooNote() {
+        addUserNote(this.noteParams).then(response => {
+          if (response.code === 200) {
+            this.msgSuccess("新增成功");
+            this.getNoteList();
+          }
+        });
+
+
       },
 
       /** 查询书签管理列表 */
@@ -750,6 +767,25 @@
           }
         });
       },
+      /**查询书签 滚动加载分页拼接*/
+      getListConcat(){
+        this.loading = true;
+        selectBymenuIdUserID(this.queryParams).then(response => {
+          if (response.total != 0 && response.code == 200) {
+            console.log("response.rows" + response.rows)
+            this.bookmarkList = this.bookmarkList.concat(response.rows);
+            this.total = response.total;
+            this.listloading = false
+            this.loading = false;
+            console.log("请求完毕" + that.queryParams.pageNum)
+          } else {
+            //出错了加载完毕了 禁止滚动
+            this.noMore = true;
+            this.listloading = false
+            this.loading = false;
+          }
+        });
+      },
 
       /** 查询便签管理列表 */
       getNoteList() {
@@ -760,14 +796,49 @@
             this.loading = false;
         });
       },
+      /**查询书签 滚动加载分页拼接*/
+      getNoteListConcat(){
+        this.loading = true;
+        selectBymenuNote(this.queryParams).then(response => {
+          if (response.total != 0 && response.code == 200) {
+            this.bookmarkList = this.bookmarkList.concat(response.rows);
+            this.total = response.total;
+            this.loading = false;
+            this.listloading = false
+
+          }else {
+            //出错了加载完毕了 禁止滚动
+            this.noMore = true;
+            this.listloading = false
+            this.loading = false;
+          }
+        });
+      },
+      // /**网站内打开*/
+      // windowurl(url,bookmarkId) {
+      //   var that=this;
+      //   //网站内打开
+      //   that.iframeLoading=true;
+      //   this.gourl=url;
+      //   setTimeout(function(){
+      //     that.iframeLoading=false;
+      //   },1000);
+      // },
       /**网站内打开*/
-      windowurl(url,bookmarkId) {
+      windowurl(noteId, tiymceueditor,bookmarkId,url) {
         var that=this;
-        that.iframeLoading=true;
+        console.log("noteId:"+noteId)
-        this.gourl=url;
+        console.log("tiymceueditor:"+tiymceueditor)
-        setTimeout(function(){
+
-          that.iframeLoading=false;
+
-        },1000);
+        that.$router.push({
+          path: "/NqEdit",
+          query: {
+            Ueditor: tiymceueditor,
+            noteId:noteId,
+            t:Date.now(),
+          }
+        })
       },
       /**新窗口打开*/
       windowurlOpen() {

ruoyi-ui/src/views/bookmark/common/NqEdit.vue

@@ -16,7 +16,7 @@
     <div>
     <tinymce
       ref="editor"
-      v-model="msg"
+      v-model="queryParams.UeditorContent"
       :disabled="disabled"
       @onClick="onClick"
     />
@@ -33,7 +33,9 @@
 </template>
 <script>
   import tinymce from '../../../components/TinyMCE'
-
+  import {
+    userUpdateNote,userGetNoteInfo
+  } from "@/api/note/note";
   const defaultForm = {
     status: 'draft',
     title: '', // 文章题目
@@ -57,17 +59,60 @@
       return{
         postForm: Object.assign({}, defaultForm),
         msg: "<span>请尽情创作吧!</span>",
-        disabled: false
+        disabled: false,
+        queryParams:{
+          noteId: undefined,
+          userId: undefined,
+          title: undefined,
+          description: undefined,
+          menuId: undefined,
+          background: undefined,
+          noteCount: undefined,
+          noteSort: undefined,
+          isState: undefined,
+          readProgress: undefined,
+          isStar: undefined,
+          isDelete: undefined,
+          topFlag: undefined,
+          isShare: undefined,
+          isEncryption: undefined,
+          createUserName: undefined,
+          tiymceUeditor:undefined,
+          UeditorContent:undefined,
+        },
       }
     },
+    created() {
+      var that = this;
+      var Ueditor = that.$route.query.Ueditor;
+      var noteId = that.$route.query.noteId;
+      this.queryParams.tiymceUeditor=Ueditor;
+      this.queryParams.noteId=noteId;
+
+      //查看对应的文章 信息和标题等等
+      this.getNoteList();
+
+    },
     methods: {
-      // 鼠标单击的事件
+      /** 实时更新文章的信息 */
+      UpdateNote(){
+        userUpdateNote(this.queryParams).then(response =>{
+            console.log("已保存:"+Date.now())
+        });
+      },
+      /** 查询便签管理列表 */
+      getNoteList() {
+        userGetNoteInfo(this.queryParams.noteId).then(response => {
+          this.queryParams = response.rows;
+        });
+      },
+      //鼠标单击的事件
       onClick (e, editor) {
         console.log('Element clicked')
         console.log(e)
         console.log(editor)
       },
-      // 清空内容
+      //清空内容
       clear () {
         this.$refs.editor.clear()
       }