管理博客暂告一段落，上传封面的功能未实现

src/components/blog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="outside">
     <!-- 组件的内容 -->
     <!-- 网站信息 -->
     <div class="card-content1 shadow-box background-opacity">
@@ -39,22 +39,27 @@
         </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" @click="$router.push({path: '/article', query: {id: article.id}})">{{ article.articleTitle }}</div>
+          <div class="title" >{{ article.articleTitle }}</div>
         </div>
-        <div class="blog-card-content" @click="$router.push({path: '/article', query: {id: article.id}})">
+        <div class="blog-card-content" >
           {{ article.articleContent }}
         </div>
         <div class="blog-card-footer">
@@ -62,10 +67,10 @@
           <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">
+              <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.jpg" alt="Update Icon" width="30px" height="30px">
+              <img src="../assets/file/update.png" alt="Update Icon" width="30px" height="30px">
             </div>
           </div>
         </div>
@@ -77,6 +82,7 @@
 
 <script>
 import axios from "axios";
+import * as events from "events";
 export default {
   // 组件的逻辑和配置
   data() {
@@ -98,6 +104,7 @@ export default {
       blogLabelName: "",
       articles: [] , // 存储文章列表
       labelTotalNum: 0,
+      articleCover: "",
       articleUp: {
         id: 1,
         articleTitle: "",
@@ -108,11 +115,15 @@ export default {
         labelId: 0,
         labelName: "研发"
       },
+      file:"",
       blogLabels:[],
       selectedCategoryIndex: 0, // 默认选中第一个选项
     }
   },
   computed: {
+    events() {
+      return events
+    },
     webInfo() {
       return this.$store.state.webInfo;
     },
@@ -199,6 +210,7 @@ export default {
             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;
@@ -219,6 +231,8 @@ export default {
     cancelEdit() {
       // 取消编辑
       this.showEditor = false;
+      this.showUpdateBtn = false;
+      this.showPublishBtn = true;
       this.blogContent = "";
       this.blogContentTitle = "";
     },
@@ -231,22 +245,32 @@ export default {
         articleTitle:this.blogContentTitle,
         // 其他博客相关数据...
         sortId:1,
-        labelId:selectedIndex
+        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) // 发送POST请求，指定保存博客的接口地址
+      this.$http.post('/article/saveArticle', articleVO)
         .then(response => {
           // 请求成功处理逻辑
           console.log('博客保存成功！');
-          this.getUserArticles()
+          this.getUserArticles();
           this.showEditor = false;
           this.blogContent = "";
+          this.blogContentTitle = "";
+          this.$message({
+            message: '发布成功',
+            type: 'success'
+          });
         })
         .catch(error => {
           // 请求失败处理逻辑
           console.error('博客保存失败：', error);
+          this.$message({
+            message: '发布失败',
+            type: 'error'
+          });
         });
 
     },
@@ -275,15 +299,22 @@ export default {
       this.blogContent = article.articleContent;
       this.selectedCategoryIndex = article.labelId - 1; // 设置下拉框选中的索引值
       this.articleUp.id = article.id;
-      this.blogLabelName
+      // this.blogLabelName
-      document.getElementById('editorArea').scrollIntoView({ behavior: "smooth", block: "start" });
+      // 判断是否找到了 #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').
+      // 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
@@ -294,11 +325,15 @@ export default {
         .then(response => {
           // 请求成功处理逻辑
           console.log('博客更新成功！');
-          this.showEditor = false;
+
           console.log(response)
           this.getUserArticles()
           this.getUserArticleLabelTotalNum()
-          alert("更新成功")
+          this.$message({
+            message: '更新成功',
+            type: 'success'
+          });
+          this.showEditor = false;
           this.showPublishBtn = true;
           this.showUpdateBtn = false;
           this.blogContent = "";
@@ -307,6 +342,10 @@ export default {
         .catch(error => {
           // 请求失败处理逻辑
           console.error('更新博客失败：', error);
+          this.$message({
+            message: '更新失败',
+            type: 'error'
+          });
           this.showPublishBtn = true;
           this.showUpdateBtn = false;
           this.blogContent = "";
@@ -330,14 +369,22 @@ export default {
           // 请求失败，处理错误
           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);
@@ -435,20 +482,15 @@ export default {
   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;
@@ -492,7 +534,8 @@ export default {
 }
 
 .editor-btns {
-  display: flex;
+  display: inline-block;
+  float: right;
   justify-content: flex-end;
   margin-top: 16px;
 }
@@ -604,12 +647,14 @@ export default {
 .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 {
@@ -777,14 +822,17 @@ option {
 }
 
 .blog-card {
-  width: 30%; /* 控制每个卡片的宽度 */
+  width: 30%;
   margin-bottom: 20px;
-  background-color: #fff; /* 卡片背景色 */
+  margin-top: 20px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 卡片阴影效果 */
+  background: linear-gradient(to bottom, #f3dcfc, #e5ddff);
-  border-radius: 10px; /* 圆角边框 */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  padding: 20px; /* 内边距 */
+  border-radius: 10px;
+  padding: 20px;
+  height: 350px;
 }
 
+
 .blog-card:hover {
   transform: translateY(-5px); /* 鼠标悬停时微微抬起 */
 }
@@ -810,13 +858,26 @@ option {
 .blog-card-content {
   font-size: 18px;
   line-height: 1.6;
-  overflow: hidden;
+  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;
@@ -829,6 +890,7 @@ option {
 .label,
 .date {
   margin-right: 10px;
+  font-size: 19px;
 }
 
 .actions {
@@ -841,5 +903,21 @@ option {
   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/utils/constant.js

@@ -18,7 +18,7 @@ export default {
   //前后端定义的密钥，AES使用16位
   cryptojs_key: "aoligeimeimaobin",
   qiniuUrl: "https://upload.qiniup.com",
-  qiniuDownload: "https://portal.qiniu.com/cdn/domain/s6pxqn1l5.hd-bkt.clouddn.com",
+  qiniuDownload: "https://s6pxqn1l5.hd-bkt.clouddn.com/",
 
   favoriteVideo: "$$$$自己找一个视频链接作为百宝箱的封面",