摘要：你的服務(wù)器已經(jīng)啟動了。為此，我們將使用名為的優(yōu)秀應(yīng)用。項(xiàng)目結(jié)構(gòu)大多數(shù)教程以及許多真實(shí)的案例都將所有路由放在一個很大的文件中。不僅要求為字符串，還要求是一個對象，它們被之為。

翻譯：瘋狂的技術(shù)宅
原文：https://medium.freecodecamp.o...

本文首發(fā)微信公眾號：前端先鋒
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

Node.js 對初學(xué)者來說可能是令人望而卻步的，其靈活的結(jié)構(gòu)和缺乏嚴(yán)格的規(guī)范使它看起來很復(fù)雜。

本教程是 Node.js，Express 框架和 MongoDB 的快速指南，重點(diǎn)介紹基本的 REST 路由和基本的數(shù)據(jù)庫交互。你將構(gòu)建一個簡單的 API 框架模版，然后可以將其用作任何應(yīng)用。

本教程適用于：你應(yīng)該對 REST API 和 CRUD 操作有基本的了解，還有基本的 JavaScript 知識。我用的是 ES6（主要是箭頭函數(shù)），但并不是很復(fù)雜。

在本教程中，我們將為創(chuàng)建一個網(wǎng)絡(luò)筆記應(yīng)用的后端骨架 —— 類似于Google Keep，能夠執(zhí)行所有的四個CRUD操作：創(chuàng)建、讀取、更新和刪除。

如果你沒有安裝Node，請參閱此處。

創(chuàng)建一個新目錄，運(yùn)行 npm init，然后按照提示操作，把你的應(yīng)用程序命名為“notable”（或者你可能喜歡的其他名字）。

npm init

一旦完成，在你的目錄中會有一個 package.json 文件。你可以開始安裝項(xiàng)目所需的依賴項(xiàng)了。

我們將使用 Express 作為自己的框架，MongoDB 作為數(shù)據(jù)庫，還有一個名為 body-parser 的包來幫助處理 JSON 請求。

npm install --save express [email protected] body-parser

我還強(qiáng)烈建議將 Nodemon 安裝為 dev 依賴項(xiàng)。這是一個非常簡單的小包，可在文件被更改時自動重啟服務(wù)器。

如果你運(yùn)行：

npm install --save-dev nodemon

然后將以下腳本添加到 package.json：

// package.json
  "scripts": {
    "dev": "nodemon server.js"
  },

完整的 package.json 應(yīng)如下所示：

// package.json
{
  "name": "notable",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "mongodb": "^2.2.16"
  },
  "devDependencies": {
    "nodemon": "^1.11.0"
  }
}

現(xiàn)在，你可以創(chuàng)建 server.js 文件并構(gòu)建 API 了。

首先導(dǎo)入 server.js 中的所有依賴項(xiàng)。

// server.js
const express        = require("express");
const MongoClient    = require("mongodb").MongoClient;
const bodyParser     = require("body-parser");
const app            = express();

我們將使用 MongoClient 與數(shù)據(jù)庫進(jìn)行交互。還會將應(yīng)用初始化為 Express 框架的實(shí)例。

最后一件事就是告訴你的程序開始監(jiān)聽請求。

你可以指定一個端口，并像這樣開始監(jiān)聽：

// server.js
const port = 8000;
app.listen(port, () => {
  console.log("We are live on " + port);
});

現(xiàn)在，如果你運(yùn)行 npm run dev（或 node server.js，如果你沒有安裝 Nodemon 的話），應(yīng)該在終端中看到“We are live on port 8000”的提示。

你的服務(wù)器已經(jīng)啟動了。但它現(xiàn)在還什么也做不了。

接下來讓我們解決這個問題。

對于本例，你要構(gòu)建4條路由; 創(chuàng)建筆記，閱讀筆記，更新筆記和刪除筆記。

這將使你了解如何使用 Node 構(gòu)建幾乎所有的基本路由。

但是，要測試你的API，還需要模仿客戶端發(fā)出請求。為此，我們將使用名為 Postman 的優(yōu)秀應(yīng)用。它允許你使用自定義的頭和參數(shù)進(jìn)行簡單的 HTTP 請求。

安裝Postman，讓我們開始設(shè)置路由。

