一統(tǒng)江湖的大前端（2）—— Mock.js + Node.js 如何與后端瀟灑分手

無論從哪個(gè)方面看，前端都是一個(gè)打雜的活，無論從哪個(gè)角度看，前端也都是一個(gè)小弟臉，下不了班好像也是應(yīng)該的。

Node.js

Node火起來的時(shí)候，前端就流行這樣一句話：不會(huì)Node.js的前端，是不完整的，簡單地說，Node.js將javascript能力擴(kuò)展至服務(wù)端的關(guān)鍵一步，js也是從此開始了自己無孔不入的風(fēng)騷操作，網(wǎng)上關(guān)于如何使用Node.js搭起一個(gè)本地服務(wù)器數(shù)不勝數(shù)，本篇中使用express框架來快速搭建Mock服務(wù)器。

Mock.js

Mock.js(github倉庫地址)是一個(gè)生成Mock數(shù)據(jù)（也就是虛擬數(shù)據(jù)）js庫，語法簡單明了卻非常好用，支持前端和服務(wù)端兩種環(huán)境引用,感興趣的讀者可以點(diǎn)擊上面鏈接進(jìn)行學(xué)習(xí)，官方Wiki提供了全套文檔，最多1小時(shí)就可以上手。

簡單瀏覽一下其使用方式：

# 安裝
npm install mockjs
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素,每個(gè)元素均包含id,name,description屬性
    'list|1-10': [{
        'id|+1': 1,// 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1
        'name': '@cname',//占位符語法，生成一個(gè)中文名稱
        'description|3-5':'@csentence',//占位符語法，生成3-5個(gè)中文句子
        'area':'@province',//省份占位符，將隨機(jī)生成省份名稱
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data))

前端的任務(wù)到底是什么

前端開發(fā)的本質(zhì),是數(shù)據(jù)的采集和數(shù)據(jù)的呈現(xiàn),即把用戶提交的數(shù)據(jù)準(zhǔn)確安全地發(fā)送給服務(wù)器，把服務(wù)器傳遞的數(shù)據(jù)按照設(shè)計(jì)圖展示在界面上，無論是否界面是否經(jīng)過CSS的美化，是否經(jīng)過交互設(shè)計(jì)的易用性優(yōu)化，最本質(zhì)的東西是一樣的。
換句話說，你需要做到的是后端給的數(shù)據(jù)正確時(shí)，確保將其按設(shè)計(jì)稿展示出來，后端給的數(shù)據(jù)不正確時(shí)，給出提示并盡可能不要讓腳本報(bào)錯(cuò)退出。

使用Nodejs和Mockjs搞事情

建議的做法是：使用node.js框架express快速搭建服務(wù)器，與后端人員約定好接口后，使用Mock.js在服務(wù)端生成各類型虛擬數(shù)據(jù)，前端開發(fā)人員直接對(duì)接Mock服務(wù)器

你應(yīng)該做的，是一次性將前端代碼寫到位并能夠快速定位聯(lián)調(diào)異常，然后回家睡覺，而不是漫無目的勞作和等待跟其他人互相扯皮。

1.安裝node.js

+ 安裝后打開cmd命令行，輸入`node -v`， 若正確顯示版本號(hào)則安裝成功。

附件中包含： nodeV8.9.4版本windows安裝包

2.安裝其他依賴包

• yarn(替代npm的包管理工具): npm install yarn(可選)
• express (express框架): npm install express -g
• express-generator (express項(xiàng)目生成插件): npm install express-generator -g
• mockjs(模擬數(shù)據(jù)生成庫): npm install mockjs

若安裝速度較慢，可切換npm源為cnpm或使用Yarn進(jìn)行包管理

3.生成新的express項(xiàng)目并編寫服務(wù)端

本篇力求簡單粗暴，只講使用不講express目錄結(jié)構(gòu)，感興趣的同學(xué)可自行研究

? 3.1 在指定路徑下打開命令行，輸入express mockserver,即可生成名為mockserver的項(xiàng)目

? 3.2 打開app.js文件,在 var app = express() 之后加入如下代碼，屏蔽跨域:

            app.all('*', function(req, res, next) {
                res.header("Access-Control-Allow-Origin", "*");
                res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
                next();
            });

? 3.3 仿照users.js文件的格式及其在app.js文件中的路由掛載方式（任何一個(gè)熟練地代碼搬運(yùn)工肯定看得懂），引入mockjs,生成需要的隨機(jī)數(shù)據(jù),當(dāng)接收到前端發(fā)送的請(qǐng)求時(shí),返回生成的數(shù)據(jù):

//服務(wù)端響應(yīng)代碼片段/routes/operationboard.js:
//業(yè)務(wù)邏輯為查詢系統(tǒng)告警信息列表
//node服務(wù)器啟動(dòng)后，請(qǐng)求地址為:127.0.0.1:3000/operationboard/systemwarn
//3000端口為express默認(rèn)啟動(dòng)端口

var express = require('express');
var router = express.Router();
var Mock = require('mockjs');
var Random = Mock.Random;

router.get('/systemwarn', function (req, res, next) {
  var data =Mock.mock({
      'list|20':[{
            'id|+1':1,
            'serial_number|1-100':1,
            'warn_number|1-100':1,
            'warn_name|1':['流水線編排服務(wù)異常','磁盤占用超過閾值'],
            'warn_level|1':['緊急','重要'],
            'warn_detail':'環(huán)境IP:10.114.123.12,服務(wù)名稱:XX',
            'create_time':Random.datetime(),
            'finish_time':Random.datetime(),
            'contact|4':'abc'
        }] 
      });

  res.send({
    meta : {
      message: 'success'
    },
    status:true,
    data: data.list
  })
})
module.exports = router;

瀏覽器訪問可在控制臺(tái)打出返回?cái)?shù)據(jù):

? 3.4 在mockserver項(xiàng)目目錄下打開命令行工具，輸入npm start,待服務(wù)啟動(dòng)后，打開前端頁面即可看到服務(wù)器返回的模擬數(shù)據(jù)。

? 3.5 開啟其他人員的訪問能力，其實(shí)就是在本地搭建一個(gè)服務(wù)器。

實(shí)現(xiàn)方式1——通過express工程來實(shí)現(xiàn)node服務(wù)器

將前端代碼拷貝至express項(xiàng)目目錄中public文件夾(本例中為/mockserver/public),打開命令行工具輸入ipconfig查詢本機(jī)IP，將127.0.0.1替換為本機(jī)IP，然后在瀏覽器直接訪問即可打開網(wǎng)頁。

實(shí)現(xiàn)方式2——傳統(tǒng)Apache服務(wù)器

為方便管理，直接使用開源XAMPP集成環(huán)境，安裝完成后一鍵開啟apache服務(wù)器，并將前端代碼拷貝至安裝目錄中htdoc文件夾中的子文件夾中，然后以方式1中類似的方式在瀏覽器中訪問即可，由于服務(wù)端代碼取消了跨域限制，故即使端口號(hào)不同，apache服務(wù)器中的網(wǎng)站仍然可以訪問node服務(wù)器中的接口并拿到數(shù)據(jù)。

? 3.6 最后，項(xiàng)目是大家一起做的，不是你撇清責(zé)任就完事了的，為你所做的一切提供一個(gè)可參考訪問的excel文檔并把它發(fā)給與你合作開發(fā)的后端是有禮貌的做法。