From 82fc59b00fb067d6a53207920ad963f7dbee586b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=B2=9A=E9=A6=A8?= <13450313+xiaolanxiner@user.noreply.giitee.com> Date: Wed, 10 Jan 2024 17:07:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=8D=9A=E5=AE=A2=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/blog.vue | 372 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 361 insertions(+), 11 deletions(-) diff --git a/src/components/blog.vue b/src/components/blog.vue index ff7d1c8..4445f68 100644 --- a/src/components/blog.vue +++ b/src/components/blog.vue @@ -4,7 +4,7 @@
-
{{webInfo.webName}}
+
{{currentUser.username}}
博客 @@ -23,12 +23,116 @@ 朋友圈
- +
- +
+ +
+
+ +
+
+ + + + + + + + 文章信息 + + + + + + + + + + + + + {{article.commentStatus === false ? '否' : '是'}} + + + + + + + {{article.recommendStatus === false ? '否' : '是'}} + + + + + + + {{article.viewStatus === false ? '否' : '是'}} + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + + + +
+ 保存 + 重置所有修改 +
+
+
@@ -94,7 +198,7 @@
- 我的博客 + 我的个人博客
@@ -132,13 +236,59 @@ import axios from "axios"; import * as events from "events"; import upload from '../utils/ajaxUpload'; +const uploadPicture = () => import( "./common/uploadPicture"); export default { + components: { + uploadPicture + }, avatar: { type: String }, // 组件的逻辑和配置 data() { return { + id: this.$route.query.id, + article: { + articleTitle: "", + articleContent: "", + commentStatus: true, + recommendStatus: false, + viewStatus: true, + password: "", + tips: "", + articleCover: "", + sortId: null, + labelId: null + }, + sorts: [], + labels: [], + labelsTemp: [], + rules: { + articleTitle: [ + {required: true, message: '请输入标题', trigger: 'change'} + ], + articleContent: [ + {required: true, message: '请输入内容', trigger: 'change'} + ], + commentStatus: [ + {required: true, message: '是否启用评论', trigger: 'change'} + ], + recommendStatus: [ + {required: true, message: '是否推荐', trigger: 'change'} + ], + viewStatus: [ + {required: true, message: '是否可见', trigger: 'change'} + ], + articleCover: [ + {required: true, message: '封面', trigger: 'change'} + ], + sortId: [ + {required: true, message: '分类', trigger: 'change'} + ], + labelId: [ + {required: true, message: '标签', trigger: 'blur'} + ] + }, pagination: { current: 1, size: 5, @@ -150,6 +300,7 @@ export default { showAdmireDialog: false, articleSearch: "", showEditor: false, + showPostEditor: false, showUpdateBtn: false, showPublishBtn: true, blogContent: "", @@ -184,16 +335,192 @@ export default { return this.$store.state.sortInfo; } }, + watch: { + 'article.sortId'(newVal, oldVal) { + if (oldVal !== null) { + this.article.labelId = null; + } + if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) { + this.labelsTemp = this.labels.filter(l => l.sortId === newVal); + } + } + }, created() { this.getRecommendArticles(); this.getAdmire(); this.getUserArticles(); // 调用获取用户文章列表的方法 this.getUserArticleLabelTotalNum();// 调用获取用户文章的标签种类数的方法 this.getBlogLabels();//调用获取标签分类的方法 + this.getSortAndLabel(); console.log('getUserArticleLabelTotalNum is called'); }, methods: { + imgAdd(pos, file) { + let suffix = ""; + if (file.name.lastIndexOf('.') !== -1) { + suffix = file.name.substring(file.name.lastIndexOf('.')); + } + let key = "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix; + + let storeType = localStorage.getItem("defaultStoreType"); + + let fd = new FormData(); + fd.append("file", file); + fd.append("key", key); + fd.append("relativePath", key); + fd.append("type", "articlePicture"); + fd.append("storeType", storeType); + + if (storeType === "local") { + this.saveLocal(pos, fd); + } else if (storeType === "qiniu") { + this.saveQiniu(pos, fd); + } + }, + saveLocal(pos, fd) { + this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, true) + .then((res) => { + if (!this.$common.isEmpty(res.data)) { + let url = res.data; + this.$refs.md.$img2Url(pos, url); + } + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + }, + saveQiniu(pos, fd) { + this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")}, true) + .then((res) => { + if (!this.$common.isEmpty(res.data)) { + fd.append("token", res.data); + + this.$http.uploadQiniu(this.$constant.qiniuUrl, fd) + .then((res) => { + if (!this.$common.isEmpty(res.key)) { + let url = this.$constant.qiniuDownload + res.key; + let file = fd.get("file"); + this.$common.saveResource(this, "articlePicture", url, file.size, file.type, "qiniu", true); + this.$refs.md.$img2Url(pos, url); + } + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + } + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + }, + addArticleCover(res) { + this.article.articleCover = res; + }, + getSortAndLabel() { + this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel") + .then((res) => { + if (!this.$common.isEmpty(res.data)) { + this.sorts = res.data.sorts; + this.labels = res.data.labels; + if (!this.$common.isEmpty(this.id)) { + this.getArticle(); + } + } + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + }, + getArticle() { + this.$http.get(this.$constant.baseURL + "/admin/article/getArticleById", {id: this.id}, true) + .then((res) => { + if (!this.$common.isEmpty(res.data)) { + this.article = res.data; + } + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + }, + submitForm(formName) { + if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) { + this.$message({ + message: "文章不可见时必须输入密码！", + type: "error" + }); + return; + } + this.$refs[formName].validate((valid) => { + if (valid) { + if (this.$common.isEmpty(this.id)) { + this.saveArticle(this.article, "/article/saveArticle") + } else { + this.article.id = this.id; + this.saveArticle(this.article, "/article/updateArticle") + } + } else { + this.$message({ + message: "请完善必填项！", + type: "error" + }); + } + }); + }, + resetForm(formName) { + this.$refs[formName].resetFields(); + if (!this.$common.isEmpty(this.id)) { + this.getArticle(); + } + }, + saveArticle(value, url) { + this.$confirm('确认保存？', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'success', + center: true + }).then(() => { + this.$http.post(this.$constant.baseURL + url, value, true) + .then((res) => { + this.$message({ + message: "保存成功！", + type: "success" + }); + // this.$router.push({path: '/postList'}); + this.showPostEditor = false; + this.article.articleContent = ""; + this.article.articleCover = ""; + this.article.articleTitle = ""; + this.article.sortId = ""; + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + }).catch(() => { + this.$message({ + type: 'success', + message: '已取消保存!' + }); + }); + }, submitUpload() { this.$refs.upload.submit(); }, @@ -619,17 +946,18 @@ export default { } .write-blog-btn { - position: absolute; - left: 470px; - top: 197px; - width: 160px; - height: 63px; + //position: absolute; + //left: 470px; + //top: 197px; + //width: 160px; + //height: 63px; + margin-top: 7px; background-color: var(--gradualRed); color: #181313; border-radius: 20px; font-size: 24px; font-weight: bold; - display: flex; + display: inline-block; justify-content: center; align-items: center; cursor: pointer; @@ -1085,4 +1413,26 @@ option { object-fit: contain; } +.publicBlog { + margin-left: 10px; + //display: inline-block; + margin-top: 7px; + background-color: var(--gradualRed); + color: #181313; + border-radius: 20px; + font-size: 24px; + font-weight: bold; + display: inline-block; + justify-content: center; + align-items: center; + cursor: pointer; + transition: all .2s ease-in-out; + border: 2px solid #1675b4; /* 添加边框 */ +} + +.publicBlog:hover { + background-color: #2980b9; + +} +