peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 评论模块开发

Browse Source
This commit is contained in:
ronger 2020-07-31 16:17:12 +08:00
parent e074e1079d
commit 4267c5df73
15 changed files with 587 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/common/comment/index.js Normal file
View File

@ -0,0 +1,15 @@
/**
* @file Comment box component / ES module
* @module components/common/comment
* @author Surmon <https://github.com/surmon-china>
*/
import Comment from './main'
export const comment = {
install(Vue) {
Vue.component('comment-box', Comment)
}
}
export default comment

328
components/common/comment/main.vue Normal file
View File

@ -0,0 +1,328 @@
<template>
<el-row class="pt-5">
<el-col v-if="isFetching">
加载中
</el-col>
<el-col v-else>
<el-col v-if="user" style="margin-top: 1rem;">
<el-col :xs="2" :sm="1" :xl="1">
<el-avatar :src="avatar"></el-avatar>
</el-col>
<el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;">
<el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input>
</el-col>
<el-col>
<el-drawer
:visible.sync="drawer"
:direction="direction"
size="40%">
<el-col slot="title">
<el-col>
<el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>
<span class="text-default" style="padding-left: 1rem;">{{ commentTitle }}</span>
</el-col>
</el-col>
<el-col>
<div id="contentEditor"></div>
</el-col>
<el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button type="primary" :loading="loading" @click="postComment">发布</el-button>
</el-col>
</el-drawer>
</el-col>
</el-col>
<el-col v-else class="text-center" style="margin-top: 1rem;">
<el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
后发布评论
</el-col>
<el-col style="margin-top: 1rem;">
<el-col v-for="comment in comment.data" :key="comment.idComment">
<el-card style="margin-bottom: 0.5rem;">
<el-col :xs="3" :sm="1" :xl="1">
<el-avatar v-if="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar>
<el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
</el-col>
<el-col :xs="21" :sm="23" :xl="23">
<el-col style="margin-left: 1rem;">
<el-col v-if="comment.commentOriginalCommentId">
<el-link @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
class="text-default">{{ comment.commenter.userNickname }}
</el-link>
<small class="text-default" style="margin: 0 0.2rem">回复了</small><span style="font-weight: bold;"> {{comment.commentOriginalAuthorNickname}}</span>
</el-col>
<el-col v-else>
<el-link @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
class="text-default">{{ comment.commenter.userNickname }}
</el-link>
</el-col>
</el-col>
<el-col style="padding: 1rem;">
<el-col>
<span v-html="comment.commentContent"></span>
</el-col>
</el-col>
<el-col :span="22" style="padding-left: 1rem;">
<el-link :underline="false" class="text-default">{{ comment.timeAgo }}</el-link>
</el-col>
<el-col :span="2" class="text-right" style="margin-bottom: 0.5rem;">
<el-link :underline="false" title="回复" @click.native="replyComment(comment)"><i
class="el-icon-s-comment"></i></el-link>
</el-col>
</el-col>
</el-card>
</el-col>
</el-col>
</el-col>
</el-row>
</template>
<script>
import Vue from 'vue'
import {mapState} from 'vuex'
import {isBrowser} from '~/environment'
export default {
name: "Comment",
props: {
fetching: {
type: Boolean,
default: false
},
user: {
type: Object,
default: false
},
avatar: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
postId: {
type: Number,
required: true
}
},
computed: {
...mapState({
comment: state => state.comment.data,
isFetchingComment: state => state.comment.fetching,
isPostingComment: state => state.comment.posting,
constants: state => state.global.constants,
language: state => state.global.language,
isMobile: state => state.global.isMobile
}),
isFetching() {
// 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
// 2. 宿主组件加载完成，如果自己还在请求，则列表呈加载状态
// 3. 自己已请求完，宿主组件还在加载，列表和 tool 都呈加载状态
return this.fetching || this.isFetchingComment
}
},
data() {
return {
tokenURL: {},
drawer: false,
direction: 'btt',
initEditor: false,
isShow: true,
loading: false,
commentOriginalCommentId: 0,
commentAuthorAvatar: '',
commentTitle: ''
}
},
methods: {
onRouter(name, data) {
this.$router.push(
{
name: name,
params: {
id: data
}
}
)
},
_initEditor (data) {
let toolbar;
if (window.innerWidth < 768) {
toolbar = [
'emoji',
'headings',
'bold',
'italic',
'strike',
'link',
'|',
'list',
'ordered-list',
'check',
'outdent',
'indent',
'|',
'quote',
'line',
'code',
'inline-code',
'insert-before',
'insert-after',
'|',
'upload',
'record',
'table',
'|',
'undo',
'redo',
'|',
'edit-mode',
'content-theme',
'code-theme',
{
name: 'more',
toolbar: [
'fullscreen',
'both',
'format',
'preview',
'info',
'help',
],
}]
}
return new Vue.Vditor(data.id, {
toolbar,
mode: 'sv',
tab: '\t',
cache: {
enable: this.postId ? false : true,
id: this.postId ? this.postId : '',
},
preview: {
markdown: {
toc: true,
},
delay: 500,
mode: data.mode,
/*url: `${process.env.Server}/api/console/markdown`,*/
parse: (element) => {
if (element.style.display === 'none') {
return
}
// LazyLoadImage();
Vue.Vditor.highlightRender({style:'github'}, element, document);
}
},
upload: {
max: 10 * 1024 * 1024,
url: this.tokenURL?.URL,
linkToImgUrl: this.tokenURL?.URL,
token: this.tokenURL?.token,
filename: name => name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
},
height: data.height,
counter: 102400,
resize: {
enable: data.resize,
},
lang: this.$store.state.locale,
placeholder: data.placeholder,
})
},
_loadEditor() {
let _ts = this;
if (!_ts.initEditor) {
_ts.$set(_ts, 'initEditor', true);
setTimeout(function () {
_ts.contentEditor = _ts._initEditor({
id: 'contentEditor',
mode: 'both',
height: 200,
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
resize: false,
});
_ts.contentEditor.setValue('');
}, 500);
}
},
gotoComment(commentId) {
console.log(commentId);
},
replyComment(comment) {
let _ts = this;
_ts.$set(_ts, 'drawer', true);
_ts.$set(_ts, 'commentTitle', comment.commenter.userNickname);
_ts.$set(_ts, 'commentAuthorAvatar', comment.commenter.userAvatarURL);
_ts.$set(_ts, 'commentOriginalCommentId', comment.idComment);
_ts._loadEditor();
},
showComment() {
let _ts = this;
_ts.$set(_ts, 'drawer', true);
_ts.$set(_ts, 'commentTitle', _ts.title);
_ts.$set(_ts, 'commentAuthorAvatar', '');
_ts.$set(_ts, 'commentOriginalCommentId', 0);
_ts._loadEditor();
},
async postComment() {
let _ts = this;
_ts.$set(_ts, 'loading', true);
let commentContent = await _ts.contentEditor.getHTML();
if (!(commentContent)) {
_ts.$message("回帖内容不能为空！");
return false;
}
let comment = {
commentArticleId: _ts.postId,
commentContent: commentContent,
commentOriginalCommentId: _ts.commentOriginalCommentId,
commentAuthorId: _ts.user.idUser
};
_ts.$axios.$post('/api/comment/post', comment).then(function (res) {
if (res) {
if (res.message) {
_ts.$message(res.message);
return false;
}
_ts.contentEditor.setValue('');
_ts.$set(_ts, 'drawer', false);
_ts.getComments();
}
_ts.$set(_ts, 'loading', false);
})
},
getComments() {
// 每次重新获取数据时都需要回到评论框顶部，因为都是新数据
this.$store.dispatch('comment/fetchList', {
post_id: this.postId
})
},
gotoLogin() {
this.$router.push({
name: 'login'
})
},
// 取消回复
cancelCommentReply() {
this.commentOriginalCommentId = 0
}
},
watch: {
isFetching(isFetching) {
console.log(isFetching)
if (isFetching) {
this.cancelCommentReply()
}
}
},
destroyed() {
this.$store.commit('comment/clearListData')
}
}
</script>
<style scoped>
</style>

