使用nuxt,express,mysql,nginx创建个人博客系列-21
234
2020-01-24 18:37
10 个月前
根据文章标签查找文章
首先我们创建查找文章标签路由
目录:pages/tags/_id.vue
<template>
<section class="container" v-if="result">
<div class="content-wrap clearfix">
<div class="content">
<article class="excerpt clearfix"
:class="{'excerpt-img':item.articles_img}"
v-for="(item,index) in result.data.articles"
:key="item+index">
<div class="excerpt-img-box" v-if="item.articles_img">
<nuxt-link :to="`/articles/${item.id}`" class="excerpt-img-href" >
<img :src="item.articles_img" alt="">
</nuxt-link>
</div>
<header>
<nuxt-link class="label" :to="`/category/${item.category_id}`">{{item.category_name}}</nuxt-link>
<h2><nuxt-link :to="`/articles/${item.id}`">{{item.title}}</nuxt-link></h2>
</header>
<p class="note">{{item.introduction}}</p>
</article>
<div class="pagination" v-if="result.data.pageCount>1">
<ul>
<li v-for="(item,index) in result.data.pageCount" :key="item+index">
<nuxt-link v-if="item != result.data.curPage" :to="{name:'articles',query:{page:item}}" >{{item}}</nuxt-link>
<span v-else>{{item}}</span>
</li>
</ul>
</div>
</div>
</div>
<my-right :tags="result.data.tags"></my-right>
</section>
</template>
<script>
import axios from "~/plugins/axios";
import MyRight from "~/components/Right.vue";
export default {
asyncData({ params, query, error, redirect }) {
if (!params.id || params.id==0) {
redirect("/");
return { result: null };
} else {
/、获取所有列表,不过加多个tag_id参数,就是获取有此标签的文章
let url = `/api/allData?tag_id=${params.id}`;
if (query.page) {
url = `${url}&page=${+query.page?query.page:1}`;
}
return axios
.get(url)
.then(resp => {
let { data } = resp;
return { result: data };
})
.catch(e => {
error({ statusCode: 500, message: `${e}` });
});
}
},
components: {
MyRight
}
};
</script>
至此这一系列文章开发全部完成。当然这里面还有很多问题,欢迎大家来讨论如何优化实现。下面我会讲一下如何通过pm2部署到线上,以及把项目上传到gitee(码云上面)