Skip to content

R
realworld-nuxtjs
Commit 8b37bd22 authored by 尚斌杰's avatar 尚斌杰
Browse files
Options

feat(plugins):增加请求拦截器和dayjs 两个plugins

parent 8082b6aa
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 38 deletions
api/article.js
View file @ 8b37bd22
import request from '@/utils/request' import { request } from '@/plugins/request'
// 获取公共文章列表 // 获取公共文章列表
export const getArticles = params => { export const getArticles = params => {
...@@ -7,4 +7,13 @@ export const getArticles = params => { ...@@ -7,4 +7,13 @@ export const getArticles = params => {
url: '/api/articles', url: '/api/articles',
params params
}) })
}
// 获取关注文章列表
export const getFeedArticles = params => {
return request({
method: 'GET',
url: '/api/articles/feed',
params
})
} }
\ No newline at end of file
api/tag.js 0 → 100644
View file @ 8b37bd22
import { request } from '@/plugins/request'
// 获取tag
export const getTags = () => {
return request({
method: 'GET',
url: '/api/tags'
})
}
\ No newline at end of file
api/user.js
View file @ 8b37bd22
import request from '@/utils/request' import { request } from '@/plugins/request'
// login // login
export const login = data => { export const login = data => {
......
nuxt.config.js
View file @ 8b37bd22
...@@ -53,5 +53,9 @@ module.exports = { ...@@ -53,5 +53,9 @@ module.exports = {
// component: resolve(__dirname, 'pages/404.vue') // component: resolve(__dirname, 'pages/404.vue')
// }) // })
} }
} },
plugins: [
'~/plugins/request',
'~/plugins/dayjs'
]
} }
\ No newline at end of file
package.json
View file @ 8b37bd22
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"cookieparser": "^0.1.0", "cookieparser": "^0.1.0",
"dayjs": "^1.10.4",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"nuxt": "^2.15.4" "nuxt": "^2.15.4"
} }
......
pages/home/index.vue
View file @ 8b37bd22
...@@ -14,11 +14,57 @@ ...@@ -14,11 +14,57 @@
<div class="col-md-9"> <div class="col-md-9">
<div class="feed-toggle"> <div class="feed-toggle">
<ul class="nav nav-pills outline-active"> <ul class="nav nav-pills outline-active">
<li class="nav-item"> <li v-if="user" class="nav-item">
<a class="nav-link disabled" href="">Your Feed</a> <nuxt-link
class="nav-link"
:class="{
active: tab === 'your_feed'
}"
exact
:to="{
name: 'home',
query:{
tab:'your_feed'
}
}"
>
Your Feed
</nuxt-link >
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="">Global Feed</a> <nuxt-link
class="nav-link"
:class="{
active: tab === 'global_feed'
}"
exact
:to="{
name: 'home',
query:{
tab:'global_feed'
}
}"
>
Global Feed
</nuxt-link>
</li>
<li class="nav-item" v-if="tag">
<nuxt-link
class="nav-link"
:class="{
active: tab === 'tag'
}"
exact
:to="{
name: 'home',
query:{
tab: 'tag',
tag
}
}"
>
#{{tag}}
</nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -48,7 +94,7 @@ ...@@ -48,7 +94,7 @@
}"> }">
{{ article.author.name }} {{ article.author.name }}
</nuxt-link> </nuxt-link>
<span class="date">{{ article.createdAt }}</span> <span class="date">{{ article.createdAt | date('MMM DD YYYY') }}</span>
</div> </div>
<button <button
class="btn btn-outline-primary btn-sm pull-xs-right" class="btn btn-outline-primary btn-sm pull-xs-right"
...@@ -88,7 +134,9 @@ ...@@ -88,7 +134,9 @@
:to="{ :to="{
name:'home', name:'home',
query: { query: {
page: item page: item,
tag: $route.query.tag,
tab
} }
}" }"
> >
...@@ -105,14 +153,19 @@ ...@@ -105,14 +153,19 @@
<p>Popular Tags</p> <p>Popular Tags</p>
<div class="tag-list"> <div class="tag-list">
<a href="" class="tag-pill tag-default">programming</a> <nuxt-link
<a href="" class="tag-pill tag-default">javascript</a> :to="{
<a href="" class="tag-pill tag-default">emberjs</a> name:'home',
<a href="" class="tag-pill tag-default">angularjs</a> query:{
<a href="" class="tag-pill tag-default">react</a> tag,
<a href="" class="tag-pill tag-default">mean</a> tab: 'tag'
<a href="" class="tag-pill tag-default">node</a> }
<a href="" class="tag-pill tag-default">rails</a> }"
class="tag-pill tag-default"
v-for="(tag,index) in tags" :key="index"
>
{{tag}}
</nuxt-link>
</div> </div>
</div> </div>
</div> </div>
...@@ -123,27 +176,46 @@ ...@@ -123,27 +176,46 @@
</div> </div>
</template> </template>
<script> <script>
import { getArticles } from '@/api/article' import { getArticles, getFeedArticles } from '@/api/article'
import { getTags } from '@/api/tag'
import { mapState } from 'vuex'
export default { export default {
name:'Home', name:'Home',
watchQuery:['page'], watchQuery:['page', 'tag', 'tab'],
async asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) { async asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
// 页面数据
const page = Number.parseInt(query.page || 1) const page = Number.parseInt(query.page || 1)
const limit = 10 const limit = 10
const {data} = await getArticles({ const { tag } = query
limit, const tab = query.tab || 'global_feed'
offset:(page-1) * limit const loadArticles = store.state.user && tab === 'your_feed' ? getFeedArticles : getArticles
})
// console.log(data.articles) const [articlesRes , tagRes] = await Promise.all([
loadArticles({
limit,
offset:(page-1) * limit,
tag
}),
getTags()
])
const { articles, articlesCount } = articlesRes.data
const { tags } = tagRes.data
// 标签列表
return { return {
articles: data.articles, articles,
articlesCount: data.articlesCount, articlesCount,
tags: tags.filter(item=>item.replace(/\p{C}+/u, "")),
limit, limit,
page page,
tag,
tab
} }
}, },
computed:{ computed:{
...mapState(['user']),
totalPage(){ totalPage(){
return Math.ceil(this.articlesCount / this.limit) return Math.ceil(this.articlesCount / this.limit)
} }
......
plugins/dayjs.js 0 → 100644
View file @ 8b37bd22
import Vue from 'vue'
import dayjs from 'dayjs'
Vue.filter('date', (value, format = 'YYYY-MM-DD')=>{
return dayjs(value).format(format)
})
\ No newline at end of file
plugins/request.js 0 → 100644
View file @ 8b37bd22
import axios from 'axios'
export const request = axios.create({
baseURL:'https://conduit.productionready.io'
})
// 通过插件机制获取到上下文对象
export default ({ store }) =>{
// 请求拦截器
request.interceptors.request.use(function(config){
const {user} = store.state
if(user && user.token){
config.headers.Authorization = `Token ${user.token}`
}
return config
}, function(error){
// 如果请求失败（此时请求还没发出去）就会进入这里
return Promise.reject(error)
})
// 响应拦截器
}
utils/request.js deleted 100644 → 0
View file @ 8082b6aa
import axios from 'axios'
const request = axios.create({
baseURL:'https://conduit.productionready.io'
})
// 请求拦截器
// 响应拦截器
export default request
\ No newline at end of file
yarn.lock
View file @ 8b37bd22
...@@ -2812,6 +2812,11 @@ cyclist@^1.0.1: ...@@ -2812,6 +2812,11 @@ cyclist@^1.0.1:
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
dayjs@^1.10.4:
version "1.10.4"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
de-indent@^1.0.2: de-indent@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment