Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 首页

11.4 首页

公共文章列表

请求方法：GET

请求地址：/api/articles

查询参数：

• 按标签筛选
  • ?tag=AngularJS
• 按作者筛选
  • ?author=jake
• 按用户筛选
  • ?favorited=jake
• 文章分页数（默认20）
  • ?limit=20
• 文章偏移/跳跃数（默认0）
  • ?offset=0

api/article.js

import request from '@/utils/request'

// 获取公共文章列表
export const getArticles = params => {
   
  return request({
   
    method: 'GET',
    url: '/api/articles',
    params
  })
}

pages/home/index.vue

import {
    getArticles } from '@/api/article'

export default {
   
  name: 'HomeIndex',
  async asyncData () {
   
    const {
    data } = await getArticles()
    console.log(data)
  }
}

export default {
   
  name: 'HomeIndex',
  async asyncData () {
   
    const {
    data } = await getArticles()
    return {
   
      articles: data.articles,
      articlesCount: data.articlesCount
    }
  }
}

遍历数据：

<div
  class="article-preview"
  v-for="article in articles"
  :key="article.slug"
>
  <div class="article-meta">
    <!-- <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a> -->
    <nuxt-link :to="{
   
      name: 'profile',
      params: {
   
        username: article.author.username
      }
    }">
      <img :src="article.author.image" />
    </nuxt-link>
    <div class="info">
      <!-- <a href="" class="author">Eric Simons</a> -->
      <nuxt-link class="author" :to="{
   
        name: 'profile',
        params: {
   
          username: article.author.username
        }
      }">
        {
   {
    article.author.username }}
      </nuxt-link>
      <span class="date">{
   {
    article.createdAt }}</span>
    </div>
    <button class="btn btn-outline-primary btn-sm pull-xs-right"
      :class="{
   
          active: article.favorited
        }">
      <i class="ion-heart"></i> {
   {
    article.favoritesCount }}
    </button>
  </div>
  <!-- <a href="" class="preview-link"> -->
  <nuxt-link 
    class="preview-link" 
    :to="{
   
      name: 'article',
      params: {
   
        slug: article.slug
      }
    }">
    <h1>{
   {
    article.title }}</h1>
    <p>{
   {
    article.description }}</p>
    <span>Read more...</span>
  <!-- </a> -->
  </nuxt-link>  
</div>

列表分页-分页参数的使用

pages/home/index.vue

export default {
   
  name: 'HomeIndex',
  async asyncData () {
   
    const page = 1
    const limit = 10
    const {
    data } = await getArticles({
   
      // 文章分页数（默认20）
      limit,
      // 文章偏移/跳跃数（默认0）
      offset: (page - 1) * limit
    })
    return {
   
      articles: data.articles,
      articlesCount: data.articlesCount
    }
  }
}

列表分页-页码处理

添加页码，页码改变获取对应页码的数据：pages/home/index.vue

<!-- 分页列表 -->
<nav>
  <ul class="pagination">

    <li class="page-item active">

      <a class="page-link ng-binding" href="">1</a>

    </li>
  </ul>
</nav>

export default {
   
  name: 'HomeIndex',
  async asyncData ({
    query }) {
   
    const page = Number.parseInt(query.page || 1)
    const limit = 10
    const {
    data } = await getArticles({
   
      // 文章分页数（默认20）
      limit,