前言

如今的一些專案都是前後端分離,在後端介面沒有出來之前,前端往往可以模擬真實的資料,等待真實介面開發完後,替換成真實的介面就可以了的,easy-mock 就是一個非常棒的視覺化模擬介面的工具,能夠快速生成模擬資料

easy-mock 集成了 swagger 與 mock.js,讓前端模擬假資料更簡單,但是官方的 easy-mock 因為開箱即用,使用者太多了的,所以 easy-mock 經常崩掉,現在官網已經掛掉了的

因為專案需要,所幸就自己在本地部署的

安裝 Redis

下載地止 https://github.com/microsoftarchive/redis/releases

解壓縮redis安裝包,進入資料夾,在該目錄終端下(可透過cmd開啟):並輸入

redis-server.exe redis.windows.conf

安裝 MongoDB

⒈ 下載 MongoDB https://www.mongodb.com/try/download/community

注意

注意自己的 redis 安裝在磁碟哪個目錄下,不要一頓下一步,下一步,最後不知道 radis 安裝在哪個盤上的

⒉ 進入安裝目錄,進入\data,建一個資料夾,取名db

⒊ 啟動Mongodb

在 redis 目下的\bin下開啟cmd,即輸入

mongod --dbpath D:\software\mongodb\data\db (路徑根據個人安裝情況而定)

注意

--dbpath 是指定資料庫存放目錄，要注意 dbpath 前有兩個“-”

⒋ 在瀏覽器輸入：http://localhost:27017/，你會看到

It looks like you are trying to access MongoDB over HTTP on the native driver port.

如果看到這樣,表示 redis 配置成功

部署 easy-mock

因為用的是大搜車技術團隊,直接克隆倉庫到本地部署即可

⒈ 克隆 easy-mock 倉庫並安裝依賴包

$ git clone https://github.com/easy-mock/easy-mock.git$ cd easy-mock && npm install

⒉ 更改easy-mock\config資料夾下的配置檔案default.json,將 host 改為localhost

{  "port": 7300,  "host": "localhost",  // 需要將這裡更改為localhost  "pageSize": 30,  "proxy": false,  "db": "mongodb://localhost/easy-mock",  "unsplashClientId": "",  "redis": {    "keyPrefix": "[Easy Mock]",    "port": 6379,    "host": "localhost",    "password": "",    "db": 0  },  "blackList": {    "projects": [],    "ips": []  },  "rateLimit": {    "max": 1000,    "duration": 1000  },  "jwt": {    "expire": "14 days",    "secret": "shared-secret"  },  "upload": {    "types": [".jpg", ".jpeg", ".png", ".gif", ".json", ".yml", ".yaml"],    "size": 5242880,    "dir": "../public/upload",    "expire": {      "types": [".json", ".yml", ".yaml"],      "day": -1    }  },  "ldap": {    "server": "",    "bindDN": "",    "password": "",    "filter": {      "base": "",      "attributeName": ""    }  },  "fe": {    "copyright": "",    "storageNamespace": "easy-mock_",    "timeout": 25000,    "publicPath": "/dist/"  }}

注意

要在 Redis 和 MongoDB 已經啟動了的條件下部署 easy-mock

⒈ 啟動 redis

進入D:\software\redis資料夾,並在終端 cmd 下中輸入

redis-server.exe redis.windows.conf

⒉ Mongo DB 啟動方式

在MongoDb中的D:\software\mongodb\bin下開啟cmd,輸入

mongod --dbpath D:\software\mongodb\data\db (路徑根據個人安裝情況而定)

⒊ 在啟動redis和MongoDB之後,啟動easy-mock

npm run dev

⒋ 在瀏覽器中輸入http://localhost:7300,即可成功

或許會遇到的問題

如果無法訪問網站,打不開,貌似是因為 node 版本太高,網上說替換成 node 8.9.0 版本就能部署成功

所以下載本地的 node,重新安裝 node 8.9.0 版本的

下載安裝 node-v8.9.0 版本(opens new window)

但我是一路下來,沒有遇到版本問題,估計這個問題已經被官方給修復了的,如果啟動不起來,在排除 redis 和 mongoDB 沒有問題,如果 easy-mock 依然啟動不起來,那就嘗試替換 node 版本的

總結

當你本地部署 easy-mock 後,就可以愉快的 mock 資料了,整個過程非常 happy,在也不怕奔潰了的,但是這種本地部署,有一個弊端就是

只能在本地玩玩,如果想要支援線上的,那麼可以將 easy-mock 部署到伺服器上的,可以部署在內網,也可以部署支援外網。