大多數(shù) Node.js 教程（以及許多真實(shí)的案例）都將所有路由放在一個很大的 routes.js 文件中。這讓我有點(diǎn)不舒服。相比之下，將文件拆到為多帶帶的文件夾可以提高可讀性，并使大型應(yīng)用更易于管理。

雖然我們現(xiàn)在做的不是大型應(yīng)用，但仍然可以這樣做。創(chuàng)建以下目錄：一個 app 文件夾，里面有一個routes文件夾，routes 里面有 index.js 和 note_routes.js 文件。

mkdir app
cd app
mkdir routes
cd routes
touch index.js
touch note_routes.js

對于你的簡單小程序來說，這些目錄可能看起來有些過分，但從一開始就做好總是有意義的。

讓我們從 CRUD 中的 C 開始。你將會如何創(chuàng)建一個筆記？

那么，在你開始之前，必須先要打好基礎(chǔ)。在Express中，路由包含在一個函數(shù)中，該函數(shù)將 Express 實(shí)例和數(shù)據(jù)庫作為參數(shù)。

像這樣：

// routes/note_routes.js
module.exports = function(app, db) {
};

然后，你可以通過 index.js 導(dǎo)出此函數(shù)：

// routes/index.js
const noteRoutes = require("./note_routes");
module.exports = function(app, db) {
  noteRoutes(app, db);
  // Other route groups could go here, in the future
};

然后導(dǎo)入它以便在 server.js 中使用：

// server.js
const express        = require("express");
const MongoClient    = require("mongodb").MongoClient;
const bodyParser     = require("body-parser");
const app            = express();
const port = 8000;
require("./app/routes")(app, {});
app.listen(port, () => {
  console.log("We are live on " + port);
});

請注意，由于還沒有設(shè)置數(shù)據(jù)庫，因此只需傳入一個空對象。

好的，現(xiàn)在你可以制作自己的 CREATE 路由了。

語法很簡單：

// note_routes.js
module.exports = function(app, db) {
  app.post("/notes", (req, res) => {
    // You"ll create your note here.
    res.send("Hello")
  });
};

當(dāng)應(yīng)用程序收到對 "/ notes" 路徑的 post 請求時，它將執(zhí)行回調(diào)內(nèi)的代碼 —— request 對象（包含請求的參數(shù)或JSON）和 response 對象。

你可以使用 Postman 將 POST 請求發(fā)送到 localhost:8000/notes 來測試。

你應(yīng)該得到回復(fù)："Hello"。

太好了！你創(chuàng)建了第一個真正的路由。

下一步是在你的請求中添加一些參數(shù)并在 API 中處理它們，最后添加到你的數(shù)據(jù)庫中。

在 Postman 中，在選擇 x-www-form-urlencoded 單選按鈕后，轉(zhuǎn)到 Body 選項(xiàng)卡并添加一些鍵值對。

這會將編碼后的表單數(shù)據(jù)添加到你的請求中，你可以使用 API ??處理該請求。

你可以去嘗試更多的設(shè)置項(xiàng)。

現(xiàn)在在你的 note_routes.js 中，讓我們輸出 body 的內(nèi)容。

// note_routes.js
module.exports = function(app, db) {
  app.post("/notes", (req, res) => {
    console.log(req.body)
    res.send("Hello")
  });
};

用 Postman 發(fā)送請求，你會看到……undefined。

不幸的是，Express 無法自行處理 URL 編碼的表單。雖然你確實(shí)安裝了這個 body-parser 包......

// server.
const express        = require("express");
const MongoClient    = require("mongodb").MongoClient;
const bodyParser     = require("body-parser");
const app            = express();
const port = 8000;
app.use(bodyParser.urlencoded({ extended: true }));
require("./app/routes")(app, {});
app.listen(port, () => {
  console.log("We are live on " + port);
});

Now you should see the body as an object in the terminal.
現(xiàn)在你應(yīng)該將 body 視為終端中的對象。

{ title: "My Note Title", body: "What a great note." }

第一個路由的最后一步：設(shè)置數(shù)據(jù)庫，然后添加數(shù)據(jù)。

最簡單方法是通過 mLab 設(shè)置 Mongo 數(shù)據(jù)庫的：它是最小的而且是免費(fèi)的，設(shè)置的速度非常快。

