第十五课 编写信息列表页面

一、制作列表接口

server-api/mocks/booinfolist.js

/**
 * 信息列表接口
 *
 * @url bookinfolist?currentPage=1&pageSize=1
 *
 */

module.exports = function (req) {
  
  var currentPage = req.query.currentPage; 
  var pageSize = req.query.pageSize;


  if (currentPage || pageSize) {
      return {
        code: 200,
        flag: true,
        message: "查询成功",
        "data|10": [{
          "id|+1": 1,
          'bookISBN': '123123',
          "bookName": "@ctitle(4,12)",
          "author": "@cname",
          "press|1": ['清华大学出版社', '北京大学出版社', '北京理工大学出版社', '人民邮电出版社'],
          "publicationdate": '@date(yyy-mm-dd)',
          "price": "@float(10,99,0,1)",
          "quantity|50-1000": 1,
          "bookType|1": ['1', '2', "3", "4"]
        }]
      }
  }

  return {
    code: 200,
    flag: true,
    message: "查询成功",
    "data|10": [{
      "id|+1": 1,
      'bookISBN': '123123',
      "bookName": "@ctitle(4,12)",
      "author": "@cname",
      "press|1": ['清华大学出版社', '北京大学出版社', '北京理工大学出版社', '人民邮电出版社'],
      "publicationdate": '@date(yyy-mm-dd)',
      "price": "@float(10,99,0,1)",
      "quantity|50-1000": 1,
      "bookType|1": ['1', '2', "3", "4"]
    }]
  }
};

二、 编写调用列表接口API

src/api/bookinfo.js

import myaxios from "@/utils/myaxios"

export default{
    getBookInfoList(){
        return myaxios({
            url:'bookinfolist',
            method:'get'
        })
    }
}

三、 在view/book/bookinfo.vue中测试请求接口

<template>
    <div class="bookinfo">
        信息列表页面
    </div>
</template>

<script>
import bookinfoApi from "@/api/bookinfo"
export default {
    created(){
        this.fetchData();
    },
    methods:{
        fetchData(){
            let data = {
                pageSize:this.pageSize,
                currentPage:this.currentPage
            }
            bookinfoApi.getBookInfoList(data).then(response=>{
                const resp = response.data.data;
                this.bookinfolist = resp;
            })
        }
    }
}
</script>