關於什么是RESTful API:
《RESTful API 設計指南》—— 阮一峰
http://www.ruanyifeng.com/blo...

JSON-Server

安裝JSON-Server

npm install -g json-server //osx系統加'sudo'

新建一個文件夾同時cd它：

mkdir customer-manager && cd customer-manager

新建一個json文件，然后存放一點數據進去：

touch customers.json

{
  "customers": [
    { "id": 1, "first_name": "John", "last_name": "Smith",  "phone": "219-839-2819" }
  ]
}

開啟json-server功能

所有你要做的事情只是讓json-server指向這個customers.json就ok啦！

json-server customers.js

然后出現這個提示就ok啦！

另外，JSON-Server很酷的一點就是支持各種GET/POST/PUT/DELETE的請求。
看幾個例子：

//GET
fetch('http://localhost:3000/tasks/')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json: ', json)
  }).catch(function(ex) {
    console.log('parsing failed: ', ex)
  });


//POST
fetch('http://localhost:3000/tasks/', {
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
       "title":   "Add a blogpost about Angular2",
       "dueDate": "2015-05-23T18:25:43.511Z",
       "done": false
   })
}).then(function(response) {
      return response.json()
    }).then(function(json) {
      console.log('parsed json: ', json)
    }).catch(function(ex) {
      console.log('parsing failed: ', ex)
    });
    
    
//PUT
fetch('http://localhost:3000/tasks/1', { //在url后面指定下id就好
  method: 'put',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
       "done": true
   })
}).then(function(response) {
      return response.json()
    }).then(function(json) {
      console.log('parsed json: ', json)
    }).catch(function(ex) {
      console.log('parsing failed: ', ex)
    });
    
    
//DELETE
fetch('http://localhost:3000/tasks/1', {
method: 'delete'
}).then(function(response) {
   return response.json()
 }).then(function(json) {
   console.log('parsed json: ', json)
 }).catch(function(ex) {
   console.log('parsing failed: ', ex)
 });

JSON-Server基本就是這樣啦！接下來介紹另一個神器~

Faker.js

如果要自己瞎編API數據的話也是比較煩惱，用faker.js就可以輕松解決這個問題啦!他可以幫助你自動生成大量fake的json數據，作為后端數據~

安裝faker.js

還是使用npm來安裝faker.js:

npm install faker

現在我們用javascript生成一個包含50個客戶數據的json文件：

//customers.js
var faker = require('faker')

function generateCustomers () {
  var customers = []

  for (var id = 0; id < 50; id++) {
    var firstName = faker.name.firstName()
    var lastName = faker.name.firstName()
    var phoneNumber = faker.phone.phoneNumberFormat()

    customers.push({
      "id": id,
      "first_name": firstName,
      "last_name": lastName,
      "phone": phoneNumber
    })
  }

  return { "customers": customers }
}

 // 如果你要用json-server的話，就需要export這個生成fake data的function module.exports = generateCustomers

然后讓json-server指向這個js文件：

json-server customers.js

這樣你就可以在http://localhost:3000/customers里看到50個客戶數據了。
更多faker.js屬性可以查看這里：
https://github.com/marak/Fake...

mockjs

Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立於后端進行開發，幫助編寫單元測試。提供了以下模擬功能：

根據數據模板生成模擬數據
模擬 Ajax 請求，生成並返回模擬數據
基於 HTML 模板生成模擬數據

github:

https://github.com/nuysoft/Mock

官方網站：

http://mockjs.com/

開發手冊與使用指南：

https://github.com/nuysoft/Mock/wiki/Getting-Started

直接上代碼：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title><script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="http://mockjs.com/dist/mock.js"></script></head><body><div>
    <h1 id="mockjs">mockjs</h1></div><script type="text/javascript">

    //調用mock方法模擬數據  
  Mock.mock(
        'http://mockjs', {
            "userName" : '@name',     //模擬名稱
            "age|1-100":100,          //模擬年齡(1-100)
            "color"    : "@color",    //模擬色值
            "date"     : "@date('yyyy-MM-dd')",  //模擬時間
            "url"      : "@url()",     //模擬url
            "content"  : "@cparagraph()" //模擬文本
        }
    );
    //ajax請求
    $("#mockjs").click(function(){
        $.ajax({
            url        : "http://mockjs",    //請求的url地址
            dataType   : "json",   //返回格式為json 
            async      : true, //請求是否異步，默認為異步，這也是ajax重要特性
            data       : {},    //參數值 
            type       : "GET",   //請求方式
            beforeSend : function() {
                //請求前的處理
            },
            success: function(req) {
                //請求成功時處理
                console.log(req);
            },
            complete: function() {
                //請求完成的處理
            },
            error: function() {
                //請求出錯處理
            }
        });

    });
