快捷導(dǎo)航

詳解express + mock讓前后臺(tái)并行開發(fā)

更新時(shí)間：2018年06月06日 10:03:47 作者：kanshouji911

這篇文章主要介紹了詳解express + mock讓前后臺(tái)并行開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在我們平時(shí)項(xiàng)目剛啟動(dòng)時(shí)，由于后臺(tái)也是剛開始開發(fā)，我們前端往往在開發(fā)過程中沒有數(shù)據(jù)和接口請求的，都要造一些假數(shù)據(jù)進(jìn)去或者使用mock造一些數(shù)據(jù)進(jìn)去，但是這樣的話往往會(huì)偶合一些沒用的代碼進(jìn)去。到時(shí)候還得刪除。

下面來介紹一種 express + mock 讓前后臺(tái)并行開發(fā)。

前后需要先商量好數(shù)據(jù)格式，等等一系列細(xì)節(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 返回 好讓頁面有個(gè)loading
 setTimeout(() => {
 res.json({
  status: 1,
  msg: '查詢成功',
  data: {
   name: '張三'
  }
 });
 }, Math.random() * 500 + 500);
});

app.listen(NODE_PORT, function() {
 console.log('mock服務(wù)在' + NODE_PORT + '端口上已啟用！');
});

接下來我們當(dāng)前文件打開命令窗口運(yùn)行 node app.js

然后打開瀏覽器輸入 http://localhost:4000/user

就完成了一個(gè)簡單的模擬數(shù)據(jù)，接下來我們完善下需求

如果我們在本地開發(fā)中有時(shí)候端口不同會(huì)報(bào)跨域問題，所以我們需要在 app.js 添加一下代碼

const cors = require('cors');
app.use(cors({
 origin: '*',
 methods: ['GET', 'POST', 'PUT', 'DELETE'],
 allowedHeaders: ['conten-Type', 'Authorization']
}));

這樣就可以在別的端口訪問或者別的ip內(nèi)網(wǎng)（你同時(shí)）訪問了。

如果我們需要訪問一些靜態(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ā)中我們不可能只有一個(gè)接口，所以我們在優(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服務(wù)在' + 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/ 時(shí)
apiRoutes.get('/', function(req, res) {
 setTimeout(() => {
  res.json({
   status: 1,
   msg: '查詢成功',
   data: {
     name: '張三'
   }
  });
 }, random);
});
// 訪問 /user/1111 時(shí)
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ù)基本就完成了。

接下需要在項(xiàng)目中用了

先區(qū)分環(huán)境

// 判斷是否是本地開發(fā)
const isDev = process.env.NODE_ENV ==='development';
// 設(shè)置 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è)我們在本地訪問