博客功能点：修改博客、删除博客、以及标签的添加，和样式的美化

src/assets/css/color.css

@@ -19,7 +19,7 @@
 
 
     /* 主题背景 */
-    --themeBackground: orange;
+    --themeBackground: #f5df74;
     /* 主题悬停背景 */
     --gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
 
@@ -28,7 +28,7 @@
     /* 导航栏背景 */
     --toolbarBackground: rgba(255, 255, 255, 1);
     /* 灰色字体 */
-    --greyFont: #797979;
+    --greyFont: #4b4b4b;
     --maxGreyFont: #595A5A;
     /* footer背景 */
     --gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
@@ -51,7 +51,7 @@
     --maxMask: rgba(0, 0, 0, 0.7);
 
 
-    --white: white;
+    --white: #000000;
 
     --red: red;
     --lightRed: #ff4b2b;

src/components/blog.vue

@@ -30,20 +30,53 @@
     </button>
 
     <!-- 编辑框 -->
-    <div class="blog-editor" v-if="showEditor">
+    <div id="editorArea" class="blog-editor" v-if="showEditor">
-      <textarea class="blog-editor-title" v-model="blogContentTitle"  placeholder="请输入博客标题..."></textarea>
+      <textarea id ="areaTitle" class="blog-editor-title" v-model="blogContentTitle"  placeholder="请输入博客标题..."></textarea>
-
+      <div class="labelSelect">
-      <textarea class="blog-editor-content" v-model="blogContent"  placeholder="请输入博客正文..."></textarea>
+      <label for="category">选择博客分类：</label>
+        <select id="category" name="category" v-model="selectedCategoryIndex">
+          <option v-for="(label, index) in blogLabels" :value="index" :key="index">{{ label }}</option>
+        </select>
+      </div>
+      <textarea id = "areaContent" 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>
+        <button class="publish-btn" @click="saveBlog" v-if="showPublishBtn">发布</button>
+        <button @click="updateBlog" class="publish-btn"  v-if="showUpdateBtn">更新</button>
+      </div>
+    </div>
+    <br/><br/>
+    <!-- 推荐博客 -->
+    <!-- 推荐博客 -->
+    <div v-if="!$common.isEmpty(articles)" class="blog-card-container">
+      <div v-for="(article, index) in articles.slice().reverse()" :key="index" class="blog-card">
+        <div class="blog-card-header">
+          <div class="author">{{ article.username }}</div>
+          <div class="title" @click="$router.push({path: '/article', query: {id: article.id}})">{{ article.articleTitle }}</div>
+        </div>
+        <div class="blog-card-content" @click="$router.push({path: '/article', query: {id: article.id}})">
+          {{ article.articleContent }}
+        </div>
+        <div class="blog-card-footer">
+          <div class="label">{{ article.labelName }}</div>
+          <div class="date"><i class="el-icon-date" style="color: var(--greyFont)"></i>{{ article.createTime }}</div>
+          <div class="actions">
+            <div class="delete-icon" @click="deleteArticle(article)">
+              <img src="../assets/file/delete.jpg" alt="Delete Icon" width="26px" height="26px">
+            </div>
+            <div class="update-icon" @click="updateArticle(article)">
+              <img src="../assets/file/update.jpg" alt="Update Icon" width="30px" height="30px">
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+
 </template>
 
 <script>
