Vue项目入门教程8-首页数据

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

请求接口函数

我们将所有的接口请求都写在src/api/目录下

在src/api/目录下新建文件article.js

import request from './request'

// 获取文章分类
export function getCategoryLists() {
  return request({
    url: '/category/lists',
    method: 'get'
  })
}

// 通过文章分类获取文章列表
export function getArticlesByCateId(data) {
  return request({
    url: '/article/lists',
    method: 'get',
    params: data
  })
}

获取文章分类

在src/views/index.vue文件中，添加获取文章分类方法

因为需要先获取文章分类，再根据分类id获取文章列表。
我们需要在调用获取文章分类的方法调用成功，拿到文章分类列表后，才能执行获取分类下列表的方法。
这里获取文章分类的方法，我们返回一个promise

import { getCategoryLists } from 'api/article'
// ...
export default {
  // ...
  methods: {
    // ...
    getCategoryLists() {
      return new Promise((resolve, reject) => {
        getCategoryLists().then(res => {
          resolve(res.data)
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}

在created这个生命周期请求文章分类数据。
需要等待拿到分类数据后才能执行获取分类下列表的方法。这里用async/await

async created() {
  this.category = await this.getCategoryLists()
},

获取分类下文章列表

在src/views/index.vue文件中，添加获取分类下文章列表方法

import { getCategoryLists, getArticlesByCateId } from 'api/article'
// ...
export default {
  // ...
  methods: {
    // ...
    getArticleLists(flag) {
      if (this.category[this.tabActive] === undefined) {
        return false
      }

      this.$vux.loading.show({ text: 'Loading' })
      let data = {
        cat_id: this.category[this.tabActive].id,
        page: this.page,
        size: this.size
      }
      getArticlesByCateId(data).then(res => {
        this.total = res.data.total
        if (res.data.list.length > 0) {
          this.page++
          console.log(res.data)
        } else {
          this.list = []
        }
        this.$vux.loading.hide()
        return true
      }).catch(() => {
        this.$vux.loading.hide()
        return false
      })
    }
  }
}

处理文章列表数据

vux的Panel组件中的内容列表list属性，是这样子的：[{title, desc, src, fallbackSrc, meta:{source,date,other}}]
我们需要把数据处理成这种形式
后端返回的数据中，图片地址是相对地址，我们需要把对应的图片服务器对应的上传图片域名添加上

不同环境下，对应的上传图片的域名可能不同，我们将其放在配置文件中配置

• 修改config/dev.env.js、config/sit.env.js、config/prod.env.js文件，添加上传图片域名

module.exports = merge(prodEnv, {
  // ...
  urlUpload: '"http://www.wmm66.com"'
})

• 修改src/main.js，将该路径绑定到Vue的原型。这样后在Vue文件中就可以通过这样使用了this.$urlUpload

Vue.prototype.$urlUpload = process.env.urlUpload

• 编辑src/views/index.vue，添加格式化处理方法

formatList(list) {
  return list.map((item) => {
    let obj = {}
    obj.title = item.title
    obj.desc = item.desc
    if (item.thumbnail !== '' && item.thumbnail !== null) {
      obj.src = this.$urlUpload + item.thumbnail
    }
    obj.url = `/article/${item.id}`
    return obj
  })
},

• 编辑src/views/index.vue文件中的getArticleLists方法，将处理后的值赋值给list

// ...
if (res.data.list.length > 0) {
  this.page++
  const formatList = this.formatList(res.data.list)
  this.list = flag === 0 ? formatList : this.list.concat(formatList)
} else {
  this.list = []
}
// ...