創(chuàng)建帳戶和 MongoDB 部署后，將用戶的用戶名和密碼添加到數(shù)據(jù)庫：

然后復(fù)制這里第二個 URL：

在項(xiàng)目根目錄的目錄配置中，創(chuàng)建一個db.js文件。

mkdir config 
cd config
touch db.js

在里面，添加剛才的URL：

module.exports = {
  url : YOUR URL HERE
};

別忘了把你的用戶名和密碼（來自數(shù)據(jù)庫用戶的密碼，而不是你的 mLab 帳戶）添加到URL中。 （如果你要將此項(xiàng)目提交到 Github 上，請確保包含 .gitignore 文件 像這樣, ，不要與任何人分享你的密碼。）

現(xiàn)在在你的 server.js 中，可以用 MongoClient 連接到數(shù)據(jù)庫了，使用它來包裝你的應(yīng)用程序設(shè)置：

// server.js
const express        = require("express");
const MongoClient    = require("mongodb").MongoClient;
const bodyParser     = require("body-parser");
const db             = require("./config/db");
const app            = express();
const port = 8000;
app.use(bodyParser.urlencoded({ extended: true }));
MongoClient.connect(db.url, (err, database) => {
  if (err) return console.log(err)
  require("./app/routes")(app, database);
  app.listen(port, () => {
    console.log("We are live on " + port);
  });               
})

如果你用的是最新版本的 MongoDB（3.0+），請將其修改為：

// server.js
const express        = require("express");
const MongoClient    = require("mongodb").MongoClient;
const bodyParser     = require("body-parser");
const db             = require("./config/db");
const app            = express();
const port = 8000;
app.use(bodyParser.urlencoded({ extended: true }));
MongoClient.connect(db.url, (err, database) => {
  if (err) return console.log(err)
                      
  // Make sure you add the database name and not the collection name
  const database = database.db("note-api")
  require("./app/routes")(app, database);
  app.listen(port, () => {
    console.log("We are live on " + port);
  });               
})

這是你的基礎(chǔ)架構(gòu)的最后一個設(shè)置！

MongoDB將數(shù)據(jù)存儲在 collections 中。在你的項(xiàng)目中，你希望將筆記存儲在一個名為 notes 的 collection 中。

由于將數(shù)據(jù)庫作為路徑中的 db 參數(shù)傳入，因此可以像這樣訪問它：

db.collection("notes")

創(chuàng)建筆記就像在集合上調(diào)用 insert 一樣簡單：

const note = { text: req.body.body, title: req.body.title}
  db.collection("notes").insert(note, (err, results) => {
}

插入完成后（或由于某種原因失?。?，要么返回錯誤或反回新創(chuàng)建的筆記對象。這是完整的 note_routes.js 代碼：

// note_routes.js
module.exports = function(app, db) {
  const collection = 
  app.post("/notes", (req, res) => {
    const note = { text: req.body.body, title: req.body.title };
    db.collection("notes").insert(note, (err, result) => {
      if (err) { 
        res.send({ "error": "An error has occurred" }); 
      } else {
        res.send(result.ops[0]);
      }
    });
  });
};

試試看！使用 Postman 發(fā)送 x-www-form-urlencoded POST 請求，在 Body 選項(xiàng)卡下設(shè)置 title 和 body。

響應(yīng)應(yīng)如下所示：

如果你登錄mLab，你還應(yīng)該能夠在數(shù)據(jù)庫中看到創(chuàng)建的筆記。

現(xiàn)在可以稍微加快步伐。

假設(shè)你希望通過導(dǎo)航到 localhost:8000/notes/{id} 來獲取剛創(chuàng)建的筆記。這是鏈接應(yīng)該是localhost:8000/notes/585182bd42ac5b07a9755ea3。（如果你沒有得到其中筆記的 ID，可以通過檢查 mLab 或創(chuàng)建一個新的筆記）。

以下是 note_routes.js 中的內(nèi)容：

// note_routes.js
module.exports = function(app, db) {
  app.get("/notes/:id", (req, res) => {
    
  });
  app.post("/notes", (req, res) => {
    const note = { text: req.body.body, title: req.body.title };
    db.collection("notes").insert(note, (err, result) => {
      if (err) { 
        res.send({ "error": "An error has occurred" }); 
      } else {
        res.send(result.ops[0]);
      }
    });
  });
};

就像以前一樣，你將在數(shù)據(jù)庫 collection 中調(diào)用一個方法。在這里，它被恰當(dāng)?shù)孛麨?findOne。

