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

最新推荐文章于 2024-09-03 09:01:38 发布

原创

最新推荐文章于 2024-09-03 09:01:38 发布 · 651 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue-admin-template中实现商品Mock数据的添加，包括在Mock数据下创建product模拟数据，同步更新api下的product请求，以及在应用中调用这些API，以达到在开发过程中模拟真实数据的效果。跟着步骤操作，即可轻松完成。

假設我們要添加商品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最好保持一致）