2
components/layouts/mobile/header.vue
View File

@ -196,7 +196,7 @@
getUnreadNotifications() {
let _ts = this;
if (_ts.isLogin) {
_ts.$axios.$get('/api/v1/notification/unread', {
_ts.$axios.$get('/api/notification/unread', {
headers: {
Authorization: _ts.$store.state.oauth?.accessToken
}

6
components/layouts/pc/header.vue
View File

@ -196,10 +196,10 @@
getUnreadNotifications() {
let _ts = this;
if (_ts.isLogin) {
_ts.$axios.$get('/api/v1/notification/unread').then(function (res) {
_ts.$axios.$get('/api/notification/unread').then(function (res) {
if (res) {
_ts.$set(_ts, 'notifications', res.data.notifications);
_ts.$set(_ts, 'notificationNumbers', res.data.notifications.length == 0 ? "" : res.data.notifications.length);
_ts.$set(_ts, 'notifications', res.notifications);
_ts.$set(_ts, 'notificationNumbers', res.notifications.length == 0 ? "" : res.notifications.length);
}
})
}

22
nuxt.config.js
View File

@ -2,7 +2,6 @@ import appConfig from './config/app.config'
import apiConfig from './config/api.config'
import {isProdMode, isDevMode} from './environment'
export default {
/*
** Nuxt rendering mode
@ -13,7 +12,7 @@ export default {
** Render configuration
*/
render: {
csp: true
csp: false
},
modern: true,
dev: isDevMode,
@ -52,9 +51,10 @@ export default {
** https://nuxtjs.org/guide/plugins
*/
plugins: [
{src: '@/plugins/axios'},
{src: '@/plugins/element-ui'},
{src: '@/plugins/vditor', ssr: false}
{src: '~/plugins/extend'},
{src: '~/plugins/axios'},
{src: '~/plugins/element-ui'},
{src: '~/plugins/vditor', ssr: false}
],
/*
** Nuxt.js dev-modules
@ -64,10 +64,20 @@ export default {
** Nuxt.js modules
*/
modules: [
['@nuxtjs/axios', {baseURL: apiConfig.BASE}],
'@nuxtjs/axios',
'@nuxtjs/proxy',
'js-cookie',
'cookieparser'
],
axios: {
proxy: true // 开启proxy
},
proxy: [ //proxy配置
['/api', {
target:'https://rymcu.com/vertical-console/', //api请求路径
pathRewrite: { '^/api' : '/api/v1' } //重定向请求路径，防止路由、api路径的冲突
}]
],
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/

146
package-lock.json generated
View File

@ -1471,21 +1471,28 @@
}
},
"@nuxtjs/axios": {
"version": "5.11.0",
"resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40nuxtjs%2Faxios%2Fdownload%2F%40nuxtjs%2Faxios-5.11.0.tgz",
"integrity": "sha1-J9cpemnhHDkDm5ysrGHi4NDgDx8=",
"version": "5.12.0",
"resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.12.0.tgz",
"integrity": "sha1-UGkjQOZOyDjxZ9KS1ZscwqDi2+8=",
"requires": {
"@nuxtjs/proxy": "^2.0.0",
"axios": "^0.19.2",
"axios-retry": "^3.1.8",
"consola": "^2.11.3",
"defu": "^2.0.2"
"consola": "^2.14.0",
"defu": "^2.0.4"
},
"dependencies": {
"consola": {
"version": "2.14.0",
"resolved": "https://registry.npm.taobao.org/consola/download/consola-2.14.0.tgz?cache=0&sync_timestamp=1593184572399&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsola%2Fdownload%2Fconsola-2.14.0.tgz",
"integrity": "sha1-Fi7pA7bJxN4lB32T80q5AuvLTaw="
}
}
},
"@nuxtjs/proxy": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/@nuxtjs/proxy/download/@nuxtjs/proxy-2.0.0.tgz",
"integrity": "sha1-zxmJTqxyGirYlik/JBNx8Ebbcec=",
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/@nuxtjs/proxy/download/@nuxtjs/proxy-2.0.1.tgz",
"integrity": "sha1-JGm24xYxGqjGDTSFAqVL/m1VNqo=",
"requires": {
"consola": "^2.11.3",
"http-proxy-middleware": "^1.0.4"
@ -2261,6 +2268,29 @@
"integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518530318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
"integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"axios-retry": {
@ -3107,17 +3137,6 @@
}
}
},
"clone-deep": {
"version": "4.0.1",
"resolved": "https://registry.npm.taobao.org/clone-deep/download/clone-deep-4.0.1.tgz",
"integrity": "sha1-wZ/Zvbv4WUK0/ZechNz31fB8I4c=",
"dev": true,
"requires": {
"is-plain-object": "^2.0.4",
"kind-of": "^6.0.2",
"shallow-clone": "^3.0.0"
}
},
"coa": {
"version": "2.0.2",
"resolved": "https://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz",
@ -4856,27 +4875,9 @@
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518530318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
"integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
"requires": {
"debug": "=3.1.0"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
"version": "1.12.1",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.12.1.tgz?cache=0&sync_timestamp=1592518530318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.12.1.tgz",
"integrity": "sha1-3lSmIFMRuT1gOY68Ac9wFWgjErY="
},
"for-in": {
"version": "1.0.2",
@ -5595,14 +5596,14 @@
}
},
"http-proxy-middleware": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz",
"integrity": "sha1-Ql6hd5hqDNo0+cgeyWHHGa22wqk=",
"version": "1.0.5",
"resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.5.tgz",
"integrity": "sha1-TG4l2VpBHj11C8ecz2YpBnUXbcI=",
"requires": {
"@types/http-proxy": "^1.17.4",
"http-proxy": "^1.18.1",
"is-glob": "^4.0.1",
"lodash": "^4.17.15",
"lodash": "^4.17.19",
"micromatch": "^4.0.2"
},
"dependencies": {
@ -5627,6 +5628,11 @@
"resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
"integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss="
},
"lodash": {
"version": "4.17.19",
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226827854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz",
"integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks="
},
"micromatch": {
"version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
@ -6298,6 +6304,12 @@
"resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-6.0.3.tgz",
"integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0="
},
"klona": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/klona/download/klona-1.1.2.tgz?cache=0&sync_timestamp=1594031545393&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fklona%2Fdownload%2Fklona-1.1.2.tgz",
"integrity": "sha1-p54pJRilpUEuyNCXlkv/FXGmTbA=",
"dev": true
},
"last-call-webpack-plugin": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/last-call-webpack-plugin/download/last-call-webpack-plugin-3.0.0.tgz",
@ -9348,23 +9360,28 @@
}
},
"sass-loader": {
"version": "8.0.2",
"resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-8.0.2.tgz",
"integrity": "sha1-3r7NjDziQ8dkVPLoKQSCFQOACQ0=",
"version": "9.0.2",
"resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-9.0.2.tgz?cache=0&sync_timestamp=1594134152417&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-9.0.2.tgz",
"integrity": "sha1-hHybTJUyjdyMfTXPKMnW5U5ZqQs=",
"dev": true,
"requires": {
"clone-deep": "^4.0.1",
"loader-utils": "^1.2.3",
"klona": "^1.1.1",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.1",
"schema-utils": "^2.6.1",
"semver": "^6.3.0"
"schema-utils": "^2.7.0",
"semver": "^7.3.2"
},
"dependencies": {
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz",
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"dev": true
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz?cache=0&sync_timestamp=1584445207623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
}
}
},
@ -9541,15 +9558,6 @@
"safe-buffer": "^5.0.1"
}
},
"shallow-clone": {
"version": "3.0.1",
"resolved": "https://registry.npm.taobao.org/shallow-clone/download/shallow-clone-3.0.1.tgz",
"integrity": "sha1-jymBrZJTH1UDWwH7IwdppA4C76M=",
"dev": true,
"requires": {
"kind-of": "^6.0.2"
}
},
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-2.0.0.tgz",
@ -10747,11 +10755,11 @@
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
},
"vditor": {
"version": "3.3.3",
"resolved": "https://registry.npm.taobao.org/vditor/download/vditor-3.3.3.tgz",
"integrity": "sha1-+6sWvyWeBgqVAqqKFGlDpwzXV/E=",
"version": "3.3.8",
"resolved": "https://registry.npm.taobao.org/vditor/download/vditor-3.3.8.tgz",
"integrity": "sha1-1gucJNej4iA1LAu7qxWP9ek+lV8=",
"requires": {
"diff-match-patch": "^1.0.4"
"diff-match-patch": "^1.0.5"
}
},
"vendors": {

8
package.json
View File

@ -9,18 +9,18 @@
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.11.0",
"@nuxtjs/axios": "^5.12.0",
"cookieparser": "^0.1.0",
"cross-env": "^7.0.2",
"element-ui": "^2.13.2",
"express": "^4.17.1",
"js-cookie": "^2.2.1",
"nuxt": "^2.13.3",
"vditor": "^3.3.3"
"vditor": "^3.3.8"
},
"devDependencies": {
"@nuxtjs/proxy": "^2.0.0",
"@nuxtjs/proxy": "^2.0.1",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
"sass-loader": "^9.0.2"
}
}

50
pages/article/_article_id.vue
View File

@ -19,7 +19,7 @@
<small class="d-block text-muted">{{ article.timeAgo }}</small>
</div>
</el-col>
<el-col :xs="12" :sm="12" :xl="12" v-if="isLogin" class="text-right">
<el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
<el-dropdown trigger="click" @command="handleCommand">
<el-link :underline="false"><i class="el-icon-more"></i></el-link>
<el-dropdown-menu slot="dropdown">
@ -82,39 +82,9 @@
</div>
</el-card>
</el-col>
<el-col v-if="isLogin" style="margin-top: 1rem;">
<el-col :xs="2" :sm="1" :xl="1">
<el-avatar :src="avatar"></el-avatar>
</el-col>
<el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;">
<el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input>
</el-col>
<!-- <el-col>-->
<!-- <el-drawer-->
<!-- :visible.sync="drawer"-->
<!-- :direction="direction"-->
<!-- size="40%">-->
<!-- <el-col slot="title">-->
<!-- <el-col>-->
<!-- <el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>-->
<!-- <span class="text-default" style="padding-left: 1rem;">{{ title }}</span>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- <el-col>-->
<!-- <div id="contentEditor"></div>-->
<!-- </el-col>-->
<!-- <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
<!-- <el-button type="primary" :loading="loading" @click="postComment">发布</el-button>-->
<!-- </el-col>-->
<!-- </el-drawer>-->
<!-- </el-col>-->
</el-col>
<el-col v-else class="text-center" style="margin-top: 1rem;">
<el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
后发布评论
</el-col>
<el-col>
<!-- <Comment :comments="article.articleComments" :reply="reply"></Comment>-->
<comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
:post-id="routeArticleId"></comment-box>
</el-col>
</el-col>
<el-col v-else>
@ -137,7 +107,7 @@
store
.dispatch('article/fetchDetail', params)
.catch(err => error({statusCode: 404})),
// store.dispatch('comment/fetchList', {post_id: params.article_id})
store.dispatch('comment/fetchList', {post_id: params.article_id})
])
},
computed: {
@ -145,8 +115,8 @@
article: state => state.article.detail.data,
isFetching: state => state.article.detail.fetching,
isMobile: state => state.global.isMobile,
isLogin: state => state.oauth,
avatar: state => state.oauth?.avatarURL,
user: state => state.oauth,
avatar: state => state.oauth?.avatarURL
}),
hasPermissions() {
let account = this.$store.state.oauth?.nickname;
@ -156,6 +126,9 @@
}
}
return this.$store.getters.hasPermissions('blog_admin');
},
routeArticleId() {
return Number(this.$route.params.article_id)
}
},
head() {
@ -226,7 +199,7 @@
}
})
} else {
_ts.$axios.$get('/api/v1/article/' + _ts.article.idArticle + '/share').then(function (res) {
_ts.$axios.$get('/api/article/' + _ts.article.idArticle + '/share').then(function (res) {
if (res) {
_ts.$set(_ts, 'shareData', res);
_ts.$set(_ts, 'isShare', true);
@ -241,7 +214,7 @@
}
},
mounted() {
this.$store.commit('setActiveMenu', 'articleDetail')
this.$store.commit('setActiveMenu', 'articleDetail');
Vue.nextTick(() => {
const previewElement = document.getElementById("articleContent");
// //const outLineElement = document.getElementById("articleToC");
@ -258,6 +231,7 @@
Vue.VditorPreview.abcRender(previewElement);
Vue.VditorPreview.mediaRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement);
window.scrollTo(0,0);
})
}

3
pages/login.vue
View File

@ -86,7 +86,7 @@
password: _ts.user.password
}
_ts.$axios.$post('/api/v1/console/login', data).then(function (res) {
_ts.$axios.$post('/api/console/login', data).then(function (res) {
if (res) {
if (res.message) {
_ts.$message(res.message);
@ -96,6 +96,7 @@
accessToken: res.user.token,
nickname: res.user.nickname,
avatarURL: res.user.avatarUrl,
idUser: res.user.idUser,
role: res.user.weights
}
_ts.$store.commit('setAuth', auth) // mutating to store for client rendering

4
pages/register.vue
View File

@ -63,7 +63,7 @@
let data = {
email: email
}
_ts.$axios.$get('/api/v1/console/get-email-code', {
_ts.$axios.$get('/api/console/get-email-code', {
params: data
}).then(response => {
if (response.data) {
@ -82,7 +82,7 @@
password: _ts.user.password,
code: _ts.user.code
}
_ts.$axios.$post('/api/v1/console/register', data).then(function (res) {
_ts.$axios.$post('/api/console/register', data).then(function (res) {
if (res) {
_ts.$message(res.message);
if (res.flag && res.flag === 1) {

3
plugins/extend.js Normal file
View File

@ -0,0 +1,3 @@
import Vue from 'vue'
import CommentBox from '~/components/common/comment'
Vue.use(CommentBox)

5
plugins/vditor.js
View File

@ -1,4 +1,7 @@
import Vue from 'vue';
import VditorPreview from 'vditor/dist/method.min';
Vue.VditorPreview = VditorPreview
import Vditor from 'vditor';
Vue.VditorPreview = VditorPreview;
Vue.Vditor = Vditor

2
store/article.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue';
import { isBrowser } from '~/environment';
export const ARTICLE_API_PATH = '/api/v1/console'
export const ARTICLE_API_PATH = '/api/console'
const getDefaultListData = () => {
return {

117
store/comment.js Normal file
View File

@ -0,0 +1,117 @@
/**
* @file 评论数据状态 / ES module
* @module store/comment
* @author Surmon <https://github.com/surmon-china>
*/
export const COMMENT_API_PATH = '/api/article/'
export const LIKE_COMMENT_API_PATH = '/like/comment'
const getDefaultListData = () => {
return {
data: [],
pagination: {}
}
}
export const state = () => {
return {
fetching: false,
posting: false,
data: getDefaultListData()
}
}
export const mutations = {
// 请求列表
updateListFetching(state, action) {
state.fetching = action
},
updateListData(state, action) {
state.data = {
data: action.comments,
pagination: {
page: 1
}
}
},
clearListData(state) {
state.data = getDefaultListData()
},
// 发布评论
updatePostFetching(state, action) {
state.posting = action
},
updateListNewItemData(state, action) {
state.data.pagination.total += 1
state.data.data.push(action.result)
},
// 喜欢某条评论
updateLikesIncrement(state, action) {
state.data.data.find(comment => {
const isMatched = comment.id === action.id
isMatched && comment.likes++
return isMatched
})
}
}
export const actions = {
fetchList({ commit, rootState }, params = {}) {
// const { SortType } = rootState.global.constants
// 修正参数
// params = Object.assign(
// {
// page: 1,
// per_page: 88
// },
// params
// )
// const isRestart = params.page === 1
// const isDescSort = params.sort === SortType.Desc
// 清空数据
// isRestart && commit('updateListData', getDefaultListData())
commit('updateListData', getDefaultListData())
commit('updateListFetching', true)
return this.$axios
.$get(COMMENT_API_PATH + `${params.post_id}/comments`)
.then(response => {
// isDescSort && response.result.data.reverse()
commit('updateListData', response)
commit('updateListFetching', false)
})
.catch(error => commit('updateListFetching', false))
},
// 发布评论
fetchPostComment({ commit }, comment) {
commit('updatePostFetching', true)
return this.$axios
.$post(COMMENT_API_PATH, comment)
.then(response => {
commit('updateListNewItemData', response)
commit('updatePostFetching', false)
return Promise.resolve(response)
})
.catch(error => {
commit('updatePostFetching', false)
return Promise.reject(error)
})
},
// 喜欢评论
fetchLikeComment({ commit }, comment) {
return this.$axios
.$patch(LIKE_COMMENT_API_PATH, { comment_id: comment.id })
.then(response => {
commit('updateLikesIncrement', comment)
return Promise.resolve(response)
})
}
}

3
store/index.js
View File

@ -3,7 +3,8 @@ const cookieparser = process.server ? require('cookieparser') : undefined
export const state = () => {
return {
activeMenu: 'index',
oauth: null
oauth: null,
locale: 'zh_CN'
}
}