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

✨ 作品集模块功能开发

Browse Source
This commit is contained in:
x ronger 2020-08-02 00:25:44 +08:00
parent 3535025547
commit 754637f7c6
18 changed files with 1191 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/archive/list.vue
View File

@ -18,17 +18,22 @@
<div class="text-muted article-summary-md">{{ article.articlePreviewContent }}</div>
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1" class="mr-3">
<el-avatar v-if="article.articleAuthorAvatarUrl" size="medium" :src="article.articleAuthorAvatarUrl"></el-avatar>
<el-avatar v-else size="medium" src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
<el-avatar v-if="article.articleAuthorAvatarUrl" size="medium"
:src="article.articleAuthorAvatarUrl"></el-avatar>
<el-avatar v-else size="medium"
src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
</el-col>
<el-col :xs="20" :sm="20" :xl="20">
<div>
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">{{ article.articleAuthorName }}</el-link>
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">
{{ article.articleAuthorName }}
</el-link>
<small class="d-block text-muted">{{ article.timeAgo }}</small>
</div>
</el-col>
<el-col class="text-right">
<el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span></el-link>
<el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
</el-link>
</el-col>
</el-row>
</div>

28
components/common/comment/main.vue
View File

@ -1,10 +1,7 @@
<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>
<el-col v-show="user" style="margin-top: 1rem;">
<el-col :xs="2" :sm="1" :xl="1">
<el-avatar :src="avatar"></el-avatar>
</el-col>
@ -18,7 +15,7 @@
size="40%">
<el-col slot="title">
<el-col>
<el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>
<el-avatar v-show="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>
<span class="text-default" style="padding-left: 1rem;">{{ commentTitle }}</span>
</el-col>
</el-col>
@ -31,7 +28,7 @@
</el-drawer>
</el-col>
</el-col>
<el-col v-else class="text-center" style="margin-top: 1rem;">
<el-col v-show="!user" class="text-center" style="margin-top: 1rem;">
<el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
后发布评论
</el-col>
@ -39,18 +36,18 @@
<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-avatar v-show="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar>
<el-avatar v-show="!comment.commenter.userAvatarURL" 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-col v-show="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-col v-show="!comment.commentOriginalCommentId">
<el-link @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
class="text-default">{{ comment.commenter.userNickname }}
</el-link>
@ -147,6 +144,7 @@
)
},
_initEditor (data) {
let _ts = this;
let toolbar;
if (window.innerWidth < 768) {
toolbar = [
@ -200,6 +198,9 @@
enable: this.postId ? false : true,
id: this.postId ? this.postId : '',
},
after() {
_ts.contentEditor.setValue(data.value ? data.value : '');
},
preview: {
markdown: {
toc: true,
@ -212,7 +213,7 @@
return
}
// LazyLoadImage();
Vue.Vditor.highlightRender({style:'github'}, element, document);
// Vue.Vditor.highlightRender({style:'github'}, element, document);
}
},
upload: {
@ -242,8 +243,8 @@
height: 200,
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
resize: false,
value: ''
});
_ts.contentEditor.setValue('');
}, 500);
}
},
@ -311,7 +312,6 @@
},
watch: {
isFetching(isFetching) {
console.log(isFetching)
if (isFetching) {
this.cancelCommentReply()
}

6
components/common/portfolio/list.vue
View File

@ -5,10 +5,10 @@
<el-col class="card">
<el-col class="card-body d-flex flex-column">
<el-col :span="4" class="mr-3">
<a v-if="portfolio.headImgUrl">
<a v-show="portfolio.headImgUrl">
<el-image class="card-img-top" style="height: 10rem;" :src="portfolio.headImgUrl"></el-image>
</a>
<a v-else>
<a v-show="!portfolio.headImgUrl">
<el-image class="card-img-top" style="height: 10rem;"
src="https://rymcu.com/vertical/article/1574441170152.jpg"></el-image>
</a>
@ -28,7 +28,7 @@
</el-col>
</el-col>
</el-col>
<el-col v-if="!portfolios" class="text-center">
<el-col v-show="!portfolios" class="text-center">
这里什么都没有!
</el-col>
<el-col>

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

@ -33,51 +33,54 @@
/>
</el-col>
<!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
<el-col v-if="user">
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-portfolio">创建作品集
</el-link>
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-article">发帖</el-link>
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
<el-dropdown trigger="click" @command="handleCommand">
<el-badge :value="notificationNumbers" class="item">
<el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
</el-badge>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
command="notification">{{ notification.dataSummary }}
</el-dropdown-item>
<el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-link>
<el-link :underline="false" style="margin-left: 10px;">
<el-dropdown trigger="click" @command="handleCommand">
<el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
<el-avatar v-else size="small" src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="user" style="align-items: center;">
<el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
:src="avatarURL"></el-avatar>
<el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
<el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
</el-dropdown-item>
<el-dropdown-item v-show="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
<el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
<el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-link>
</el-col>
<el-col v-else>
<nuxt-link to="/login">
<el-link :underline="false" style="margin-left: 10px;">登录</el-link>
</nuxt-link>
<nuxt-link to="/register">
<el-link :underline="false" style="margin-left: 10px;">注册</el-link>
</nuxt-link>
</el-col>
<client-only>
<el-col v-if="user">
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/portfolio/post">创建作品集
</el-link>
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/article/post">发帖
</el-link>
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
<el-dropdown trigger="click" @command="handleCommand">
<el-badge :value="notificationNumbers" class="item">
<el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
</el-badge>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
command="notification">{{ notification.dataSummary }}
</el-dropdown-item>
<el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-link>
<el-link :underline="false" style="margin-left: 10px;">
<el-dropdown trigger="click" @command="handleCommand">
<el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
<el-avatar v-else size="small" src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="user" style="align-items: center;">
<el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
:src="avatarURL"></el-avatar>
<el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
<el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
</el-dropdown-item>
<el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
<el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
<el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-link>
</el-col>
<el-col v-else>
<nuxt-link to="/login">
<el-link :underline="false" style="margin-left: 10px;">登录</el-link>
</nuxt-link>
<nuxt-link to="/register">
<el-link :underline="false" style="margin-left: 10px;">注册</el-link>
</nuxt-link>
</el-col>
</client-only>
</el-col>
</el-col>
</el-row>

4
config/api.config.js
View File

@ -3,7 +3,7 @@ import {NODE_ENV} from '../environment'
const apisMap = {
development: {
FE: 'http://localhost:3000',
BASE: 'https://rymcu.com/vertical-console',
BASE: 'http://localhost:8099/vertical',
CDN: '',
PROXY: '/proxy',
SOCKET: 'http://localhost:3000',
@ -11,7 +11,7 @@ const apisMap = {
},
production: {
FE: 'https://rymcu.com',
BASE: 'https://api.rymcu.com',
BASE: 'https://rymcu.com',
CDN: 'https://cdn.rymcu.com',
PROXY: 'https://cdn.rymcu.com/proxy',
SOCKET: 'https://rymcu.com',

2
nuxt.config.js
View File

@ -75,7 +75,7 @@ export default {
proxy: [ //proxy配置
['/api', {
target: apiConfig.BASE, //api请求路径
pathRewrite: { '^/api' : '/api/v1' } //重定向请求路径，防止路由、api路径的冲突
pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'} //重定向请求路径，防止路由、api路径的冲突
}]
],
/*

784
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -16,7 +16,7 @@
"express": "^4.17.1",
"js-cookie": "^2.2.1",
"nuxt": "^2.14.0",
"vditor": "^3.4.0"
"vditor": "^3.4.1"
},
"devDependencies": {
"@nuxtjs/proxy": "^2.0.1",

5
pages/article/_article_id.vue
View File

@ -190,10 +190,7 @@
let _ts = this;
if (item === 'edit') {
_ts.$router.push({
name: 'post-article',
query: {
id: _ts.article.idArticle
}
path: `/article/post/${_ts.article.idArticle}`
})
} else {
_ts.$axios.$get('/api/article/' + _ts.article.idArticle + '/share').then(function (res) {

362
pages/article/post/_article_id.vue Normal file
View File

@ -0,0 +1,362 @@
<template>
<el-row class="articles">
<el-col>
<el-input
v-model="articleTitle"
class="article-title"
placeholder="请输入标题"
@change="setLocalstorage('title',articleTitle)">
</el-input>
</el-col>
<el-col>
<div id="contentEditor"></div>
</el-col>
<el-col style="margin-top: 1rem;">
<el-select
style="width: 100%;"
v-model="articleTags"
multiple
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod"
placeholder="请选择文章标签"
:loading="loading"
@change="setLocalstorage('tags',articleTags)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button :loading="doLoading" @click="saveArticle">保存草稿</el-button>
<el-button type="primary" :loading="doLoading" @click="postArticle">发布</el-button>
</el-col>
<el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button type="danger" :loading="doLoading" @click="deleteArticle">删除</el-button>
<el-button v-if="articleStatus === '1'" :loading="doLoading" @click="saveArticle">保存草稿</el-button>
<el-button v-if="articleStatus === '0'" :loading="doLoading" type="primary" @click="postArticle">更新</el-button>
<el-button v-else type="primary" :loading="doLoading" @click="postArticle">发布</el-button>
</el-col>
</el-row>
</template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex';
export default {
name: "PostArticle",
validate({params, store}) {
if (typeof params.article_id === 'undefined') {
return true;
}
return params.article_id && !isNaN(Number(params.article_id))
},
fetch({store, params, error}) {
return Promise.all([
store.dispatch('article/fetchPostDetail', params)
.catch(err => error({statusCode: 404}))
])
},
computed: {
...mapState({
article: state => state.article.detail.data
})
},
data() {
return {
contentEditor: null,
tokenURL: {},
idArticle: 0,
articleTitle: '',
articleContent: '',
articleType: 0,
articleTags: [],
articleStatus: '0',
options: [],
list: [],
loading: false,
doLoading: false,
isEdit: false
}
},
methods: {
_initEditor(data) {
let _ts = this;
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.$route.params.article_id ? false : true,
id: this.$route.params.article_id ? this.$route.params.article_id : '',
},
after() {
_ts.contentEditor.setValue(data.value ? data.value : '');
},
preview: {
markdown: {
toc: true,
},
math: {
inlineDigit: 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, this.contentEditor);
}
},
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,
})
},
setLocalstorage(type) {
if (typeof arguments[0] === 'object') {
localStorage.setItem('articleTags', arguments[1]);
return
}
switch (type) {
case 'title': {
localStorage.setItem('article-title', arguments[1])
break;
}
case 'tags': {
localStorage.setItem('article-tags', arguments[1]);
break;
}
}
},
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
},
deleteArticle() {
let _ts = this;
_ts.doLoading = true;
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let id = _ts.$route.params.article_id;
_ts.$axios.$delete('/api/article/delete/' + id).then(function (res) {
if (res && res.message) {
_ts.$message(res.message);
return false;
}
localStorage.removeItem('article-title');
localStorage.removeItem('article-tags');
_ts.contentEditor.setValue('');
_ts.$router.push({
name: 'home'
})
})
}).catch(() => {
_ts.doLoading = false;
});
},
async postArticle() {
let _ts = this;
_ts.doLoading = true;
let id = _ts.$route.params.article_id;
let articleContent = _ts.contentEditor.getValue();
let articleContentHtml = await _ts.contentEditor.getHTML();
if (!(_ts.articleTitle && articleContent)) {
_ts.$message("标题/正文不能为空！");
_ts.doLoading = false;
return false;
}
let article = {
idArticle: _ts.idArticle,
articleTitle: _ts.articleTitle,
articleContent: articleContent,
articleContentHtml: articleContentHtml,
articleTags: _ts.articleTags.join(","),
articleStatus: 0
};
_ts.$axios[id ? '$put' : '$post']('/api/article/post', article).then(function (res) {
if (res) {
if (res.message) {
_ts.$message(res.message);
_ts.doLoading = false;
return false;
}
localStorage.removeItem('article-title');
localStorage.removeItem('article-tags');
_ts.contentEditor.setValue('');
_ts.$router.push({
path: `/article/${res.id}`
})
}
})
},
async saveArticle() {
let _ts = this;
_ts.doLoading = true;
let id = _ts.$route.params.article_id;
let articleContent = _ts.contentEditor.getValue();
let articleContentHtml = await _ts.contentEditor.getHTML();
if (!(_ts.articleTitle && articleContent)) {
_ts.$message("标题/正文不能为空！");
_ts.doLoading = false;
return false;
}
let article = {
idArticle: _ts.idArticle,
articleTitle: _ts.articleTitle,
articleContent: articleContent,
articleContentHtml: articleContentHtml,
articleTags: _ts.articleTags.join(","),
articleStatus: 1
};
_ts.$axios[id ? '$put' : '$post']('/api/article/post', article).then(function (res) {
if (res) {
if (res.message) {
_ts.$message(res.message);
return false;
}
localStorage.removeItem('article-title');
localStorage.removeItem('article-tags');
_ts.contentEditor.setValue('');
_ts.$router.push({
name: 'draft',
params: {
id: res.id
}
})
}
})
},
getTags() {
let _ts = this;
_ts.$axios.$get('/api/tag/tags').then(function (res) {
if (res) {
_ts.$set(_ts, 'list', res);
}
})
}
},
async mounted() {
let _ts = this;
_ts.$store.commit('setActiveMenu', 'post-article');
const responseData = await _ts.$axios.$get('/api/upload/token');
if (responseData) {
_ts.$set(_ts, 'tokenURL', {
token: responseData.uploadToken || '',
URL: responseData.uploadURL || '',
})
}
_ts.getTags();
Vue.nextTick(() => {
let articleContent = '';
if (_ts.$route.params.article_id) {
_ts.$set(_ts, 'isEdit', true);
let article = _ts.article;
_ts.$set(_ts, 'idArticle', article.idArticle);
_ts.$set(_ts, 'articleTitle', article.articleTitle);
_ts.$set(_ts, 'articleContent', article.articleContent);
_ts.$set(_ts, 'articleStatus', article.articleStatus);
_ts.$set(_ts, 'articleTags', (article.articleTags).split(','));
localStorage.setItem("article-title", article.articleTitle);
localStorage.setItem("article-tags", (article.articleTags).split(','));
articleContent = article.articleContent
} else {
_ts.$set(_ts, 'isEdit', false);
}
_ts.contentEditor = _ts._initEditor({
id: 'contentEditor',
mode: 'both',
height: 480,
placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
resize: false,
value: articleContent
});
})
}
}
</script>
<style lang="scss">
@import "~vditor/src/assets/scss/index.scss";
</style>

13
pages/index.vue
View File

@ -5,21 +5,20 @@
</template>
<script>
import ArticleList from '~/components/archive/list'
import {mapState} from 'vuex';
export default {
name: 'Index',
fetch({store}) {
return Promise.all([
store.dispatch('article/fetchList')
])
fetch() {
return this.$store.dispatch('article/fetchList', {page: 1})
},
components: {
ArticleList
},
computed: {
articles() {
return this.$store.state.article.list.data
}
...mapState({
articles: state => state.article.list.data
})
},
methods: {
currentChangeArticle(page) {

148
pages/portfolio/_portfolio_id.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<el-row class="wrapper">
<el-col>
<el-col :xs="3" :sm="3" :xl="3" class="mr-3">
<el-image :src="portfolio.headImgUrl"></el-image>
</el-col>
<el-col :xs="20" :sm="20" :xl="20">
<el-col>
<h1>{{ portfolio.portfolioTitle }}</h1>
</el-col>
<el-col style="margin-bottom: .5rem;">
<span class="text-default" style="padding-right: 1rem;">作者</span>
<el-link @click="onRouter('user', portfolio.portfolioAuthorName)" :underline="false" class="text-default">
<el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar>
{{ portfolio.portfolioAuthorName }}
</el-link>
</el-col>
<el-col style="margin-bottom: .5rem;">
<span class="text-default" style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}篇
</el-col>
<el-col style="margin-bottom: .5rem;" v-html="portfolio.portfolioDescription">
</el-col>
</el-col>
</el-col>
<el-col>
<el-col v-if="isAuthor" style="text-align: right;">
<el-col>
<el-link @click="managerPortfolio(portfolio.idPortfolio)" :underline="false" class="text-default">管理</el-link>
</el-col>
</el-col>
<el-divider><i class="el-icon-loading"></i></el-divider>
<el-col>
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
</el-col>
</el-col>
</el-row>
</template>
<script>
import {mapState} from 'vuex';
import ArticleList from "../../components/archive/list";
export default {
name: "PortfolioDetail",
components: {ArticleList},
validate({params, store}) {
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
},
fetch({store, params, error}) {
return Promise.all([
store
.dispatch('portfolio/fetchDetail', params)
.catch(err => error({statusCode: 404})),
store.dispatch('portfolio/fetchArticleList', params)
])
},
computed: {
...mapState({
portfolio: state => state.portfolio.detail.data,
articles: state => state.portfolio.articles,
isFetching: state => state.portfolio.detail.fetching,
isMobile: state => state.global.isMobile,
user: state => state.oauth,
avatar: state => state.oauth?.avatarURL
}),
isAuthor() {
let account = this.$store.state.oauth?.nickname;
if (account) {
if (account === this.portfolio.portfolioAuthor.userNickname) {
return true;
}
}
return false;
},
routePortfolioId() {
return Number(this.$route.params.portfolio_id)
}
},
head() {
return {
title: this.portfolio.portfolioTitle || 'RYMCU - 嵌入式知识学习交流平台',
meta: [
{
name: 'keywords',
content: this.portfolio.portfolioTags || 'RYMCU'
},
{
name: 'description',
content: this.portfolio.portfolioPreviewContent
},
{
name: 'site_name',
content: 'RYMCU'
},
{
name: 'url',
content: this.portfolio.portfolioPermalink
},
{
name: 'og:title',
content: this.portfolio.portfolioTitle + ' - RYMCU'
},
{
name: 'og:description',
content: this.portfolio.portfolioPreviewContent
},
{
name: 'og:site_name',
content: 'RYMCU'
},
{
name: 'og:url',
content: this.portfolio.portfolioPermalink
}
]
}
},
methods: {
onRouter(name, data) {
if (name === 'article') {
this.$router.push({
path: data
})
} else {
this.$router.push(
{
path: '/user/' + data
}
)
}
},
managerPortfolio(id) {
this.$router.push(
{
path: `/portfolio/manager/${id}`
}
)
},
currentChangeArticle(page) {
this.$store.dispatch('portfolio/fetchArticleList', {page: page, portfolio_id: this.routePortfolioId})
}
}
}
</script>
<style scoped>
</style>

14
pages/topic/_topic_uri.vue
View File

@ -7,13 +7,14 @@
<script>
import ArticleList from '~/components/archive/list'
import {mapState} from 'vuex';
export default {
name: "topicArticleList",
components: {
ArticleList
},
validate({ params, store }) {
validate({params, store}) {
if (params.topic_uri === 'news') {
return true;
}
@ -21,13 +22,13 @@
topic => topic.topicUri === params.topic_uri
)
},
fetch({ store, params }) {
fetch({store, params}) {
return store.dispatch('article/fetchList', params)
},
computed: {
articles() {
return this.$store.state.article.list.data
},
...mapState({
articles: state => state.article.list.data
}),
currentTopic() {
if (this.$route.params.topic_uri === 'news') {
return true;
@ -44,12 +45,11 @@
},
methods: {
currentChangeArticle(page) {
this.$store.dispatch('article/fetchList', {page: page,topic: this.currentTopic})
this.$store.dispatch('article/fetchList', {page: page, topic_uri: this.defaultParams.topic_uri})
}
},
mounted() {
this.$store.commit('setActiveMenu', 'topic');
console.log(this.defaultParams)
},
created() {
if (!this.currentTopic) {

2
plugins/axios.js
View File

@ -42,7 +42,7 @@ export default function ({app, $axios, store, redirect}) {
if (code === 400) {
redirect('/400');
} else {
console.log(error.data);
console.log(error, error.data);
}
})
}

67
store/article.js
View File

@ -1,7 +1,8 @@
import Vue from 'vue';
import { isBrowser } from '~/environment';
export const ARTICLE_API_PATH = '/api/console'
export const ARTICLE_API_PATH = '/api/article'
export const BASE_API_PATH = '/api/console'
const getDefaultListData = () => {
return {
@ -43,6 +44,9 @@ export const mutations = {
updateDetailData(state, action) {
state.detail.data = action.article
},
clearDetailData(state, action) {
state.detail.data = {}
},
// 更新文章阅读全文状态
updateDetailRenderedState(state, action) {
@ -57,29 +61,29 @@ export const mutations = {
export const actions = {
// 获取文章列表
fetchList({commit}, params = {}) {
// 清空已有数据
commit('updateListData', getDefaultListData())
commit('updateListFetching', true)
let data = {
page: params.page,
topicUri: params.topic_uri
page: params.page || 1,
topicUri: params.topic_uri || ''
}
console.log('data:', data)
return this.$axios
.$get(`${ARTICLE_API_PATH}/articles`, {
.$get(`${BASE_API_PATH}/articles`, {
params: data
})
.then(response => {
commit('updateListFetching', false)
commit('updateListData', response)
if (isBrowser) {
Vue.nextTick(() => {
window.scrollTo(0,0);
})
}
console.log('response', response);
commit('updateListFetching', false);
commit('updateListData', response);
})
.catch(error => commit('updateListFetching', false))
.catch(error => {
console.log(error);
commit('updateListFetching', false);
});
},
// 获取文章详情
@ -95,7 +99,42 @@ export const actions = {
commit('updateDetailFetching', true)
// commit('updateDetailData', {})
return this.$axios
.$get(`${ARTICLE_API_PATH}/article/${params.article_id}`)
.$get(`${BASE_API_PATH}/article/${params.article_id}`)
.then(response => {
return new Promise(resolve => {
commit('updateDetailData', response)
commit('updateDetailFetching', false)
resolve(response)
// delay(() => {
// resolve(response)
// })
})
})
.catch(error => {
commit('updateDetailFetching', false)
return Promise.reject(error)
})
},
// 获取文章详情
fetchPostDetail({ commit }, params = {}) {
// const delay = fetchDelay(
// isBrowser
// )
// if (isBrowser) {
// Vue.nextTick(() => {
// window.scrollTo(0, 300);
// })
// }
if (typeof params.article_id === 'undefined') {
commit('updateDetailData', getDefaultListData())
return;
}
commit('updateDetailFetching', true)
// commit('updateDetailData', {})
return this.$axios
.$get(`${ARTICLE_API_PATH}/detail/${params.article_id}`)
.then(response => {
return new Promise(resolve => {
commit('updateDetailData', response)

3
store/index.js
View File

@ -27,14 +27,17 @@ export const actions = {
auth = JSON.parse(parsed.auth)
} catch (err) {
// No valid cookie found
console.log(err);
}
store.commit('setAuth', auth)
}
const initFetchAppData = [
// 内容数据
store.dispatch('topic/fetchList'),
store.dispatch('article/fetchList')
]
return Promise.all(initFetchAppData)
}
}

138
store/portfolio.js Normal file
View File

@ -0,0 +1,138 @@
import Vue from 'vue';
import { isBrowser } from '~/environment';
export const PORTFOLIO_API_PATH = '/api/console'
const getDefaultListData = () => {
return {
portfolios: [],
pagination: {}
}
}
export const state = () => {
return {
list: {
fetching: false,
data: getDefaultListData()
},
detail: {
fetching: false,
data: {}
},
articles: {
articles: [],
pagination: {}
}
}
}
export const mutations = {
// 作品集列表
updateListFetching(state, action) {
state.list.fetching = action
},
updateListData(state, action) {
state.list.data = action
},
updateExistingListData(state, action) {
state.list.data.data.push(...action.data)
state.list.data.pagination = action.pagination
},
// 作品集详情
updateDetailFetching(state, action) {
state.detail.fetching = action
},
updateDetailData(state, action) {
state.detail.data = action.portfolio
},
updateArticleList(state, action) {
state.articles.articles = action.articles
state.articles.pagination = action.pagination
},
// 更新作品集阅读全文状态
updateDetailRenderedState(state, action) {
Vue.set(
state.detail.data,
'isRenderedFullContent',
action == null ? true : action
)
}
}
export const actions = {
// 获取作品集列表
fetchList({commit}, params = {}) {
// 清空已有数据
commit('updateListData', getDefaultListData())
commit('updateListFetching', true)
let data = {
page: params.page,
topicUri: params.topic_uri
}
return this.$axios
.$get(`${PORTFOLIO_API_PATH}/portfolios`, {
params: data
})
.then(response => {
commit('updateListFetching', false)
commit('updateListData', response)
if (isBrowser) {
Vue.nextTick(() => {
window.scrollTo(0,0);
})
}
})
.catch(error => commit('updateListFetching', false))
},
// 获取作品集详情
fetchDetail({ commit }, params = {}) {
// const delay = fetchDelay(
// isBrowser
// )
// if (isBrowser) {
// Vue.nextTick(() => {
// window.scrollTo(0, 300);
// })
// }
commit('updateDetailFetching', true)
// commit('updateDetailData', {})
return this.$axios
.$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}`)
.then(response => {
return new Promise(resolve => {
commit('updateDetailData', response)
commit('updateDetailFetching', false)
resolve(response)
// delay(() => {
// resolve(response)
// })
})
})
.catch(error => {
commit('updateDetailFetching', false)
return Promise.reject(error)
})
},
fetchArticleList({commit}, params) {
commit('updateDetailFetching', true)
return this.$axios
.$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}/articles`, {
params: {
page: params.page
}
})
.then(response => {
commit('updateArticleList', response)
commit('updateDetailFetching', false)
})
.catch(error => {
commit('updateDetailFetching', false)
})
}
}

4
store/user.js
View File

@ -11,12 +11,10 @@ export const state = () => {
fetching: false,
data: [],
articles: {
fetching: false,
articles: [],
pagination: {}
},
portfolios: {
fetching: false,
portfolios: [],
pagination: {}
}
@ -52,6 +50,7 @@ export const actions = {
})
},
fetchArticleList({commit}, params) {
commit('updateFetching', true);
return this.$axios
.$get(`${USER_API_PATH}/${params.nickname}/articles`, {
params: {
@ -67,6 +66,7 @@ export const actions = {
})
},
fetchPortfolioList({commit}, params) {
commit('updateFetching', true);
return this.$axios
.$get(`${USER_API_PATH}/${params.nickname}/portfolios`, {
params: {