vue-admin-template 新手學習（七） 本地/後端 mock 數據

假設我們要添加商品mock數據  達到如下效果

1.我們需要在mock數據下添加product的模擬數據

import Mock from 'mockjs'

const data = Mock.mock({
  'items|10': [{
    id: '@id',
    name: '@sentence(1, 5)',
    typeName: 'HUAWEI@integer(1, 30)',
    price: '@integer(1000, 5000)',
    salePrice: '@integer(2000, 6000)',
    createTime: '@datetime',
    updateTime: '@datetime',
    pageviews: '@integer(300, 5000)'
  }]
})

export default [
  {
    url: '/vue-admin-template/products/list',
    type: 'get',
    response: config => {
      const items = data.items
      return {
        code: 20000,
        data: {
          total: items.length,
          items: items
        }
      }
    }
  }
]

2.在api下添加product的請求（mock數據的js和api的js最好保持一致）

 

 

 

3.在使用的地方引用並調用api

fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }

 

這樣就OK了 加油每一天

https://github.com/null2014/shopsmanagement