系列文章:
请求接口函数
我们将所有的接口请求都写在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 = []
}
// ...
发表评论