feat(/comment-management): 新增评论管理和文章管理分页

src/apis/articleManagement.js

@@ -4,9 +4,9 @@ export const getAllArticleInfo = vm =>{
         method:'get'
     }).then(res => {
         let color = ['error','primary','success','yellow','orange'];
+        vm.length = res.data.articleInfo.length;
         res.data.articleInfo.forEach((element, index) => {
-            vm.articles.push(element);
-            // console.log(element);
+            // vm.articles.push(element);
             if(element.tag){
                 vm.tags.push({tagName:element.tag,tagColor:color[index%5]});
             }
@@ -15,7 +15,24 @@ export const getAllArticleInfo = vm =>{
     }).catch(error => {
         console.log("error", error);
     })
+}   
 
+export const getSplitArticleInfo = vm =>{
+    vm.$axios.request({
+        url:'/article/getSplitArticleInfo',
+        method:'get',
+        params:{
+            pageSize: vm.pageSize,
+            current: vm.current
+        }
+    }).then(res => {
+        vm.articles.splice(0);
+        res.data.articleInfo.forEach(element => {
+            vm.articles.push(element);
+        })
+    }).catch(error =>{
+        console.log('error',error);
+    })
 }
 
 export const updateArticleList = (vm, tag) =>{

src/apis/commentManagement.js

+
+import Cookie from 'js-cookie';
+
+// 提交评论
+export  const submitCommentContent = vm =>{
+    if(! Cookie.get('userName')){
+        vm.$Notice.warning({
+            title:'警告',
+            desc:'登录后评论',
+            duration: 5
+        });
+        vm.commentContent = '';
+        return;
+    }
+
+    let data = {
+        articleName: vm.title,
+        commentContent:vm.commentContent,
+        userName:Cookie.get('userName')
+    }
+
+    vm.$axios.request({
+        url:'/comment/addComment',
+        data,
+        method:'post'
+    }).then(res => {
+        vm.$Message.success(res.data.msg);
+        vm.commentContent = '';
+        getAllCommentsOfArticle(vm);
+    }).catch(error => {
+        console.log('error', error);
+    })
+
+}
+
+// 获得这篇文章所有的评论
+export const getAllCommentsOfArticle = vm =>{
+    vm.$axios.request({
+        url:'/comment/getAllCommentsOfArticle',
+        method:'get',
+        params:{
+            articleName:vm.title
+        }
+    }).then(res => {
+        vm.commentsList = res.data.commentsList;
+    }).catch(error => {
+        console.log('error', error);
+    })
+}
+
+// 获得这个人所有评论
+export const getAllCommentsOfUser = vm =>{
+    vm.$axios.request({
+        url:'/comment/getAllCommentsOfUser',
+        method:'get',
+        params:{
+            userName:Cookie.get('userName')
+        }
+    }).then(res => {
+        vm.commentsList = res.data.commentsList;
+    }).catch(error => {
+        console.log('error', error);
+    })
+}
+
+
+export const deleteComment = (vm, name) => {
+    vm.$axios.request({
+        url:'/comment/deleteComments',
+        method:'delete',
+       data:{
+           name
+       }
+    }).then(res => {
+        vm.$Message.success(res.data.msg);
+        getAllCommentsOfUser(vm);
+    }).catch(error => {
+        console.log('error', error);
+    })
+}

src/apis/login.js

@@ -22,6 +22,8 @@ export const login = (vm, name) =>{
             if(vm.formData.user === 'BeMount'){
                 vm.updateMenuList();
                 // vm.$store.commit('updateMenuList');
+            }else{
+                vm.updateUserMenuList();
             }
             console.log('Cookie', Cookie.get('userName'))
             vm.$refs[name].resetFields();

src/router/router.js

@@ -21,6 +21,7 @@ export const appRouters = [
      name:'commentManagement',
      title:'评论管理',
      icon:'md-hand',
+     access:2,
      component:Home,
      children:[
         {

src/store/modules/app.js

@@ -25,7 +25,16 @@ const app = {
         updateMenuList(state){
             state.menuList = state.routers;
             console.log(state.menuList);
-        }
+        },
+        //给文章评论管理的权限
+        updateUserMenuList(state){
+            state.routers.forEach(element => {
+                if(element.access == 2){
+                    state.menuList.push(element);
+                }
+            })
+        } 
+
     },
     actions:{
 

src/util/util.js

@@ -5,5 +5,7 @@ const OWNER_NAME = 'BeMount'
 export const baseUserNameChangeMenuList = (vm) =>{
     if(Cookie.get('userName') === OWNER_NAME){
         vm.$store.commit('updateMenuList');
+    }else{
+        vm.$store.commit('updateUserMenuList');
     }
 }
\ No newline at end of file

src/views/Home.vue

@@ -119,7 +119,7 @@ export default {
                     }
               })
     },
-    ...mapMutations(['updateMenuList']
+    ...mapMutations(['updateMenuList','updateUserMenuList']
     ),
    
     // 点击登录注册

src/views/article-detail/articleDetail.less

 .editor{
     width:100%;
     .margin-top-20{
-        margin-top:40px;
+        margin-top:10px;
         .v-note-wrapper{
-            height:80vh;
+            height:60vh;
         }
     }
 }
\ No newline at end of file

src/views/article-detail/articleDetail.vue

@@ -2,7 +2,6 @@
     <div class="editor">
         <div>
             <span style="font-size:26px">
-                <!-- <Icon type="md-arrow-round-back"  /> -->
                 <Icon type="ios-arrow-dropleft" size='26' style="margin-right:5px;color:rgb(73, 167, 231)" @click="goBack"/>
                 返回</span>
         </div>
@@ -11,21 +10,51 @@
                  <mavon-editor v-model="content" :toolbarsFlag = 'false'  :ishljs='true' :subfield = 'false' defaultOpen = "preview"></mavon-editor>
             </Col>
         </Row>
+        <div>
+            <span style="font-size:26px">
+                <Icon type="md-clipboard"  style="margin-right:5px;color:rgb(73, 167, 231)"/>
+                评论</span>
+                <div style="margin-bottom:10px">
+                    <Input type="textarea"  v-model="commentContent" :row = '4' :maxlength="200" @on-blur="submitComment" placeholder="请文明用语,不喜勿喷"></Input>
+                </div>
+                <Collapse v-model="defaultShowContent" style="margin-bottom:10px" v-for = "(comment, index) in commentsList" :key='index'>
+                    <Panel :name="'index'">
+                    {{comment.userName}}
+                        <p slot="content">{{comment.commentContent}}</p>
+                    </Panel>
+               </Collapse>
+        </div>
     </div>
     
 </template>
 
 <script>
+import * as commentRequest from '@/apis/commentManagement.js';
+
 export default{
     data(){
         return {
-            content:'文章详情'
+            content:'文章详情',
+            title:'',
+            commentContent:'',
+            commentsList: [],
+            defaultShowContent:'0'
         }
     },
     methods:{
+        // 返回
       goBack(){
           this.$router.go(-1);
-      }  
+      },
+        //提交内容
+      submitComment(){
+          if(!this.commentContent){
+              this.$Message.warning('提交评论不能为空');
+              this.commentContent = '';
+          }else{
+              commentRequest.submitCommentContent(this);
+          } 
+      }
     },
     // computed:{
     //     content(){
@@ -33,8 +62,20 @@ export default{
     //     }
     // },
     created(){
-        this.content = this.$route.params.content;
-        console.log(this.$route);
+        // 
+       if( this.$route.params.title ){
+           localStorage.setItem('content', this.$route.params.content);
+           localStorage.setItem('title', this.$route.params.title);
+       }
+        // console.log("route", this.$route.params);
+        this.content = localStorage.getItem('content');
+        this.title = localStorage.getItem('title');
+    
+        commentRequest.getAllCommentsOfArticle(this);
+    },
+    destroyed(){
+        localStorage.removeItem('content');
+        localStorage.removeItem('title');
     }
 }
 

src/views/article-management/articleManagement.vue

@@ -20,13 +20,14 @@
             <div class="article-management-style-detail" >
                 <span >
                     <Icon type="ios-folder-outline" style="margin-right:5px" size="26px"/>
-                     <a href="javascript:void(0)" @click="findArticleDetail(item.content)">查看全文</a> 
+                     <a href="javascript:void(0)" @click="findArticleDetail(item.content,item.title)">查看全文</a> 
                 </span>
             </div>
 
         </div>
     </div>
-    <BackTop :height='50'></BackTop>
+    <BackTop></BackTop>
+    <Page :total = 'length'  @on-change = "getArticles" :current = 'current' :page-size='pageSize'></Page>   
 
 </div>
     
@@ -39,17 +40,26 @@ export default {
     data(){
         return {
            articles:[],
-           tags:[]
+           tags:[],
+        //    articlesAll:[],
+           length:0,
+           pageSize: 3,
+           current: 1
         }
     },
     created(){
-        articleManagementRequest.getAllArticleInfo(this);        
+        articleManagementRequest.getAllArticleInfo(this); 
+        articleManagementRequest.getSplitArticleInfo(this);
     },
     methods:{
-        findArticleDetail(content){
-            this.$router.push({name:'articleDetailIndex',params:{content:content}});
+        findArticleDetail(content, title){
+            this.$router.push({name:'articleDetailIndex',params:{content: content,title: title}});
             // console.log(content);
         },
+        getArticles(page){
+            this.current = page;
+            articleManagementRequest.getSplitArticleInfo(this);
+        },
         updateArticleList(tag){
             // console.log(tag);
             articleManagementRequest.updateArticleList(this, tag);

src/views/comment-management/comment-management.vue

 <template>
     <div>
-        评论管理
+        <p>我的评论</p>
+        <Collapse  accordion v-for="(item, index) in commentsList" :key='index'>
+            <Panel >
+                <span>{{item.articleName}}</span>
+                <p slot="content">{{item.commentContent}}</p>
+            </Panel>
+            <Button type="error" @click="deleteComment(item.articleName)">删除</Button>
+        </Collapse>
     </div>
 </template>
 
 <script>
+import * as  commentRequest from '@/apis/commentManagement.js'
+
 export default {
+    data(){
+        return {
+            commentsList :[],
+            defaultOpenShow:'1'
+        }
+    },
+    methods:{
+        deleteComment(name){
+            commentRequest.deleteComment(this, name);
+        }
+    },
+    created(){
+        commentRequest.getAllCommentsOfUser(this);       
+    }
     
 }
 </script>