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 1/4] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=8D=9A=E5=AE=A2?= =?UTF-8?q?=E5=8A=9F=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; + +} + From 129a21d5330c8dfdf3ab5e823e9a8bc14d136028 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: Thu, 11 Jan 2024 11:00:58 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=8D=9A=E5=AE=A2=E5=A4=A7=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=94=B9=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/articleList.vue | 1 + src/components/blog.vue | 1023 +++++++++++++++----------------- 2 files changed, 490 insertions(+), 534 deletions(-) diff --git a/src/components/articleList.vue b/src/components/articleList.vue index 998b1e1..0c7602e 100644 --- a/src/components/articleList.vue +++ b/src/components/articleList.vue @@ -187,6 +187,7 @@ overflow: hidden; border-radius: 10px; animation: hideToShow 1s ease-in-out; + background-color: #1d1f21; } .recent-post-item-image { diff --git a/src/components/blog.vue b/src/components/blog.vue index 4445f68..501b57c 100644 --- a/src/components/blog.vue +++ b/src/components/blog.vue @@ -25,15 +25,15 @@
- + + +
- +
-
+
@@ -48,7 +48,7 @@ d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z" fill="#FFFFFF"> - 文章信息 + 文章信息 @@ -60,37 +60,37 @@ - - - {{article.commentStatus === false ? '否' : '是'}} - - - - - - - {{article.recommendStatus === false ? '否' : '是'}} - - - - - - - {{article.viewStatus === false ? '否' : '是'}} - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -128,106 +128,177 @@
- 保存 + 更新 + 保存 重置所有修改
- -
- -
- - -
- -
- -
- - - - -
拖拽 / 点击上传封面
-
- - - -
- - 上传 - -
-
- - - -
- -


我的个人博客
-
-
-
-
{{ article.username }}
-
{{ article.articleTitle }}
-
-
- Cover Image -
-
- {{ article.articleContent }} -
- -
@@ -373,7 +369,6 @@ export default { showUpdateBtn: false, showSaveBtn: true, articleSearch: "", - // showEditor: false, showPostEditor: false, blogContent: "", blogContentTitle:"", @@ -568,11 +563,11 @@ export default { }, submitForm(formName) { if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) { - this.$message({ - message: "文章不可见时必须输入密码!", - type: "error" - }); - return; + // this.$message({ + // message: "文章不可见时必须输入密码!", + // type: "error" + // }); + // return; } this.$refs[formName].validate((valid) => { if (valid) { @@ -592,12 +587,14 @@ export default { }, submitForm2() { if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) { - this.$message({ - message: "文章不可见时必须输入密码!", - type: "error" - }); - return; + // this.$message({ + // message: "文章不可见时必须输入密码!", + // type: "error" + // }); + // return; } + this.article.userId = this.$store.state.currentUser.id; + console.log(this.$store.state.currentUser.id) this.saveArticle(this.article, "/article/updateArticle") }, resetForm(formName) { @@ -828,131 +825,6 @@ export default { 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:this.articleUp.articleCover, - viewStatus: 0, - commentStatus: 0, - recommendStatus: 0 - }; - console.log(this.$store.state.currentUser) - console.log(this.articleUp.articleCover+"cover") - // 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.showPostEditor = true; - 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"); @@ -962,22 +834,13 @@ export default { 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); - // 这里可以进行进一步的处理,比如上传文件到服务器等操作 - } } } diff --git a/src/utils/constant.js b/src/utils/constant.js index 1dc85cd..7db007d 100644 --- a/src/utils/constant.js +++ b/src/utils/constant.js @@ -18,7 +18,7 @@ export default { //前后端定义的密钥,AES使用16位 cryptojs_key: "aoligeimeimaobin", qiniuUrl: "https://upload.qiniup.com", - qiniuDownload: "http://s6qc8qkjn.hd-bkt.clouddn.com/", + qiniuDownload: "http://s6xqq8hhg.hd-bkt.clouddn.com/", favoriteVideo: "http://s6q4ppvdk.hd-bkt.clouddn.com/new.mp4", favoriteVideo2: "http://s6q4ppvdk.hd-bkt.clouddn.com/images/340c8040d037c2f3217e8a1ade444fc8.mp4", From 13f70e30479535e283e30648c5a329624871901b 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: Thu, 11 Jan 2024 13:39:42 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E9=80=9F=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/myAside.vue | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/myAside.vue b/src/components/myAside.vue index 2082c9a..21e63a8 100644 --- a/src/components/myAside.vue +++ b/src/components/myAside.vue @@ -70,6 +70,21 @@ {{drugDetails}}
+ +
+
速览
+
+ {{sort.sortName}} +
+
+ {{sort.sortDescription}} +
+