express + mock 讓前后臺并行開發

lansheng228 發布于2019-08-26 11:59 / 3026人閱讀

摘要：下面來介紹一種讓前后臺并行開發。服務在端口上已啟用我們需要在同級目錄添加以下文件中的內容如下訪問時查詢成功張三訪問時我們現在在瀏覽器中訪問我們初步模擬數據基本就完成了。

在我們平時項目剛啟動時，由于后臺也是剛開始開發，我們前端往往在開發過程中沒有數據和接口請求的，都要造一些假數據進去或者使用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 或者多帶帶一個命令窗口運行

好了介紹到此。

GPU云服務器云服務器后臺開發游戲后臺開發 mock Mock100

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107976.html

QuickMock：基于Express的快速mock平臺

摘要：并將請求通過特定的，開發環境指定到對應的本地文件。聯調或者生產環境發布前，再修改特定的。聯調發布前，也同樣需要將關鍵代碼進行處理，將請求真正發送到后端服務器中，而不是被攔截到。項目列表項目面板，展示已存在的所有項目。前言感興趣的話，可以star關注支持下，項目地址。在日常的開發中，前端mock后端api數據，是實現前后端并行開發非常重要的一步。有了數據，才能更加真實反饋實際操作流...

mdluo 2019-08-20 17:41 評論0 收藏0
基于webpack的前后端分離開發環境實戰

摘要：背景隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重視，前端負責展現交互邏輯，后端負責業務數據接口，基本上也成為了我們日常項目分工中的標配，但是前后端分離背景隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準web應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重...

soasme 2019-08-22 11:03 評論0 收藏0
淺談前后端分離與實踐（一）

摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。一、起源（故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創業的想法，于是乎開始了自己的創業之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 評論0 收藏0
淺談前后端分離與實踐（一）

摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。一、起源（故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創業的想法，于是乎開始了自己的創業之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...

yy13818512006 2019-08-21 16:59 評論0 收藏0