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

《一統江湖的大前端》系列是自己的前端學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了, 手機app開發 , 桌面應用開發 , 用于神經網絡人工智能的庫 , 頁面游戲 , 數據可視化 , 甚至 嵌入式開發 ，什么火就搞什么,活脫脫一個蹭熱點小能手。如果你也覺得前端的日常開發有些枯燥，不妨一起來看看前端的另一番模樣。如果喜歡本系列，請為我打Call，鼓勵我繼續寫寫寫~

為什么你總是下不了班

大部分工程化的項目為方便維護，大多都會采用前后端分離的開發方式，而前端和后端的工作基本也是同時下發的，這時前端開發人員就會很尷尬，后端在干活的時候，領導幾乎一定會讓你先做個靜態頁面看看，這時候你和后端之間可能只是約定了接口（當然也可能連接口都沒約定，那我只能祝你幸福了），并沒有數據的傳輸，沒法直接拿到填充網頁的數據，如果一次將前端代碼寫到位，那么打開網頁時輕則頁面提示沒有獲取到數據，重則直接報錯退出腳本。

而真正的問題在于靜態頁面做起來是非?？斓模灾劣谀愕念I導會認為當你把靜態頁面中加入javascript的邏輯部分的代碼后也應該非?？?而實際上邏輯部分的代碼量和聯調的工作量幾乎是寫一個靜態頁面的5-10倍。 基本上前端的一個需求的開發至少需要經歷靜態頁面——>業務邏輯+靜態數據——>業務邏輯+http請求及數據處理這幾種不同形態才能交工，那么真實的時間軸變成了這樣：

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

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

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

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

前端開發的本質,是數據的采集和數據的呈現,即把用戶提交的數據準確安全地發送給服務器，把服務器傳遞的數據按照設計圖展示在界面上，無論是否界面是否經過CSS的美化，是否經過交互設計的易用性優化，最本質的東西是一樣的。 換句話說，你需要做到的是后端給的數據正確時，確保將其按設計稿展示出來，后端給的數據不正確時，給出提示并盡可能不要讓腳本報錯退出。

建議的做法是：使用node.js框架express快速搭建服務器，與后端人員約定好接口后，使用Mock.js在服務端生成各類型虛擬數據，前端開發人員依據mock服務器數據進行頁面開發，后端人員對齊mock服務器數據為前端發來的請求返回對應的數據。這樣做的好處是，前端-傳輸-后端被分為了3個大塊，出現異常時更容易定位。

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

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

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

yarn(替代npm的包管理工具): npm install yarn(可選)

express (express框架): npm install express -g

express-generator (express項目生成插件): npm install express-generator -g

mockjs(模擬數據生成庫): npm install mockjs

若安裝速度較慢，可切換npm源為cnpm或使用Yarn進行包管理 沒有外網的同學可參考《連接華為內源npm》一文進行npm源切換

本篇力求簡單粗暴，只講使用不講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(); ????????????});

//服務端響應代碼片段/routes/operationboard.js: ????????????//業務邏輯為查詢系統告警信息列表 ????????????//node服務器啟動后，請求地址為:127.0.0.1:3000/operationboard/systemwarn ????????????//3000端口為express默認啟動端口 ????????????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':['報警類型1','報警類型2','報警類型3'], ????????????????????????'warn_level|1':['緊急','重要'], ????????????????????????'warn_detail':'環境IP:10.114.123.12,服務名稱:XX', ????????????????????????'create_time':Random.datetime(), ????????????????????????'finish_time':Random.datetime(), ????????????????????????'contact|4':'abc' ????????????????????}]? ??????????????????}); ??????????????res.send({ ????????????????meta?:?{ ??????????????????message:?'success' ????????????????}, ????????????????status:true, ????????????????data:?data.list ??????????????}) ????????????})

實現方式1——通過express工程來實現node服務器

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

實現方式2——傳統Apache服務器

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

一統江湖的大前端(1)——PPT制作庫impress.js

附件： mockserver示例工程（基于express）.rar 2.43M 下載次數：35次

附件： CSS-presentation.rar 35.65KB 下載次數：15次

附件： 前后端api接口說明文檔示例.rar 15.13KB 下載次數：33次

開發者

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。