前端Json數據模擬神器mockJs使用教程

時間 2019-12-09

標籤前端 json 數據模擬神器 mockjs 使用教程欄目 JavaScript 简体版

原文原文鏈接

通常項目作法:html

<html>vue

<head>ajax

</head>json

</html>app

<script>dom

// 配置 Mock 路徑
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock' } }) // 加載 Mock,能夠吧這裏另外存爲一個文件如mock.js require(['mock'], function(Mock) { // Mock.mock(rurl, template) Mock.mock('hello.json', { 'list|1-10': [{ 'id|+1': 1, 'email': '@EMAIL', 'regexp3': /\d{5,10}/ }] })
//須要mock.js的地方處理數據 $.ajax({ url: 'hello.json', dataType: 'json' }).done(function(data, status, jqXHR) { $('<pre>').text(JSON.stringify(data, null, 4)) .appendTo('body') }) })

</script>requirejs

vue-cli項目post

//首先的install mockjs  
//main.js中,引入mockjs
require('./mock')

//mock.js中,引入mockjs
const Mock = require('mockjs')


//組建中使用mock.js

import 'mock.js' //注意路徑



示例:
mock.js

export default {
produceData
};

//vue組建中處理數據

mounted() { this.$http.post('http://localhost:8013/news') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); }