nuxt 项目开发之jokes接口联调开发

nuxt 项目开发之jokes接口联调开发

---

导读

在上章节中，我们开发完成jokes页面的基本UI骨架，这节课我们来实现实现表单接口交互功能；在编写请求之前呢，我们需要在data中定义好我们需要的属性；首先我们需要当前页的页码page，默认显示第1页，然后总的joke数量用rows字段来代替，再接着呢，我们需要每页显示的jokes条数，默认10条；最后我们需要搜索内容searchWord，默认空 ’ '；

数据绑定

定义好属性变量后，接下来我就需要和模板中的对应模块绑定；首先我们使用v-for来遍历我们的jokes列表，再接着我们需要，初始化绑定pagination组件的默认属性

编写获取jokes数据的方法

我们在methods中定义好getJokesData方法，且用async同步模式，编写如下：

async getJokesData(){
    const config = {
        headers: {
            'Accept': 'application/json'
        },
        params:{
            _page: this.page,
            _limit: this.perPage,
            q: this.searchWord
        }
    };

    this.loading = true;
    const res = await axios.get('http://localhost:3002/jokes', config)
    // console.log(res)
    this.loading = false;
    this.jokes  = res.data.map(v => v.joke)

    // 获取最大页数量
    let totalPage = res.headers['x-total-count']
    this.rows = totalPage
}

好，我们基本完成了接口的测试，我们来到页面来测试下查询功能是否可以正常的使用；好，我们的jokes页面的接口交互功能就基本实现了；
下章节呢，我们来制作about页面，好，大家加油；