|
|
|
|
@ -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
|
|
|
|
|
document.getElementById('editorArea').scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
|
|
// 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').
|
|
|
|
|
// 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; /* 卡片背景色 */
|
|
|
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 卡片阴影效果 */
|
|
|
|
|
border-radius: 10px; /* 圆角边框 */
|
|
|
|
|
padding: 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); /* 鼠标悬停时微微抬起 */
|
|
|
|
|
}
|
|
|
|
|
@ -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>
|
|
|
|
|
|
王岚馨
1 year ago