// note_routes.js
module.exports = function(app, db) {
  app.get("/notes/:id", (req, res) => {
    const details = { "_id":  };
    db.collection("notes").findOne(details, (err, item) => {
      if (err) {
        res.send({"error":"An error has occurred"});
      } else {
        res.send(item);
      }
    });
  });
app.post("/notes", (req, res) => {
    const note = { text: req.body.body, title: req.body.title };
    db.collection("notes").insert(note, (err, result) => {
      if (err) { 
        res.send({ "error": "An error has occurred" }); 
      } else {
        res.send(result.ops[0]);
      }
    });
  });
};

你可以通過 req.params.id 從 URL 參數(shù)中獲取 id。但是，如果你試圖將字符串插入上面的 位置，它將無法正常工作。

MongoDB 不僅要求 ID 為字符串，還要求 ID 是一個對象，它們被之為 ObjectID。

別擔(dān)心，這很容易解決。這是完整的代碼：

// note_routes.js
var ObjectID = require("mongodb").ObjectID;
module.exports = function(app, db) {
  app.get("/notes/:id", (req, res) => {
    const id = req.params.id;
    const details = { "_id": new ObjectID(id) };
    db.collection("notes").findOne(details, (err, item) => {
      if (err) {
        res.send({"error":"An error has occurred"});
      } else {
        res.send(item);
      } 
    });
  });
app.post("/notes", (req, res) => {
    const note = { text: req.body.body, title: req.body.title };
    db.collection("notes").insert(note, (err, result) => {
      if (err) { 
        res.send({ "error": "An error has occurred" }); 
      } else {
        res.send(result.ops[0]);
      }
    });
  });
};

嘗試使用一個筆記 ID，它應(yīng)如下所示：

實(shí)際上刪除對象與查找對象幾乎相同。你只需用 remove 函數(shù)替換 findOne 即可。這是完整的代碼：

// note_routes.js
// ...
  app.delete("/notes/:id", (req, res) => {
    const id = req.params.id;
    const details = { "_id": new ObjectID(id) };
    db.collection("notes").remove(details, (err, item) => {
      if (err) {
        res.send({"error":"An error has occurred"});
      } else {
        res.send("Note " + id + " deleted!");
      } 
    });
  });
// ...

最后一個！ PUT 方法基本上是 READ 和 CREATE 的混合體。你找到該對象，然后更新它。如果剛才你刪除了數(shù)據(jù)庫中唯一的筆記，那就再創(chuàng)建一個！

代碼：

// note_routes.js
// ...
  app.put("/notes/:id", (req, res) => {
    const id = req.params.id;
    const details = { "_id": new ObjectID(id) };
    const note = { text: req.body.body, title: req.body.title };
    db.collection("notes").update(details, note, (err, result) => {
      if (err) {
          res.send({"error":"An error has occurred"});
      } else {
          res.send(note);
      } 
    });
  });
// ...

現(xiàn)在你可以更新任何筆記，如下所示：

請注意這些代碼還不完美 —— 比如你沒有提供正文或標(biāo)題，PUT 請求將會使數(shù)據(jù)庫中的筆記上的那些字段無效。

就這么簡單！你完成了可以進(jìn)行 CRUD 操作的 Node API。

本教程的目的是讓你熟悉 Express、Node 和 MongoDB —— 你可以用簡單的程序作為進(jìn)軍更復(fù)雜項(xiàng)目的跳板。

將來我將會編寫系列教程，用不同的語言和框架創(chuàng)建更簡單的API。如果你有興趣，請點(diǎn)擊關(guān)注！

12個令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

必須要會的 50 個React 面試題

世界頂級公司的前端面試都問些什么

11 個最好的 JavaScript 動態(tài)效果庫

CSS Flexbox 可視化手冊

從設(shè)計(jì)者的角度看 React

過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

14個最好的 JavaScript 數(shù)據(jù)可視化庫

8 個給前端的頂級 VS Code 擴(kuò)展插件

Node.js 多線程完全指南

把HTML轉(zhuǎn)成PDF的4個方案及實(shí)現(xiàn)

更多文章...