目前想要做出下圖 list 的部分 ⬇︎


<br>

## 先來看 mock.js 是啥東西
生成隨機數據，攔截 Ajax 請求，如果後端接口還未開發完成，我們自己手動模擬後端接口返回隨機數據完成交互功能。

* 採用json數據模擬，生成數據比較繁瑣，也比較有局限性，沒辦法達到增刪改查
* 採用mockJs進行模擬數據，可以模擬各種場景（get、post）生成接口，並且隨機生成所需數據，還可以對數據進行增刪改查

<br>

## 怎麼開始呢？

* 在項目中安裝 mock

npm install mockjs

* 在項目中新建mock文件夾，在mock文件夾中創建index.js

//引入 mock 模塊
import Mock from 'mockjs';

* 將mock文件夾的index.js文件在main.js中導入

import Vue from 'vue'
import App from './App.vue'
import './mock/index.js'


new Vue({
  render: h => h(App),
}).$mount('#app')

<br>

## 專案中怎麼設定呢？

開啟一個資料叫做 explorer.js

import { Random } from 'mockjs'

const explorerPurchase = {
  url: '/api/explorer/purchase',
  method: 'get',
  statusCode: 200,
  response: (request) => {
    const { itemsPerPage } = request.query
    if (!itemsPerPage) {
      return {
        data: {},
        message: 'itemsPerPage is required',
      }
    }
    return seedPurchase(itemsPerPage)
  },
}

const seedPurchase = (itemsPerPage) => {
  const data = []
  for (let i = 0; i < itemsPerPage; i++) {
    data.push({
      // 設定假資料
      title: Random.ctitle(5, 10),
      credit_card: Random.string('number', 12),
    })
  }
  return data
}

export default [explorerPurchase]

<br>

在這之後，就可以該頁面 <script></script> 串接假資料囉～

import { http } from '@/http'

const { data } = await http('GET', '/api/explorer/purchase', {
  itemsPerPage: 5,
})

console.log(data)

<br>

:::success
[npm](https://www.npmjs.com/package/mockjs?activeTab=readme) 下載

[官網](http://mockjs.com/) 閱覽

[更詳細的文章](https://juejin.cn/post/6953199521031520292) 閱覽
:::