1. 程式人生 > 實用技巧 >Mock資料:模擬資料

Mock資料:模擬資料

mockjs官網:http://mockjs.com/

mockjs官方文件:https://github.com/nuysoft/Mock/wiki/Getting-Started

  • 具體使用方法

    第一步 安裝mockjs

    npm install mockjs
    

    第二步 建立一個mock目錄生成mock資料

例如:course.js
import Mock from "mockjs";

//mock課程資料
var result=Mock.mock({
  code: 200,
  msg: "操作成功",
  data: {
    current_page: 1,
    last_page: 18,
    total: 178,
    "list|10": [
      {
        id: "@id",  //模擬id
        "price|100-200.1-2": 100, //模擬小數,在計算機中也稱浮點數
        "has_buy|1": [0, 1], //模擬狀態值,0,1,2,
        title: "@ctitle",  //模擬中文標題
        address: "@county(true)",  //模擬省市縣
        "teachers_list|1": [
          {
            course_basis_id: "@id",
            id: "@id",
            teacher_avatar: "@image('150x120', '#ff0000', '1909A')",  //模擬圖片
            teacher_name: "@cname"  //模擬中文姓名
          }
        ]
      }
    ]
  }
});


export default result;



//建立mock的入口檔案,並配置請求的介面地址,提交方式,返回的假資料
import Mock from 'mockjs'
//匯入的模擬資料
import courseData from "./course";

/**
 * Mock.mock( rurl, rtype, template )
 * rurl:請求的介面地址
 * rtype:提交方式
 * template:返回資料
 */

Mock.mock("http://www.1909A.com/coureslist", "get", courseData);

​ 第三步:將模擬的資料注入到main.js

//注入mock
import '
./mock'

第四步:在要請求的元件中請求資料

 axios.get('http://www.1909A.com/coureslist').then(res=>{
        console.log(res)
 })

  • easy-mock:基於mockjs生成線上假資料