微调/完善

src/components/Home/Header.vue

@@ -15,7 +15,8 @@
             <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
         </el-menu>
         <SearchInput class="HeaderInput"></SearchInput>
-        <el-button class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
+        <el-button v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
+        <el-button v-if="this.$route.path ==='/paper'" class="HeaderSubmitBtn" type="primary" round icon="el-icon-edit">发布文章</el-button>
     </div>
 </template>
 

src/components/Home/ProjectList.vue

@@ -4,7 +4,7 @@
             <img :src="projectLists.projectIco" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
         </div>
         <div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
-            <div class="ProjectTitle">
+            <div class="ProjectTitle" style="font-size: 16px;font-weight: bold;">
                 <span>{{projectLists.projectTitle}}</span>
             </div>
             <div class="summary">

src/components/Home/RandomProjects.vue

@@ -36,7 +36,6 @@ export default {
     },
     mounted() {
         this.getRandomProject();
-        console.log(this.randomProjectList);
     },
     methods:{
         getRandomProject(){

src/components/Home/RightTools.vue

@@ -0,0 +1,35 @@
+<template>
+    <div style="display: flex;margin-left: 20px;margin-top: 7vh;flex-direction: column">
+        <el-card class="box-card" style="width: 15vw;height: auto;border: none">
+            <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
+            <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
+            <UserInfo></UserInfo>
+        </el-card>
+        <RandomProjects style="margin-top: 20px"></RandomProjects>
+    </div>
+</template>
+
+<script>
+import UserInfo from "@/components/Home/UserInfo.vue";
+import LoginDialog from "@/components/Home/LoginDialog.vue";
+import RandomProjects from "@/components/Home/RandomProjects.vue";
+
+export default {
+    name: "RightTools",
+    components: {RandomProjects, LoginDialog, UserInfo},
+    data(){
+        return{
+            loginDialogVisible:false
+        }
+    },
+    methods:{
+        openLogin(){
+            this.loginDialogVisible=true;
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Paper/ArticleDetail.vue

@@ -22,7 +22,7 @@
                     <el-tiptap style="margin-top: 20px" v-model="ArticleContent" :readonly="true" :showMenubar="false" :extensions="extensions" />
             </div>
         </div>
-
+        <RightTools></RightTools>
     </div>
 </template>
 
@@ -41,9 +41,11 @@ import {
     Text,
     Underline
 } from "element-tiptap";
+import RightTools from "@/components/Home/RightTools.vue";
 
 export default {
     name: "ArticleDetail",
+    components: {RightTools},
     data(){
       return{
           extensions: [
@@ -62,6 +64,7 @@ export default {
           ArticleContent:null,
           ArticleTitle:null,
           articleico:'',
+          loginDialogVisible:false,
 
       }
     },

src/components/Paper/ArticleList.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="articleList" @click="goArticleDetail">
     <div style="display: flex;flex-direction: column;">
-        <div style="display: flex;justify-content: flex-start">
+        <div class="articleTitle" style="display: flex;justify-content: flex-start">
-            <span style="font-size: 16px;color: black;font-weight: bold">{{articleList.ArticleTitle}}</span>
+            <span  style="font-size: 16px;color: black;font-weight: bold">{{articleList.ArticleTitle}}</span>
         </div>
           <span v-text="brief" style="display: flex;justify-content:flex-start;text-align: left;margin-top: 10px;font-size: 13px;color: #9ca3af">
 
@@ -71,7 +71,10 @@ export default {
     cursor: pointer;
     overflow: hidden;
 }
-.articleList:hover{
+.articleList:hover {
     background-color: #eeeeee;
 }
+.articleTitle :hover{
+    color: #42b983;
+}
 </style>

src/components/Paper/Paper.vue

@@ -47,28 +47,19 @@
                 </el-tabs>
             </div>
         </div>
-        <div style="display: flex;margin-left: 20px;margin-top: 7vh;flex-direction: column">
+        <RightTools></RightTools>
-            <el-card class="box-card" style="width: 15vw;height: auto;border: none">
-                <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
-                <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
-                <UserInfo></UserInfo>
-            </el-card>
-            <RandomProjects style="margin-top: 20px"></RandomProjects>
-        </div>
     </div>
 </template>
 
 <script>
 import axios from "axios";
 import ArticleList from "@/components/Paper/ArticleList.vue";
-import UserInfo from "@/components/Home/UserInfo.vue";
+import RightTools from "@/components/Home/RightTools.vue";
-import LoginDialog from "@/components/Home/LoginDialog.vue";
-import RandomProjects from "@/components/Home/RandomProjects.vue";
 
 
 export default {
     name: "PaperComponent",
-    components: {RandomProjects, LoginDialog, UserInfo, ArticleList},
+    components: {RightTools, ArticleList},
     data(){
         return{
             avtiveName:'last',
@@ -91,9 +82,7 @@ export default {
     },
 
     methods: {
-        openLogin(){
+
-            this.loginDialogVisible=true;
-        },
         goBack() {
             window.history.go(-1);
         },

src/components/ProjectDetail.vue

@@ -140,7 +140,8 @@
                   <div class="text item">
                         <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
                             <div style="width: 50px;height: 50px">
-                                <el-avatar :size="50">{{this.$cookie.get('username')}}</el-avatar>
+                                <el-avatar v-if="this.$cookie.get('username')!=null" :size="50">{{this.$cookie.get('username')}}</el-avatar>
+                                <el-avatar v-if="this.$cookie.get('username')==null" :size="50">未登录</el-avatar>
                             </div>
                             <el-input
                                 style="margin-left: 10px"
@@ -169,7 +170,7 @@
 
                       </div>
                       <el-divider></el-divider>
-                      <div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
+                      <div v-if="isRouterAlive" style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
                           <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
                               <span style="font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
                               <el-button-group>
@@ -215,23 +216,13 @@
               </el-card>
           </div>
       </div>
-      <div style="display: flex;margin-left: 20px;margin-top: 7vh;flex-direction: column">
+      <RightTools></RightTools>
-          <el-card class="box-card" style="width: 15vw;height: auto;border: none">
-              <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
-              <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
-              <UserInfo></UserInfo>
-          </el-card>
-          <RandomProjects style="margin-top: 20px"></RandomProjects>
-      </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-import UserInfo from "@/components/Home/UserInfo.vue";
-import LoginDialog from "@/components/Home/LoginDialog.vue";
 import Vue from "vue";
-import RandomProjects from "@/components/Home/RandomProjects.vue";
 import {
     // 罗列出需要的功能按钮
     Doc,
@@ -246,10 +237,11 @@ import {
     BulletList,
     OrderedList,
 } from 'element-tiptap';
+import RightTools from "@/components/Home/RightTools.vue";
 
 export default {
     name: "ProjectDetail",
-    components: {RandomProjects, LoginDialog, UserInfo},
+    components: {RightTools},
     data(){
         return{
             starValue:null,
@@ -282,14 +274,15 @@ export default {
                 new Text(),
                 new Paragraph(),
                 new Heading({ level: 5 }), // 支持多级标题，设置为5级
-                new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
+                new Bold({ bubble: false }), // 在气泡菜单中渲染菜单按钮
-                new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
+                new Underline({ bubble: false, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
                 new Italic(),
                 new Strike(),
                 new ListItem(),
                 new BulletList(),
                 new OrderedList(),
             ],
+            isRouterAlive:true,
         }
     },
     mounted() {
@@ -333,8 +326,11 @@ export default {
 
             });
         },
-        openLogin(){
+        reload() {
-            this.loginDialogVisible=true;
+            this.isRouterAlive = false;
+            this.$nextTick(function () {
+                this.isRouterAlive = true;
+            });
         },
 
         getComment(){
@@ -354,33 +350,45 @@ export default {
         },
         publishComment(){
             var that=this;
-            axios({
+            if(this.$cookie.get('username')!=null){
-                method: 'post',
+                axios({
-                // 请求的地址
+                    method: 'post',
-                url: 'http://localhost:8082/helloGithub_war_exploded/comment',
+                    // 请求的地址
-                // URL 中的查询参数
+                    url: 'http://localhost:8082/helloGithub_war_exploded/comment',
-                params: {
+                    // URL 中的查询参数
-                    id:that.$route.query.id,
+                    params: {
-                    star:that.startValue,
+                        id:that.$route.query.id,
-                    content:that.textarea,
+                        star:that.startValue,
-                    isUsed: that.radio,
+                        content:that.textarea,
-                }
+                        isUsed: that.radio,
-            }).then(function (res) {
+                    }
-                if (res.data.code === 200) {
+                }).then(function (res) {
-                    Vue.prototype.$notify({
+                    if (res.data.code === 200) {
-                        title: '成功',
+                        Vue.prototype.$notify({
-                        message: ('i', {style: 'color: teal'}, res.data.msg),
+                            title: '成功',
-                        type: 'success',
+                            message: ('i', {style: 'color: teal'}, res.data.msg),
-                        offset: 50
+                            type: 'success',
-                    });
+                            offset: 50
-                } else {
+                        });
-                    Vue.prototype.$notify.error({
+                        that.getComment();
-                        title: '错误',
+                        that.reload();
-                        message: res.data.msg,
+                    } else {
-                        offset: 50
+                        Vue.prototype.$notify.error({
-                    });
+                            title: '错误',
-                }
+                            message: res.data.msg,
-            });
+                            offset: 50
+                        });
+                    }
+                });
+            }else{
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: "你还未登录！",
+                    offset: 50
+                });
+            }
+
+
         },
 
     }