-
+import axios from "axios";
 export default {
   // 组件的逻辑和配置
   data() {
@@ -58,10 +91,25 @@ export default {
       showAdmireDialog: false,
       articleSearch: "",
       showEditor: false,
+      showUpdateBtn: false,
+      showPublishBtn: true,
       blogContent: "",
       blogContentTitle:"",
+      blogLabelName: "",
       articles: [] , // 存储文章列表
-      labelTotalNum: 0
+      labelTotalNum: 0,
+      articleUp: {
+        id: 1,
+        articleTitle: "",
+        articleContent: "",
+        userId: 1,
+        username: "",
+        sortId: 1,
+        labelId: 0,
+        labelName: "研发"
+      },
+      blogLabels:[],
+      selectedCategoryIndex: 0, // 默认选中第一个选项
     }
   },
   computed: {
@@ -77,7 +125,9 @@ export default {
     this.getAdmire();
     this.getUserArticles(); // 调用获取用户文章列表的方法
     this.getUserArticleLabelTotalNum();// 调用获取用户文章的标签种类数的方法
+    this.getBlogLabels();//调用获取标签分类的方法
     console.log('getUserArticleLabelTotalNum is called');
+
   },
   methods: {
     selectSort(sort) {
@@ -144,10 +194,16 @@ export default {
       this.$http.get(`/admin/article/getArticleByUserId?id=${id}`) // 发送GET请求，指定获取用户文章列表的接口地址，并传递当前用户的ID作为参数
         .then(response => {
           if (!this.$common.isEmpty(response.data)) {
-            this.articles = response.data; // 将返回的文章列表赋值给articles数组
+            this.articles = response.data;
-            document.getElementById("totalBlogNum").innerText = this.articles.length
+            const currentUser = this.$store.state.currentUser; // 获取当前用户信息
-            console.log(response.data)
+            this.articles.forEach(article => {
-            this.getUserArticleLabelTotalNum()
+              article.username = currentUser.username;
+              article.labelName = this.blogLabels[article.labelId-1];
+              console.log(article.labelId+"haha")
+            });
+            document.getElementById("totalBlogNum").innerText = this.articles.length;
+            console.log(response.data);
+            this.getUserArticleLabelTotalNum();
           }
         })
         .catch(error => {
@@ -164,22 +220,22 @@ export default {
       // 取消编辑
       this.showEditor = false;
       this.blogContent = "";
+      this.blogContentTitle = "";
     },
     saveBlog() {
-      // 发布博客
+      let selectedIndex = this.selectedCategoryIndex+1;
-      // console.log(this.blogContent);
+      console.log('选中的分类索引号为：' + selectedIndex);
-      // this.showEditor = false;
-      // this.blogContent = "";
-      // let blog = {content:this.blogContent};
       const articleVO = {
         userId:this.$store.state.currentUser.id,
         articleContent: this.blogContent ,// 获取博客内容
         articleTitle:this.blogContentTitle,
         // 其他博客相关数据...
         sortId:1,
+        labelId:selectedIndex
       };
       console.log(this.$store.state.currentUser)
-      console.log(articleVO)
+      console.log(this.$store.state.currentUser)
+      // console.log("index:"+document.getElementById('category').select)
       this.$http.post('/article/saveArticle', articleVO) // 发送POST请求，指定保存博客的接口地址
         .then(response => {
           // 请求成功处理逻辑
@@ -193,7 +249,90 @@ export default {
           console.error('博客保存失败：', error);
         });
 
+    },
+    deleteArticle(article){
+      // 发送异步请求删除文章
+      this.$http.get(`/article/deleteArticle?id=${article.id}`)
+        // .then(response => response.json())
+        .then(response => {
+          // 请求成功处理逻辑
+          console.log('博客删除成功！');
+          console.log(response)
+          this.getUserArticles()
+          this.getUserArticleLabelTotalNum()
+        })
+        .catch(error => {
+          // 请求失败处理逻辑
+          console.error('删除博客失败：', error);
+        });
+
+    },
+    updateArticle(article) {
+      this.showEditor = true;
+      this.showUpdateBtn = true;
+      this.showPublishBtn = false;
+      this.blogContentTitle = article.articleTitle;
+      this.blogContent = article.articleContent;
+      this.selectedCategoryIndex = article.labelId - 1; // 设置下拉框选中的索引值
+      this.articleUp.id = article.id;
+      this.blogLabelName
+      document.getElementById('editorArea').scrollIntoView({ behavior: "smooth", block: "start" });
+    },
+
+
+    updateBlog(){
+      this.blogContentTitle = document.getElementById('areaTitle').value
+      this.blogContent = document.getElementById('areaContent').value
+      document.getElementById('category').
+      this.articleUp.articleContent = document.getElementById('areaContent').value
+      this.articleUp.articleTitle = document.getElementById('areaTitle').value
+      this.articleUp.username = this.$store.state.currentUser.username
+      this.articleUp.labelId = this.selectedCategoryIndex+1
+
+      //发送异步请求更新文章
+      this.$http.post('/article/updateArticle', this.articleUp)
+        .then(response => {
+          // 请求成功处理逻辑
+          console.log('博客更新成功！');
+          this.showEditor = false;
+          console.log(response)
+          this.getUserArticles()
+          this.getUserArticleLabelTotalNum()
+          alert("更新成功")
+          this.showPublishBtn = true;
+          this.showUpdateBtn = false;
+          this.blogContent = "";
+          this.blogContentTitle = "";
+        })
+        .catch(error => {
+          // 请求失败处理逻辑
+          console.error('更新博客失败：', error);
+          this.showPublishBtn = true;
+          this.showUpdateBtn = false;
+          this.blogContent = "";
+          this.blogContentTitle = "";
+        });
+    },
+    getBlogLabels() {
+      const url = "/webInfo/listLabel";
+      console.log("gettingLabels");
+      // 发送GET请求
+      axios.get(url)
+        .then(response => {
+          console.log(response.data.data)
+          const labels = response.data.data;
+          this.blogLabels = Object.values(labels).map(label => label.labelName);
+
+          // 将标签数据赋值给blogLabels数组
+          // this.blogLabels = labels;
+        })
+        .catch(error => {
+          // 请求失败，处理错误
+          console.error(error);
+        });
     }
+
+
   }
 }
 </script>
@@ -314,7 +453,7 @@ export default {
   margin: 0 auto;
   align-self: center;
   width: 80%;
-  height: 400px;
+  height: 598px;
   background-color: #e7deef;
   border-radius: 20px;
   margin-top: 20px;
@@ -334,21 +473,22 @@ export default {
   font-weight: bolder;
   font-size: 23px;
   text-align: center; /* 将文本居中对齐 */
+  font-family: "Microsoft YaHei";
 }
 
 .blog-editor-content {
   display: block;
   margin: 0 auto;
   width: 100%;
-  height: 300px;
+  height: 386px;
-  //resize: none;
+//resize: none;
-  //border: none;
+//border: none;
-  //outline: none;
+//outline: none;
   border-radius: 20px;
   font-size: 30px;
   font-weight: bold;
   margin-top: 10px;
-  //font-family: "Microsoft YaHei";
+//font-family: "Microsoft YaHei";
 }
 
 .editor-btns {
@@ -367,7 +507,7 @@ export default {
   transition: all .2s linear;
   font-size: 19px;
   font-weight: bold;
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 .cancel-btn {
@@ -384,4 +524,322 @@ export default {
 .publish-btn:hover {
   transform: translateY(-2px);
 }
+.card-content1 {
+  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
+  background-size: 400% 400%;
+  animation: gradientBG 10s ease infinite;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  position: relative;
+  /*color: var(--white);*/
+  overflow: hidden;
+}
+
+.card-content1 :not(:first-child) {
+  z-index: 10;
+}
+
+.web-name {
+  font-size: 30px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.web-info {
+  width: 80%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.blog-info-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.blog-info-num {
+  margin-top: 12px;
+}
+
+.collection-btn {
+  position: relative;
+  margin-top: 12px;
+  background: var(--lightGreen);
+  cursor: pointer;
+  width: 65%;
+  height: 35px;
+  border-radius: 1rem;
+  text-align: center;
+  line-height: 35px;
+  color: var(--white);
+  overflow: hidden;
+  z-index: 1;
+  margin-bottom: 25px;
+}
+
+.collection-btn::before {
+  background: var(--gradualRed);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  transform: scaleX(0);
+  transform-origin: 0;
+  transition: transform 0.5s ease-out;
+  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
+  border-radius: 1rem;
+  z-index: -1;
+}
+
+.collection-btn:hover::before {
+  transform: scaleX(1);
+}
+
+.card-content2-title {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.card-content2-icon {
+  color: var(--red);
+  margin-right: 5px;
+  animation: scale 1s ease-in-out infinite;
+}
+
+.aside-post-detail {
+  display: flex;
+  cursor: pointer;
+  width: 70%;
+  //background-color: #1a252f;
+}
+
+.aside-post-image {
+  width: 200px;
+  border-radius: 0.2rem;
+  margin-right: 8px;
+  overflow: hidden;
+  font-size: 30px;
+}
+
+.error-aside-image {
+  display: inline-block;
+  background: var(--themeBackground);
+  color: var(--white);
+  padding: 10px;
+  text-align: center;
+  width: 100px;
+  height: 100%;
+  //background-color: #1abc9c;
+}
+
+.aside-post-title {
+  display: inline-block;
+  width: 360px;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background-color: rgb(236, 231, 153);
+  line-height: 30px; /* 假设容器高度为 30px */
+  text-indent: -15px; /* 负的半个 line-height */
+  padding-top: 3px;
+  border-radius: 5px;
+  font-size: 30px;
+}
+.aside-post-content {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background-color: rgb(193, 236, 153);
+  line-height: 30px; /* 假设容器高度为 30px */
+  text-indent: -15px; /* 负的半个 line-height */
+  padding-top: 3px;
+  border-radius: 5px;
+  margin-left: 10px;
+  font-size: 20px;
+}
+.error-aside-image:hover,
+.aside-post-title:hover,
+.aside-post-content:hover,
+.aside-post-label  {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+.aside-post-label {
+  width: 300px;
+  display: inline-block;
+
+  background-color: #ffffff;
+  margin-top: 8px;
+  margin-bottom: 20px;
+  margin-left: 10px;
+  color: var(--greyFont);
+  font-size: 23px;
+  text-align: center;
+  background-color: #eebcf1;
+}
+.aside-post-date {
+  margin-top: 8px;
+  margin-bottom: 20px;
+  color: var(--greyFont);
+  font-size: 23px;
+}
+
+.recommend-aside-header-author {
+  display: inline-block;
+  text-align: center;
+  width: 100px;
+  font-size: 30px;
+  margin-right: 20px;
+  background-color: #c5fcf1;
+  margin-bottom: 10px;
+}
+.recommend-aside-header-title {
+  display: inline-block;
+  text-align: center;
+  width: 200px;
+  font-size: 30px;
+  background-color: #f5dedf;
+  margin-bottom: 10px;
+}
+.recommend-aside-header-content {
+  margin-left: 20px;
+  display: inline-block;
+  font-size: 30px;
+  text-align: center;
+  width: 609px;
+  background-color: #e1f7f8;
+  margin-bottom: 10px;
+}
+.recommend-aside-header-label {
+  margin-left: 42px;
+  display: inline-block;
+  font-size: 30px;
+  text-align: center;
+  width: 160px;
+  background-color: #e1f7f8;
+  margin-bottom: 10px;
+}
+.delete-icon {
+  //background-image: url(../assets/file/delete.jpg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 26px; /* 图标的宽度 */
+  height: 26px; /* 图标的高度 */
+  cursor: pointer;
+  margin-top: 4px;
+  margin-left: 3px;
+}
+.update-icon {
+//background-image: url(../assets/file/delete.jpg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 29px; /* 图标的宽度 */
+  height: 26px; /* 图标的高度 */
+  cursor: pointer;
+  margin-top: 4px;
+  margin-left: 6px;
+}
+.labelSelect {
+  //margin: 30px;
+  padding: 4px;
+  //background-color: rgba(215, 188, 248, 0.64);
+  margin: 0 auto;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+  font-size: 23px;
+}
+select {
+  font-size: 20px; /* 修改select框的字体大小 */
+  padding: 8px; /* 添加一些内边距 */
+  border-radius: 10px; /* 圆角边框 */
+  border: 2px solid #ccc; /* 边框样式 */
+  background-color: #f5f5f5; /* 背景颜色 */
+}
+
+option {
+  font-size: 18px; /* 修改选项的字体大小 */
+  color: #333; /* 修改选项的字体颜色 */
+}
+.blog-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.blog-card {
+  width: 30%; /* 控制每个卡片的宽度 */
+  margin-bottom: 20px;
+  background-color: #fff; /* 卡片背景色 */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 卡片阴影效果 */
+  border-radius: 10px; /* 圆角边框 */
+  padding: 20px; /* 内边距 */
+}
+
+.blog-card:hover {
+  transform: translateY(-5px); /* 鼠标悬停时微微抬起 */
+}
+
+.blog-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.author {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.title {
+  font-size: 24px;
+  cursor: pointer;
+  color: #333; /* 标题颜色 */
+}
+
+.blog-card-content {
+  font-size: 18px;
+  line-height: 1.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* 控制正文行数 */
+  -webkit-box-orient: vertical;
+}
+
+.blog-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #666; /* 页脚文字颜色 */
+}
+
+.label,
+.date {
+  margin-right: 10px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+}
+
+.delete-icon,
+.update-icon {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
 </style>