</script>
</body>
</html>

CommonJs規范

window.Mock = require('mockjs'window.M =window.R = window.Mock.Random;

console.log(R.email())
console.log(M({email:'@email'})) // 這種@的方式叫"占位符"。它可以用來直接生成各種數據

Mock.Random 提供的完整方法（占位符）如下：

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

 // 所有@占位符，都是R對象的演變,比如@email就是如下：
        console.log(R.email())        // basic：https://github.com/nuysoft/Mock/wiki/Basic
        console.log(M({boolean:'@boolean'}))
        console.log(M({natural:'@natural'}))
        console.log(M({integer:'@integer'}))
        console.log(M({float:'@float'}))
        console.log(M({character:'@character'}))
        console.log(M({range:'@range'}))        // date:https://github.com/nuysoft/Mock/wiki/Date
        console.log(M({date:'@date'}))
        console.log(M({time:'@time'}))
        console.log(M({datetime:'@datetime'}))
        console.log(M({now:'@now'}))        // Image：https://github.com/nuysoft/Mock/wiki/Image
        console.log(M({image:"@image()"}))
        console.log(M({image:"@image(60x60)"}))
        console.log(M({image:"@image(60x60,#000000)"}))
        console.log(M({image:"@image('200x100', '#00405d', '#FFF', 'Mock.js')"}))
        console.log(M({dataImage:'@dataImage'}))
        console.log(M({dataImage:"@dataImage('200x100')"}))
        console.log(M({dataImage:"@dataImage('200x100', 'Hello Mock.js!')"}))        // color : https://github.com/nuysoft/Mock/wiki/Color
        console.log(M({color:'@color'}))
        console.log(M({hex:'@hex'}))
        console.log(M({rgb:'@rgb'}))
        console.log(M({rgba:'@rgba'}))
        console.log(M({hsl:'@hsl'}))        // text : https://github.com/nuysoft/Mock/wiki/Text
        console.log(M({paragraph:'@paragraph'}))
        console.log(M({sentence:'@sentence'}))
        console.log(M({title:'@title'}))
        console.log(M({cparagraph:'@cparagraph'}))
        console.log(M({csentence:'@csentence'}))
        console.log(M({cword:'@cword'}))
        console.log(M({ctitle:'@ctitle'}))        // name : https://github.com/nuysoft/Mock/wiki/Name
        console.log(M({first:'@first'}))
        console.log(M({last:'@last'}))
        console.log(M({name:'@name'}))
        console.log(M({cfirst:'@cfirst'}))
        console.log(M({clast:'@clast'}))
        console.log(M({cname:'@cname'}))        // Web　：　https://github.com/nuysoft/Mock/wiki/Name
        console.log(M({url:'@url'}))
        console.log(M({domain:'@domain'}))
        console.log(M({email:'@email'}))
        console.log(M({ip:'@ip'}))
        console.log(M({tld:'@tld'}))        // address: https://github.com/nuysoft/Mock/wiki/Name
        console.log(M({region:'@region'}))
        console.log(M({province:'@province'}))
        console.log(M({city:'@city'}))
        console.log(M({county:'@county'}))
        console.log(M({zip:'@zip'}))        // helper Methods : https://github.com/nuysoft/Mock/wiki/Helper
        console.log(M({capitalize:'@capitalize(`hello`)'}))
        console.log(M({upper:'@upper(`hello`)'}))
        console.log(M({lower:'@lower(`HELLO`)'}))
        console.log(M({pick:"@pick(['a', 'e', 'i', 'o', 'u'])"}))
        console.log(M({shuffle:"@shuffle(['a', 'e', 'i', 'o', 'u'])"}))        // Miscellaneous: https://github.com/nuysoft/Mock/wiki/Miscellaneous
        console.log(M({guid:'@guid'}))
        console.log(M({id:'@id'}))
        console.log(M({increment:'@increment'}))

json-server和fakerj模擬REST API mockjs

JSON-Server

開啟json-server功能

Faker.js

安裝faker.js

mockjs

免責聲明！