成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

express + mock 讓前后臺并行開發(fā)

lansheng228 / 3036人閱讀

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

在我們平時(shí)項(xiàng)目剛啟動時(shí)，由于后臺也是剛開始開發(fā)，我們前端往往在開發(fā)過程中沒有數(shù)據(jù)和接口請求的，都要造一些假數(shù)據(jù)進(jìn)去或者使用mock造一些數(shù)據(jù)進(jìn)去，但是這樣的話往往會偶合一些沒用的代碼進(jìn)去。到時(shí)候還得刪除。
下面來介紹一種 express + mock 讓前后臺并行開發(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í)候 端口不同會報(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熱更新
nodemon 可以按照需求自己配置
接下來繼續(xù)完善， 在開發(fā)中我們不可能只有一個(gè)接口，所以我們在優(yōu)化下。

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服務(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è)我們在本地訪問

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

跨域問題也OK。

我們在設(shè)置下 package.json 在你本地開發(fā)的命令后臺添加 && node xx/aap.js 或者多帶帶一個(gè)命令窗口運(yùn)行

好了介紹到此。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107976.html

相關(guān)文章

  • QuickMock：基于Express的快速mock平臺

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

    mdluo 評論0 收藏0

  • 基于webpack的前后端分離開發(fā)環(huán)境實(shí)戰(zhàn)

    摘要：背景隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們在開發(fā)一個(gè)標(biāo)準(zhǔn)應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來越被重視，前端負(fù)責(zé)展現(xiàn)交互邏輯，后端負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)接口，基本上也成為了我們?nèi)粘ｍ?xiàng)目分工中的標(biāo)配，但是前后端分離 背景 隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們在開發(fā)一個(gè)標(biāo)準(zhǔn)web應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來越被重...

    soasme 評論0 收藏0

  • 淺談前后端分離與實(shí)踐（一）

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

    dantezhao 評論0 收藏0

  • 淺談前后端分離與實(shí)踐（一）

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

    yy13818512006 評論0 收藏0

發(fā)表評論

0條評論

lansheng228

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<