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页面,好,大家加油;

你可能感兴趣的:(nuxt)