在我們日常平凡項目剛啟動時,因為背景也是剛開始開闢,我們前端每每在開闢過程當中沒有數據和接口要求的,都要造一些假數據進去或許運用mock造一些數據進去,然則如許的話每每會巧合一些沒用的代碼進去。到時刻還得刪除。
下面來引見一種 express + mock 讓前背景并行開闢。
前後須要先探討好數據格式,等等一系列細節題目,先不多說直接上代碼
app.js
'use strict';
const express = require('express');
const app = express();
// port
let NODE_PORT = process.env.PORT || 4000;
// 監聽 /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
就完成了一個簡樸的模仿數據,接下來我們完美下需求
假如我們在當地開闢中有時刻 端口差別會報跨域題目,所以我們須要在 app.js
增加一下代碼
const cors = require('cors');
app.use(cors({
origin: '*',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['conten-Type', 'Authorization']
}));
如許就能夠在別的端口接見或許別的ip內網(你同時)接見了。
假如我們須要接見一些靜態文件的能夠增加一下代碼
// './' 依據本身的需求本身設置
app.use(express.static(path.join(__dirname, './')));
// 設置nodeman熱更新nodemon
能夠根據需求本身設置
接下來繼承完美, 在開闢中我們不可能只要一個接口,所以我們在優化下。
app.js
'use strict';
const express = require('express');
const cors = require('cors');
const path = require('path');
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);
app.listen(NODE_PORT, function() {
console.log('mock效勞在' + NODE_PORT + '端口上已啟用!');
});
我們須要在同級目次增加以下文件./user/index.js
, /user/area.js
, /name-list/index.js
./user/index.js
中的內容以下
'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;
我們現在在瀏覽器中接見
我們開端模仿數據基本就完成了。
接下須要在項目中用了
先辨別環境
// 推斷是不是是當地開闢
const isDev = process.env.NODE_ENV ==='development';
// 設置 host 當地走mock 臨盆環境走相對路徑 /user/
const host = isDev ? 'http://localhost:4000' : ''
fetch(`${host}/user/`)
.then(response => {
return response.json();
})
.then(data => {
console.log(data );
});
假定我們在當地接見
數據都能拿到了, 在試一下 別的域名接見
跨域題目也OK。
我們在設置下 package.json
在你當地開闢的敕令背景增加 && node xx/aap.js
或許零丁一個敕令窗口運轉
好了引見到此。