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

低調的D吖

于 2020-05-07 15:50:05 发布

阅读量629

点赞数

分类专栏： vue js 文章标签： vue.js

本文链接：https://blog.csdn.net/software20121216/article/details/105974178

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假設我們要添加商品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的請求&