詳解express + mock讓前后臺并行開發(fā)
在我們平時項目剛啟動時,由于后臺也是剛開始開發(fā),我們前端往往在開發(fā)過程中沒有數(shù)據(jù)和接口請求的,都要造一些假數(shù)據(jù)進去或者使用mock造一些數(shù)據(jù)進去,但是這樣的話往往會偶合一些沒用的代碼進去。到時候還得刪除。
下面來介紹一種 express + mock 讓前后臺并行開發(fā)。
前后需要先商量好數(shù)據(jù)格式,等等一系列細節(jié)問題,先不多說直接上代碼
app.js
'use strict'; const express = require('express'); const app = express(); // port let NODE_PORT = process.env.PORT || 4000; // 監(jiān)聽 /user app.use('/user', function(req, res) { // 讓接口 500-1000ms 返回 好讓頁面有個loading setTimeout(() => { res.json({ status: 1, msg: '查詢成功', data: { name: '張三' } }); }, Math.random() * 500 + 500); }); app.listen(NODE_PORT, function() { console.log('mock服務在' + NODE_PORT + '端口上已啟用!'); });
接下來我們當前文件打開命令窗口運行 node app.js
然后打開瀏覽器 輸入 http://localhost:4000/user
就完成了一個簡單的模擬數(shù)據(jù),接下來我們完善下需求
如果我們在本地開發(fā)中有時候 端口不同會報跨域問題,所以我們需要在 app.js
添加一下代碼
const cors = require('cors'); app.use(cors({ origin: '*', methods: ['GET', 'POST', 'PUT', 'DELETE'], allowedHeaders: ['conten-Type', 'Authorization'] }));
這樣就可以在別的端口訪問或者別的ip內(nèi)網(wǎng)(你同時)訪問了。
如果我們需要訪問一些靜態(tài)文件的可以添加一下代碼
// './' 根據(jù)自己的需求自己配置 app.use(express.static(path.join(__dirname, './')));
// 配置nodeman熱更新
var nodemon = require('nodemon'); nodemon({ script: 'app.js', ext: 'json js', ignore: [ '.git', 'node_modules/**' ], });
接下來繼續(xù)完善, 在開發(fā)中我們不可能只有一個接口,所以我們在優(yōu)化下。
app.js
'use strict'; const express = require('express'); const cors = require('cors'); const path = require('path'); var nodemon = require('nodemon'); const userRoutes = require('./user'); const areaRoutes = require('./area'); const nameListRoutes = require('./name-list'); const app = express(); app.use(cors({ origin: '*', methods: ['GET', 'POST', 'PUT', 'DELETE'], allowedHeaders: ['conten-Type', 'Authorization'] })); // port let NODE_PORT = process.env.PORT || 4000; app.use(express.static(path.join(__dirname, './'))); app.use('/user', userRoutes); app.use('/area', areaRoutes); app.use('/nameList', nameListRoutes); nodemon({ script: 'app.js', ext: 'json js', ignore: [ '.git', 'node_modules/**' ], }); app.listen(NODE_PORT, function() { console.log('mock服務在' + NODE_PORT + '端口上已啟用!'); });
我們需要在同級目錄添加以下文件
./user/index.js
, /user/area.js
, /name-list/index.js
./user/index.js
中的內(nèi)容如下
'use strict'; const express = require('express'); const Mock = require('mockjs'); const apiRoutes = express.Router(); let random = Math.random() * 500 + 500; // 訪問 /user/ 時 apiRoutes.get('/', function(req, res) { setTimeout(() => { res.json({ status: 1, msg: '查詢成功', data: { name: '張三' } }); }, random); }); // 訪問 /user/1111 時 apiRoutes.get('/idList', function(req, res) { setTimeout(() => { res.json({ status: 1, msg: 'OK', data: Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) }); }, random); }); module.exports = apiRoutes;
我們現(xiàn)在在瀏覽器中訪問
我們初步模擬數(shù)據(jù)基本就完成了。
接下需要在項目中用了
先區(qū)分環(huán)境
// 判斷是否是本地開發(fā) const isDev = process.env.NODE_ENV ==='development'; // 設置 host 本地走mock 生產(chǎn)環(huán)境走相對路徑 /user/ const host = isDev ? 'http://localhost:4000' : '' fetch(`${host}/user/`) .then(response => { return response.json(); }) .then(data => { console.log(data ); });
假設我們在本地訪問
數(shù)據(jù)都能拿到了, 在試一下 別的域名訪問
跨域問題也OK。
我們在設置下 package.json
在你本地開發(fā)的命令后臺添加 && node xx/aap.js
或者單獨一個命令窗口運行
好了介紹到此。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Node.js中文件系統(tǒng)fs模塊的使用及常用接口
fs是filesystem的縮寫,該模塊提供本地文件的讀寫能力,基本上是POSIX文件操作命令的簡單包裝。這篇文章主要介紹了Node.js中的文件系統(tǒng)fs模塊的使用,需要的朋友可以參考下2020-03-03利用yarn實現(xiàn)一個webpack+react種子
其實以前就寫過如何使用React-router和Webpack快速構(gòu)建一個react程序。后來發(fā)現(xiàn)版本太老,于是乎最近又重新組織了下結(jié)構(gòu),使用最近發(fā)布的yarn作為包管理工具,介紹下基本安裝步驟,有需要的朋友們下面來一起看看吧。2016-10-10node使用Mongoose類庫實現(xiàn)簡單的增刪改查
Mongoose是在nodejs環(huán)境中對MongoDB數(shù)據(jù)庫操作的封裝,這篇文章主要介紹了node使用Mongoose類庫實現(xiàn)簡單的增刪改查,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11