Mock.js & Axios & Vue.js 模拟后端 API 交互（有参/分页） #58

JasonWu73 · 2020-02-21T03:20:19Z

index.html：

<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Axios & Mock.js</title>

  <style>
    .page a {
      margin-left: 15px;
    }

    .page a.active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <dl>
    <dt>图书列表</dt>
    <dd class="page">
      <a href="javascript:void(0);"
         v-for="num in totalPage"
         :class="{active: currentPage === num}"
         @click="currentPage = num"
      >第{{num}}页</a>
    </dd>
    <dd v-for="book in bookList">
      {{book.row_index}}. 《{{book.book_name}}》 - CN¥{{book.book_price}} - {{book.book_press}}
    </dd>
  </dl>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script src="./js/api.js"></script>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      bookList: [],
      bookTotal: 0,
      pageSize: 10,
      currentPage: 1
    },
    created() {
      this.getBookList();
    },
    beforeUpdate() {
      this.getBookList();
    },
    computed: {
      totalPage() {
        // 每页 `pageSize` 条，有小数，则+1
        // 若列表长度为0，则显示1
        return Math.ceil(this.bookTotal / this.pageSize) || 1;
      }
    },
    methods: {
      getBookList() {
        axios.get(`/books?page=${this.currentPage}&page_size=${this.pageSize}`)
        .then(response => {
          const {book_list: bookList, total} = response.data.result;
          this.bookList = bookList;
          this.bookTotal = total;
        });
      }
    }
  });
</script>
</body>
</html>

./js/api.js：

const baseUrl = 'https://www.wuxianjie.net';
axios.defaults.baseURL = baseUrl;

const getValueFromUrl = (url, paramName, defaultValue) => {
  const queryStr = url.split('?');
  if (queryStr.length > 1) {
    const paramArray = queryStr[1].split('&');
    let keyValArray;
    for (let i = 0; i < paramArray.length; ++i) {
      keyValArray = paramArray[i].split('=');
      let key = keyValArray[0];
      let value = keyValArray[1] || null;
      if (key === paramName) {
        return value;
      }
    }
  }
  return defaultValue;
};

const getDataByPaging = (pageNumber, pageSize, data, key) => {
  return {
    [key]: data[key].slice((pageNumber - 1) * pageSize, pageNumber * pageSize),
    total: data[key].length
  };
};

const mockResponseResult = (data) => {
  return {
    'error_code': 0,
    'message': 'SUCCESS',
    result: data
  };
};

const pressList = ['人民邮电出版社','清华大学出版社','机械工业出版社','电子工业出版社'];

const bookListTemplate = {
  'book_list|50': [
    {
      'row_index|+1': 1,
      'book_id|+1': 101,
      'book_name': '@ctitle',
      'book_price|50-100.1-2': 0,
      'book_press|1': pressList,
      'book_time': '@date("yyyy-MM-dd")'
    }
  ]
};

const mockData = Mock.mock(bookListTemplate);

Mock.mock(new RegExp(`${baseUrl}/books.*`), 'get', (options) => {
  const pageNumber = getValueFromUrl(options.url, 'page', 1),
    pageSize = getValueFromUrl(options.url, 'page_size', 10);
  const bookList = getDataByPaging(pageNumber, pageSize, mockData, 'book_list');
  return mockResponseResult(bookList);
});

The text was updated successfully, but these errors were encountered:

JasonWu73 added the 研究胡乱尝试 label Feb 21, 2020

JasonWu73 changed the title ~~Mock.js & Axios.js 前端 HTTP API 开发套路~~ Mock.js & Axios 前端 HTTP API 开发套路 Feb 23, 2020

JasonWu73 changed the title ~~Mock.js & Axios 前端 HTTP API 开发套路~~ Mock.js & Axios & Vue.js 模拟后端 API 交互（有参/分页） Jun 21, 2020

JasonWu73 added 参考示例程序 and removed 研究胡乱尝试 labels Jun 21, 2020

JasonWu73 mentioned this issue Jun 28, 2020

Vue.js 组件入门 #132

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mock.js & Axios & Vue.js 模拟后端 API 交互（有参/分页） #58

Mock.js & Axios & Vue.js 模拟后端 API 交互（有参/分页） #58

JasonWu73 commented Feb 21, 2020 •

edited

Mock.js & Axios & Vue.js 模拟后端 API 交互（有参/分页） #58

Mock.js & Axios & Vue.js 模拟后端 API 交互（有参/分页） #58

Comments

JasonWu73 commented Feb 21, 2020 • edited

JasonWu73 commented Feb 21, 2020 •

edited