使用node.js + json-server + mock.js 搭建本地開發mock數據服務

時間 2019-12-07

標籤使用 node.js node json server mock.js mock 搭建本地開發數據服務欄目 Node.js 简体版

原文原文鏈接

在開發過程當中，先後端不管是否分離，接口多半是滯後於頁面開發的。因此創建一個REST風格的API接口，給前端頁面提供虛擬的數據，是很是有必要的。對比過多種mock工具後，我最終選擇了使用 json server 做爲工具，由於它足夠簡單，寫少許數據，便可使用。也由於它足夠強大，支持CORS和JSONP跨域請求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等。下面我將詳細介紹如何搭建mock數據服務。 javascript

1、Node.js安裝及環境配置

首先須要在電腦上安裝nodejs環境，建議使用最新版本，具體的操做過程請查閱Node.js安裝及環境配置之Windows篇 css

2、創建前端項目

創建本身的前端項目，如wx.web，在cmd命令行，進入項目根目錄下， html

執行命令，D:\工做相關\新建文件夾\front-end project\wx.web > npm init；命令執行完成後，會在項目根目錄，能夠看到package.json文件；而後，再按照本身的編碼風格，命名前端項目結構目錄，前端

3、使用 JSON Server 搭建 Mock 服務器

全局安裝json server，關於json-server相關的api，請閱讀json-server官方文檔 java

npm install json-server –g node

安裝完成後能夠用 json-server -h 命令檢查是否安裝成功，成功後會出現 jquery

在項目目錄下，增長mock文件目錄，並新建db.js用於模擬數據服務 git

安裝mock.js，關於mock.js相關的api，請先用15分鐘閱讀mockjs官方文檔 github

npm install mockjs –save web

安裝完成後的項目目錄結構爲

在上一步新建的db.js文件中，寫入以下代碼

var Mock = require('mockjs');
var Random = Mock.Random;
module.exports = function() {
var data = {
news: []
};
var images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6)));
for (var i = 0; i < 100; i++) {
var content = Random.cparagraph(0,10);
data.news.push({
id: i,
title: Random.cword(8,20),
desc: content.substr(0,40),
tag: Random.cword(2,6),
views: Random.integer(100,5000),
images: images.slice(0,Random.integer(1,3))
})
}
return data
}

運行mock服務,

json-server mock/db.js;

運行成功後,會顯示以下截圖：

並可在瀏覽器地址欄輸入: http://localhost:3000/

至此，mock數據服務，已經搭建成功，在代碼中的使用也很簡單，如下給出代碼使用示例:

<!DOCTYPE html>
<html>
<head>
<title>首頁</title>
<meta charset="utf-8">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
.hello {
color: #428bca;
}
</style>
</head>
<body>
<h3>這是index頁面</h3>
<span class="hello">你能夠點擊這裏</span>
<script type="text/javascript">
$(function () {
var contextPath = 'http://localhost:3000';
$('.hello').on('click', function () {
$.ajax({
type: 'get',
url: contextPath + '/news',
success: function (data) {
console.log(JSON.stringify(data));
},
error: function (data) {
console.log("出錯了:" + JSON.stringify(data));
}
})
})
})
</script>
</body>
</html>