Merge remote-tracking branch 'origin/master'

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@achrinza/node-ipc": "^10.1.10",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "crypto-js": "^4.1.1",

src/components/blog.vue

@@ -0,0 +1,926 @@
+<template>
+  <div class="outside">
+    <!-- 组件的内容 -->
+    <!-- 网站信息 -->
+    <div class="card-content1 shadow-box background-opacity">
+      <el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>
+      <div class="web-name">{{webInfo.webName}}</div>
+      <div class="web-info">
+        <div class="blog-info-box">
+          <span>博客</span>
+          <span id="totalBlogNum" class="blog-info-num"></span>
+        </div>
+        <div class="blog-info-box">
+          <span>分类</span>
+          <span id="labelTotalNum"  class="blog-info-num"></span>
+        </div>
+        <div class="blog-info-box">
+          <span>访问量</span>
+          <span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
+        </div>
+      </div>
+      <a class="collection-btn" @click="showTip()">
+        <i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
+      </a>
+    </div>
+
+    <!-- 写博客按钮 -->
+    <button class="write-blog-btn" @click="showEditor = true">
+      ✍️ 写博客
+    </button>
+
+    <!-- 编辑框 -->
+    <div id="editorArea" class="blog-editor" v-if="showEditor">
+      <textarea id ="areaTitle" class="blog-editor-title" v-model="blogContentTitle"  placeholder="请输入博客标题..."></textarea>
+      <div class="labelSelect">
+      <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>
+      <span style="font-size: larger">上传封面：</span><input type="file" @change="handleFileChange()" ref="fileInput" class="pictureUpload"/>
+      <div class="editor-btns">
+        <button class="cancel-btn" @click="cancelEdit">取消</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 class="card-content2-title">
+      <i class="el-icon-reading card-content2-icon"></i>
+      <span style="font-size: 28px">我的博客</span>
+    </div>
+    <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" >{{ article.articleTitle }}</div>
+        </div>
+        <div class="blog-card-content" >
+          {{ 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>
+          <br/>
+          <div class="date">最近更新于 {{ article.updateTime }}</div>
+          <div class="actions">
+            <div class="delete-icon" @click="deleteArticle(article)">
+              <img src="../assets/file/delete.png" alt="Delete Icon" width="26px" height="26px">
+            </div>
+            <div class="update-icon" @click="updateArticle(article)">
+              <img src="../assets/file/update.png" alt="Update Icon" width="30px" height="30px">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import axios from "axios";
+import * as events from "events";
+export default {
+  // 组件的逻辑和配置
+  data() {
+    return {
+      pagination: {
+        current: 1,
+        size: 5,
+        recommendStatus: true
+      },
+      recommendArticles: [],
+      admires: [],
+      showAdmireDialog: false,
+      articleSearch: "",
+      showEditor: false,
+      showUpdateBtn: false,
+      showPublishBtn: true,
+      blogContent: "",
+      blogContentTitle:"",
+      blogLabelName: "",
+      articles: [] , // 存储文章列表
+      labelTotalNum: 0,
+      articleCover: "",
+      articleUp: {
+        id: 1,
+        articleTitle: "",
+        articleContent: "",
+        userId: 1,
+        username: "",
+        sortId: 1,
+        labelId: 0,
+        labelName: "研发"
+      },
+      file:"",
+      blogLabels:[],
+      selectedCategoryIndex: 0, // 默认选中第一个选项
+    }
+  },
+  computed: {
+    events() {
+      return events
+    },
+    webInfo() {
+      return this.$store.state.webInfo;
+    },
+    sortInfo() {
+      return this.$store.state.sortInfo;
+    }
+  },
+  created() {
+    this.getRecommendArticles();
+    this.getAdmire();
+    this.getUserArticles(); // 调用获取用户文章列表的方法
+    this.getUserArticleLabelTotalNum();// 调用获取用户文章的标签种类数的方法
+    this.getBlogLabels();//调用获取标签分类的方法
+    console.log('getUserArticleLabelTotalNum is called');
+
+  },
+  methods: {
+    selectSort(sort) {
+      this.$emit("selectSort", sort);
+    },
+    selectArticle() {
+      this.$emit("selectArticle", this.articleSearch);
+    },
+    showAdmire() {
+      if (this.$common.isEmpty(this.$store.state.currentUser)) {
+        this.$message({
+          message: "请先登录！",
+          type: "error"
+        });
+        return;
+      }
+
+      this.showAdmireDialog = true;
+    },
+    getAdmire() {
+      this.$http.get(this.$constant.baseURL + "/webInfo/getAdmire")
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.admires = res.data;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
+    },
+    getRecommendArticles() {
+      this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.recommendArticles = res.data.records;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
+    },
+    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;
+            const currentUser = this.$store.state.currentUser; // 获取当前用户信息
+            this.articles.forEach(article => {
+              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 => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
+    },
+    showTip() {
+      this.$router.push({path: '/weiYan'});
+    },
+    cancelEdit() {
+      // 取消编辑
+      this.showEditor = false;
+      this.showUpdateBtn = false;
+      this.showPublishBtn = true;
+      this.blogContent = "";
+      this.blogContentTitle = "";
+    },
+    saveBlog() {
+      let selectedIndex = this.selectedCategoryIndex+1;
+      console.log('选中的分类索引号为：' + selectedIndex);
+      const articleVO = {
+        userId:this.$store.state.currentUser.id,
+        articleContent: this.blogContent ,// 获取博客内容
+        articleTitle:this.blogContentTitle,
+        // 其他博客相关数据...
+        sortId:1,
+        labelId:selectedIndex,
+        // articleCover:
+      };
+      console.log(this.$store.state.currentUser)
+      console.log(this.$store.state.currentUser)
+      // console.log("index:"+document.getElementById('category').select)
+      this.$http.post('/article/saveArticle', articleVO)
+        .then(response => {
+          // 请求成功处理逻辑
+          console.log('博客保存成功！');
+          this.getUserArticles();
+          this.showEditor = false;
+          this.blogContent = "";
+          this.blogContentTitle = "";
+          this.$message({
+            message: '发布成功',
+            type: 'success'
+          });
+        })
+        .catch(error => {
+          // 请求失败处理逻辑
+          console.error('博客保存失败：', error);
+          this.$message({
+            message: '发布失败',
+            type: '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
+      // 判断是否找到了 #editorArea 元素
+      const editorArea = document.getElementById('editorArea');
+      if (editorArea) {
+        editorArea.scrollIntoView({ behavior: "smooth", block: "start" });
+      } else {
+        console.log("#editorArea not found");
+      }
+
+    },
+
+
+    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('博客更新成功！');
+
+          console.log(response)
+          this.getUserArticles()
+          this.getUserArticleLabelTotalNum()
+          this.$message({
+            message: '更新成功',
+            type: 'success'
+          });
+          this.showEditor = false;
+          this.showPublishBtn = true;
+          this.showUpdateBtn = false;
+          this.blogContent = "";
+          this.blogContentTitle = "";
+        })
+        .catch(error => {
+          // 请求失败处理逻辑
+          console.error('更新博客失败：', error);
+          this.$message({
+            message: '更新失败',
+            type: '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);
+        });
+    },
+    handleFileChange() {
+      let file0 = this.$refs.fileInput.files[0];
+      this.file = file0;
+      console.log('上传的文件:', file0);
+
+      // 这里可以进行进一步的处理，比如上传文件到服务器等操作
+    }
+  }
+}
+</script>
+
+<style scoped>
+.outside{
+  background: linear-gradient(-45deg, #e8d8b9, #fae1d9, #a3e9eb, #bdbdf0, #eec1ea);
+}
+/* 组件的样式 */
+.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;
+  font-size: 24px;
+}
+
+.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);
+}
+
+.write-blog-btn {
+  position: absolute;
+  left: 470px;
+  top: 197px;
+  width: 160px;
+  height: 63px;
+  background-color: var(--gradualRed);
+  color: #181313;
+  border-radius: 20px;
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all .2s ease-in-out;
+  border: 2px solid #1675b4; /* 添加边框 */
+}
+.write-blog-btn:hover {
+  transform: scale(1.1);
+  border: 2px solid #053246; /* 鼠标悬停时修改边框颜色 */
+}
+
+.write-blog-btn:hover {
+  transform: scale(1.1); /* 鼠标悬停时缩放 */
+}
+
+.blog-editor {
+  margin: 0 auto;
+  align-self: center;
+  width: 80%;
+  height: 598px;
+  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; /* 将文本居中对齐 */
+  font-family: "Microsoft YaHei";
+}
+
+.blog-editor-content {
+  display: block;
+  margin: 0 auto;
+  width: 100%;
+  height: 386px;
+//resize: none;
+//border: none;
+//outline: none;
+  border-radius: 20px;
+  font-size: 30px;
+  font-weight: bold;
+  margin-top: 10px;
+//font-family: "Microsoft YaHei";
+}
+
+.editor-btns {
+  display: inline-block;
+  float: right;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.cancel-btn,
+.publish-btn {
+  width: 100px;
+  height: 35px;
+  color: #fff;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all .2s linear;
+  font-size: 19px;
+  font-weight: bold;
+  margin-top: 12px;
+}
+
+.cancel-btn {
+  background-color: #ccc;
+  margin-right: 10px;
+}
+
+.publish-btn {
+  background-color: var(--gradualRed);
+  color: #1d1f21;
+}
+
+.cancel-btn:hover,
+.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;
+  text-align: center;
+}
+
+.card-content2-icon {
+  color: var(--red);
+  margin-right: 5px;
+  animation: scale 1s ease-in-out infinite;
+  font-size: 30px;
+}
+
+.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: 31%;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  background: linear-gradient(to bottom, #f3dcfc, #e5ddff);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  padding: 20px;
+  height: 350px;
+}
+
+
+.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: auto; /* 使用滚动条来展示溢出的内容 */
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* 控制正文行数 */
+  -webkit-box-orient: vertical;
+  height: 74% /* 设置卡片内容的最大高度 */
+}
+.blog-card-content::-webkit-scrollbar {
+  width: 8px; /* 设置滚动条的宽度 */
+}
+
+.blog-card-content::-webkit-scrollbar-thumb {
+  background-color: purple; /* 设置滚动条滑块的颜色 */
+  border-radius: 4px; /* 设置滚动条滑块的圆角 */
+}
+
+.blog-card-content::-webkit-scrollbar-track {
+  background-color: lightgray; /* 设置滚动条轨道的背景颜色 */
+  border-radius: 4px; /* 设置滚动条轨道的圆角 */
+}
+.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;
+  font-size: 17px;
+  display: inline-block;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+}
+
+.delete-icon,
+.update-icon {
+  margin-left: 10px;
+  cursor: pointer;
+}
+.pictureUpload {
+  display: inline-block;
+  margin-top: 17px;
+  background-color: #d0c9f8; /* 设置按钮背景颜色 */
+  color: #fff; /* 设置文字颜色为白色 */
+  border: none; /* 移除边框 */
+  padding: 10px 20px; /* 调整内边距 */
+  font-size: 18px; /* 设置字体大小 */
+  border-radius: 10px; /* 添加圆角边框 */
+  cursor: pointer; /* 鼠标悬停时显示手型光标 */
+  transition: background-color 0.3s ease; /* 添加过渡效果 */
+}
+
+.pictureUpload:hover {
+  background-color: #b5a9f1; /* 鼠标悬停时修改背景颜色 */
+}
+
+</style>

src/components/home.vue

@@ -45,6 +45,14 @@
               </div>
             </li>
 
+            <!-- 博客 -->
+            <li @click="$router.push({ path: '/blog' })">
+              <div class="my-menu">
+                ✍️ <span>博客</span>
+              </div>
+            </li>
+
+
             <!-- 旅拍 -->
             <li @click="$router.push({path: '/travel'})">
               <div class="my-menu">

src/router/index.js

@@ -32,6 +32,10 @@ const routes = [
       path: "/love",
       name: "love",
       component: () => import('../components/love')
+    }, {
+        path: "/blog",
+        name: "blog",
+        component: () => import('../components/blog')
       }, {
       path: "/favorite",
       name: "favorite",

src/store/index.js

@@ -14,6 +14,7 @@ export default new Vuex.Store({
   getters: {
     articleTotal: state => {
       if (state.sortInfo !== null && state.sortInfo.length !== 0) {
+        //sortInfo数组为空或者为null，则表示没有文章.不为空则有文章
         if (state.sortInfo.length === 1) {
           return state.sortInfo[0].countOfSort;
         } else {

src/utils/constant.js

@@ -3,7 +3,7 @@ export default {
   imBaseURL: "http://localhost:81",
   webURL: "http://localhost",
 
-  // baseURL: "https://.cn/api",
+  // baseURL: "https://poetize.cn/api",
   // imBaseURL: "https://poetize.cn/im",
   // webURL: "https://poetize.cn",
 
@@ -18,8 +18,8 @@ export default {
   //前后端定义的密钥，AES使用16位
   cryptojs_key: "aoligeimeimaobin",
   qiniuUrl: "https://upload.qiniup.com",
-  // qiniuDownload: "$$$$七牛云下载地址，仿照【https://file.poetize.cn/】",
-  qiniuDownload: "http://s6qc8qkjn.hd-bkt.clouddn.com/",
+  qiniuDownload: "https://s6xqq8hhg.hd-bkt.clouddn.com/",
+
   favoriteVideo: "$$$$自己找一个视频链接作为百宝箱的封面",
   favoriteVideo2:"http://s6ondx7d9.hd-bkt.clouddn.com/images/340c8040d037c2f3217e8a1ade444fc8.mp4",