博客功能点：发布和显示数量

src/components/blog.vue

@@ -8,11 +8,11 @@
       <div class="web-info">
         <div class="blog-info-box">
           <span>博客</span>
-          <span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
+          <span id="totalBlogNum" class="blog-info-num"></span>
         </div>
         <div class="blog-info-box">
           <span>分类</span>
-          <span class="blog-info-num">{{ sortInfo.length }}</span>
+          <span id="labelTotalNum"  class="blog-info-num"></span>
         </div>
         <div class="blog-info-box">
           <span>访问量</span>
@@ -31,7 +31,9 @@
 
     <!-- 编辑框 -->
     <div class="blog-editor" v-if="showEditor">
-      <textarea v-model="blogContent"></textarea>
+      <textarea class="blog-editor-title" v-model="blogContentTitle"  placeholder="请输入博客标题..."></textarea>
+
+      <textarea class="blog-editor-content" v-model="blogContent"  placeholder="请输入博客正文..."></textarea>
       <div class="editor-btns">
         <button class="cancel-btn" @click="cancelEdit">取消</button>
         <button class="publish-btn" @click="saveBlog">发布</button>
@@ -56,7 +58,10 @@ export default {
       showAdmireDialog: false,
       articleSearch: "",
       showEditor: false,
-      blogContent: ""
+      blogContent: "",
+      blogContentTitle:"",
+      articles: [] , // 存储文章列表
+      labelTotalNum: 0
     }
   },
   computed: {
@@ -70,6 +75,9 @@ export default {
   created() {
     this.getRecommendArticles();
     this.getAdmire();
+    this.getUserArticles(); // 调用获取用户文章列表的方法
+    this.getUserArticleLabelTotalNum();// 调用获取用户文章的标签种类数的方法
+    console.log('getUserArticleLabelTotalNum is called');
   },
   methods: {
     selectSort(sort) {
@@ -117,6 +125,38 @@ export default {
           });
         });
     },
+    getUserArticleLabelTotalNum() {
+      const id = this.$store.state.currentUser.id; // 获取当前用户的ID
+      this.$http.get(`/admin/article/getUserArticleLabelTotalNum?id=${id}`) // 发送GET请求，指定获取用户文章标签数量的接口地址，并传递当前用户的ID作为参数
+        .then(response => {
+          const labelNum = response; // 获取标签数量
+          document.getElementById("labelTotalNum").innerText = labelNum;
+          this.labelTotalNum = labelNum;
+          console.log(labelNum); // 在控制台打印标签数量
+          console.log("label日志！！");
+        })
+        .catch(error => {
+          console.error('请求错误:', error);
+        });
+    },
+    getUserArticles() {
+      const id = this.$store.state.currentUser.id; // 获取当前用户的ID
+      this.$http.get(`/admin/article/getArticleByUserId?id=${id}`) // 发送GET请求，指定获取用户文章列表的接口地址，并传递当前用户的ID作为参数
+        .then(response => {
+          if (!this.$common.isEmpty(response.data)) {
+            this.articles = response.data; // 将返回的文章列表赋值给articles数组
+            document.getElementById("totalBlogNum").innerText = this.articles.length
+            console.log(response.data)
+            this.getUserArticleLabelTotalNum()
+          }
+        })
+        .catch(error => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
+    },
     showTip() {
       this.$router.push({path: '/weiYan'});
     },
@@ -132,16 +172,21 @@ export default {
       // this.blogContent = "";
       // let blog = {content:this.blogContent};
       const articleVO = {
-        user_id:"sara",
-        article_content: this.blogContent ,// 获取博客内容
+        userId:this.$store.state.currentUser.id,
+        articleContent: this.blogContent ,// 获取博客内容
+        articleTitle:this.blogContentTitle,
         // 其他博客相关数据...
-        // sort_id:1,
+        sortId:1,
       };
+      console.log(this.$store.state.currentUser)
       console.log(articleVO)
       this.$http.post('/article/saveArticle', articleVO) // 发送POST请求，指定保存博客的接口地址
         .then(response => {
           // 请求成功处理逻辑
           console.log('博客保存成功！');
+          this.getUserArticles()
+          this.showEditor = false;
+          this.blogContent = "";
         })
         .catch(error => {
           // 请求失败处理逻辑
@@ -269,42 +314,60 @@ export default {
   margin: 0 auto;
   align-self: center;
   width: 80%;
-  height: 300px;
-  background-color: #ba94dc;
+  height: 400px;
+  background-color: #e7deef;
   border-radius: 20px;
   margin-top: 20px;
   padding: 10px;
+  border: #5a0bb9 1px solid;
+  box-sizing: border-box;
+}
+.blog-editor-title {
+  display: block;
+  margin: 0 auto;
+  width: 40%;
+  height: 60px;
+  background-color: #ffffff;
+  border-radius: 20px;
+  padding: 10px;
   box-sizing: border-box;
+  font-weight: bolder;
+  font-size: 23px;
+  text-align: center; /* 将文本居中对齐 */
 }
 
-.blog-editor textarea {
+.blog-editor-content {
+  display: block;
   margin: 0 auto;
   width: 100%;
-  height: 100%;
-  resize: none;
-  border: none;
-  outline: none;
+  height: 300px;
+  //resize: none;
+  //border: none;
+  //outline: none;
   border-radius: 20px;
-  font-size: 16px;
-  font-family: "Microsoft YaHei";
+  font-size: 30px;
+  font-weight: bold;
+  margin-top: 10px;
+  //font-family: "Microsoft YaHei";
 }
 
 .editor-btns {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
+  margin-top: 16px;
 }
 
 .cancel-btn,
 .publish-btn {
   width: 100px;
-  height: 30px;
+  height: 35px;
   color: #fff;
-  border-radius: 3px;
+  border-radius: 10px;
   cursor: pointer;
   transition: all .2s linear;
   font-size: 19px;
   font-weight: bold;
+  margin-top: 8px;
 }
 
 .cancel-btn {