express+mock如何實(shí)現(xiàn)前后臺(tái)并行開(kāi)發(fā)

小編給大家分享一下express+mock如何實(shí)現(xiàn)前后臺(tái)并行開(kāi)發(fā)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

app.js

'use strict';

const express = require('express');
const app = express();

// port
let NODE_PORT = process.env.PORT || 4000;
// 監(jiān)聽(tīng) /user
app.use('/user', function(req, res) {
 // 讓接口 500-1000ms 返回 好讓頁(yè)面有個(gè)loading
 setTimeout(() => {
 res.json({
  status: 1,
  msg: '查詢(xún)成功',
  data: {
   name: '張三'
  }
 });
 }, Math.random() * 500 + 500);
});

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

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

然后打開(kāi)瀏覽器 輸入 http://localhost:4000/user

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

如果我們?cè)诒镜亻_(kāi)發(fā)中有時(shí)候 端口不同會(huì)報(bào)跨域問(wèn)題，所以我們需要在 app.js 添加一下代碼

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

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

如果我們需要訪問(wèn)一些靜態(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/**'
 ],
});

接下來(lái)繼續(xù)完善， 在開(kāi)發(fā)中我們不可能只有一個(gè)接口，所以我們?cè)趦?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 + '端口上已啟用！');
});

我們需要在同級(jí)目錄添加以下文件
./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;
// 訪問(wèn) /user/ 時(shí)
apiRoutes.get('/', function(req, res) {
 setTimeout(() => {
  res.json({
   status: 1,
   msg: '查詢(xún)成功',
   data: {
     name: '張三'
   }
  });
 }, random);
});
// 訪問(wèn) /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)在在瀏覽器中訪問(wèn)

我們初步模擬數(shù)據(jù)基本就完成了。

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

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

// 判斷是否是本地開(kāi)發(fā)
const isDev = process.env.NODE_ENV ==='development';
// 設(shè)置 host 本地走mock 生產(chǎn)環(huán)境走相對(duì)路徑 /user/
const host = isDev ? 'http://localhost:4000' : ''

fetch(`${host}/user/`)
 .then(response => {
  return response.json();
 })
 .then(data => {
  console.log(data );
 });

假設(shè)我們?cè)诒镜卦L問(wèn)

數(shù)據(jù)都能拿到了， 在試一下 別的域名訪問(wèn)

跨域問(wèn)題也OK。

我們?cè)谠O(shè)置下 package.json 在你本地開(kāi)發(fā)的命令后臺(tái)添加 && node xx/aap.js 或者單獨(dú)一個(gè)命令窗口運(yùn)行

以上是“express+mock如何實(shí)現(xiàn)前后臺(tái)并行開(kāi)發(fā)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！