使用nuxt,express,mysql,nginx创建个人博客系列-21

根据文章标签查找文章

首先我们创建查找文章标签路由
目录：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(码云上面)

上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-20