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

系列文章:

请求接口函数

我们将所有的接口请求都写在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 }) } } }

处理文章列表数据

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

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

  • 修改config/dev.env.jsconfig/sit.env.jsconfig/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 = [] } // ...

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: