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 ff7d1c8..575e898 100644 --- a/src/components/blog.vue +++ b/src/components/blog.vue @@ -4,7 +4,7 @@
-
{{webInfo.webName}}
+
{{currentUser.username}}
博客 @@ -23,107 +23,278 @@ 朋友圈
- - - - - -
- -
- - -
- -
- -
- - - - -
拖拽 / 点击上传封面
-
- - - - - - 上传 - -
-
- - - + + + + + + + + + + + + + + + +
+ 更新 + 保存 + 重置所有修改 +
-


- 我的博客 + 我的个人博客
-
-
-
-
{{ article.username }}
-
{{ article.articleTitle }}
-
-
- Cover Image -
-
- {{ article.articleContent }} -
-
-
{{ article.labelName }}
-
发布于 {{ article.createTime }}
-
-
最近更新于 {{ article.updateTime }}
-
-
- Delete Icon -
-
- Update Icon + +
+
+ + + + + + 发现 +
+
+ +
+ +
+
+
遇事不决，可问春风
+
+ +
+ +
+ +
+ + + + + + 发布于 {{ article.createTime }} +
+ + + +
{{ article.articleTitle }}
+

{{ article.articleTitle }}

+ + + +
+ + + + + {{ article.viewCount }} 热度 + + + + + + + + + + + + + {{ article.commentCount }} 条评论 + + + + + + {{ article.likeCount }} 点赞 + +
+ +
+ {{ article.articleContent }} +
+ +
+ + + + + + + + {{ article.sortName }} + + + + + + {{ article.labelName }} + + + +
+
+ + 编辑 + + 删除 + +
+
@@ -132,13 +303,60 @@ 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: { + userId: this.$store.state.currentUser.id, + articleTitle: "", + articleContent: "", + commentStatus: false, + recommendStatus: false, + viewStatus: false, + 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, @@ -148,26 +366,26 @@ export default { recommendArticles: [], admires: [], showAdmireDialog: false, - articleSearch: "", - showEditor: false, showUpdateBtn: false, - showPublishBtn: true, + showSaveBtn: true, + articleSearch: "", + showPostEditor: false, blogContent: "", blogContentTitle:"", blogLabelName: "", articles: [] , // 存储文章列表 labelTotalNum: 0, - articleUp: { - id: 1, - articleTitle: "", - articleContent: "", - userId: 1, - username: "", - sortId: 1, - labelId: 0, - labelName: "研发", - articleCover: "" - }, + // articleUp: { + // id: 1, + // articleTitle: "", + // articleContent: "", + // userId: 1, + // username: "", + // sortId: 1, + // labelId: 0, + // labelName: "研发", + // articleCover: "" + // }, file:"", blogLabels:[], selectedCategoryIndex: 0, // 默认选中第一个选项 @@ -184,16 +402,242 @@ 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: { + handleEdit(item) { + this.showUpdateBtn = true; + this.showSaveBtn = false; + this.showPostEditor = true; + this.article = item; + }, + handleDelete(item) { + this.$confirm('确认删除？', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'success', + center: true + }).then(() => { + this.$http.get(this.$constant.baseURL + "/article/deleteArticle", {id: item.id}, true) + .then((res) => { + this.pagination.current = 1; + // this.getArticle(item); + this.getUserArticles() + this.$message({ + message: "删除成功！", + type: "success" + }); + }) + .catch((error) => { + this.$message({ + message: error.message, + type: "error" + }); + }); + }).catch(() => { + this.$message({ + type: 'success', + message: '已取消删除!' + }); + }); + }, + 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(articleItem) { + this.$http.get(this.$constant.baseURL + "/admin/article/getArticleById", {id: articleItem.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.$store.state.currentUser.id)) { + this.saveArticle(this.article, "/article/updateArticle") + } else { + this.article.userId = this.$store.state.currentUser.id; + this.saveArticle(this.article, "/article/saveArticle") + } + } else { + this.$message({ + message: "请完善必填项！", + type: "error" + }); + } + }); + }, + submitForm2() { + if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) { + // 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) { + 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.getUserArticleLabelTotalNum(); + this.getUserArticles(); + 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(); }, @@ -345,8 +789,7 @@ export default { }); }, getUserArticles() { - const id = this.$store.state.currentUser.id; - this.$http.get(`/admin/article/getArticleByUserId?id=${id}`) + this.$http.get(`/admin/article/getArticleByUserId?id=${this.$store.state.currentUser.id}`) .then(response => { if (!this.$common.isEmpty(response.data)) { this.articles = response.data; @@ -359,7 +802,7 @@ export default { this.getUserArticleLabelTotalNum(); // 发送请求获取博客封面图 - this.$http.get(`http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/${article.articleCover}`) + this.$http.get(`${article.articleCover}`) .then(response => { console.log(response.data+"star"); // 在这里处理获取到的博客封面图 @@ -382,130 +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 - }; - 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.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"); @@ -515,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); - // 这里可以进行进一步的处理，比如上传文件到服务器等操作 - } } } @@ -538,6 +848,7 @@ export default { diff --git a/src/components/myAside.vue b/src/components/myAside.vue index 4110135..72f2335 100644 --- a/src/components/myAside.vue +++ b/src/components/myAside.vue @@ -70,6 +70,21 @@ {{drugDetails}}
+ +
+
速览
+
+ {{sort.sortName}} +
+
+ {{sort.sortDescription}} +
+