摘要:你的服務器已經啟動了。為此,我們將使用名為的優秀應用。項目結構大多數教程以及許多真實的案例都將所有路由放在一個很大的文件中。不僅要求為字符串,還要求是一個對象,它們被之為。
翻譯:瘋狂的技術宅
原文:https://medium.freecodecamp.o...
本文首發微信公眾號:前端先鋒
歡迎關注,每天都給你推送新鮮的前端技術文章
Node.js 對初學者來說可能是令人望而卻步的,其靈活的結構和缺乏嚴格的規范使它看起來很復雜。
本教程是 Node.js,Express 框架和 MongoDB 的快速指南,重點介紹基本的 REST 路由和基本的數據庫交互。你將構建一個簡單的 API 框架模版,然后可以將其用作任何應用。
本教程適用于:你應該對 REST API 和 CRUD 操作有基本的了解,還有基本的 JavaScript 知識。我用的是 ES6(主要是箭頭函數),但并不是很復雜。
在本教程中,我們將為創建一個網絡筆記應用的后端骨架 —— 類似于Google Keep,能夠執行所有的四個CRUD操作:創建、讀取、更新和刪除。
配置如果你沒有安裝Node,請參閱此處。
創建一個新目錄,運行 npm init,然后按照提示操作,把你的應用程序命名為“notable”(或者你可能喜歡的其他名字)。
npm init
一旦完成,在你的目錄中會有一個 package.json 文件。你可以開始安裝項目所需的依賴項了。
我們將使用 Express 作為自己的框架,MongoDB 作為數據庫,還有一個名為 body-parser 的包來幫助處理 JSON 請求。
npm install --save express mongodb@2.2.16 body-parser
我還強烈建議將 Nodemon 安裝為 dev 依賴項。這是一個非常簡單的小包,可在文件被更改時自動重啟服務器。
如果你運行:
npm install --save-dev nodemon
然后將以下腳本添加到 package.json:
// package.json "scripts": { "dev": "nodemon server.js" },
完整的 package.json 應如下所示:
// 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" } }
現在,你可以創建 server.js 文件并構建 API 了。
我們的服務器首先導入 server.js 中的所有依賴項。
// server.js const express = require("express"); const MongoClient = require("mongodb").MongoClient; const bodyParser = require("body-parser"); const app = express();
我們將使用 MongoClient 與數據庫進行交互。還會將應用初始化為 Express 框架的實例。
最后一件事就是告訴你的程序開始監聽請求。
你可以指定一個端口,并像這樣開始監聽:
// server.js const port = 8000; app.listen(port, () => { console.log("We are live on " + port); });
現在,如果你運行 npm run dev(或 node server.js,如果你沒有安裝 Nodemon 的話),應該在終端中看到“We are live on port 8000”的提示。
你的服務器已經啟動了。但它現在還什么也做不了。
接下來讓我們解決這個問題。
CRUD 路由對于本例,你要構建4條路由; 創建筆記,閱讀筆記,更新筆記和刪除筆記。
這將使你了解如何使用 Node 構建幾乎所有的基本路由。
但是,要測試你的API,還需要模仿客戶端發出請求。為此,我們將使用名為 Postman 的優秀應用。它允許你使用自定義的頭和參數進行簡單的 HTTP 請求。
安裝Postman,讓我們開始設置路由。
項目結構大多數 Node.js 教程(以及許多真實的案例)都將所有路由放在一個很大的 routes.js 文件中。這讓我有點不舒服。相比之下,將文件拆到為多帶帶的文件夾可以提高可讀性,并使大型應用更易于管理。
雖然我們現在做的不是大型應用,但仍然可以這樣做。創建以下目錄:一個 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 開始。你將會如何創建一個筆記?
那么,在你開始之前,必須先要打好基礎。在Express中,路由包含在一個函數中,該函數將 Express 實例和數據庫作為參數。
像這樣:
// routes/note_routes.js module.exports = function(app, db) { };
然后,你可以通過 index.js 導出此函數:
// 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 };
然后導入它以便在 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); });
請注意,由于還沒有設置數據庫,因此只需傳入一個空對象。
好的,現在你可以制作自己的 CREATE 路由了。
語法很簡單:
// note_routes.js module.exports = function(app, db) { app.post("/notes", (req, res) => { // You"ll create your note here. res.send("Hello") }); };
當應用程序收到對 "/ notes" 路徑的 post 請求時,它將執行回調內的代碼 —— request 對象(包含請求的參數或JSON)和 response 對象。
你可以使用 Postman 將 POST 請求發送到 localhost:8000/notes 來測試。
你應該得到回復:"Hello"。
太好了!你創建了第一個真正的路由。
下一步是在你的請求中添加一些參數并在 API 中處理它們,最后添加到你的數據庫中。
請求參數在 Postman 中,在選擇 x-www-form-urlencoded 單選按鈕后,轉到 Body 選項卡并添加一些鍵值對。
這會將編碼后的表單數據添加到你的請求中,你可以使用 API ??處理該請求。
你可以去嘗試更多的設置項。
現在在你的 note_routes.js 中,讓我們輸出 body 的內容。
// note_routes.js module.exports = function(app, db) { app.post("/notes", (req, res) => { console.log(req.body) res.send("Hello") }); };
用 Postman 發送請求,你會看到……undefined。
不幸的是,Express 無法自行處理 URL 編碼的表單。雖然你確實安裝了這個 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.
現在你應該將 body 視為終端中的對象。
{ title: "My Note Title", body: "What a great note." }
第一個路由的最后一步:設置數據庫,然后添加數據。
最簡單方法是通過 mLab 設置 Mongo 數據庫的:它是最小的而且是免費的,設置的速度非常快。
創建帳戶和 MongoDB 部署后,將用戶的用戶名和密碼添加到數據庫:
然后復制這里第二個 URL:
在項目根目錄的目錄配置中,創建一個db.js文件。
mkdir config cd config touch db.js
在里面,添加剛才的URL:
module.exports = { url : YOUR URL HERE };
別忘了把你的用戶名和密碼(來自數據庫用戶的密碼,而不是你的 mLab 帳戶)添加到URL中。 (如果你要將此項目提交到 Github 上,請確保包含 .gitignore 文件 像這樣, ,不要與任何人分享你的密碼。)
現在在你的 server.js 中,可以用 MongoClient 連接到數據庫了,使用它來包裝你的應用程序設置:
// 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); }); })
這是你的基礎架構的最后一個設置!
添加到你的數據庫MongoDB將數據存儲在 collections 中。在你的項目中,你希望將筆記存儲在一個名為 notes 的 collection 中。
由于將數據庫作為路徑中的 db 參數傳入,因此可以像這樣訪問它:
db.collection("notes")
創建筆記就像在集合上調用 insert 一樣簡單:
const note = { text: req.body.body, title: req.body.title} db.collection("notes").insert(note, (err, results) => { }
插入完成后(或由于某種原因失敗),要么返回錯誤或反回新創建的筆記對象。這是完整的 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 發送 x-www-form-urlencoded POST 請求,在 Body 選項卡下設置 title 和 body。
響應應如下所示:
如果你登錄mLab,你還應該能夠在數據庫中看到創建的筆記。
READ 路由現在可以稍微加快步伐。
假設你希望通過導航到 localhost:8000/notes/{id} 來獲取剛創建的筆記。這是鏈接應該是localhost:8000/notes/585182bd42ac5b07a9755ea3。(如果你沒有得到其中筆記的 ID,可以通過檢查 mLab 或創建一個新的筆記)。
以下是 note_routes.js 中的內容:
// 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]); } }); }); };
就像以前一樣,你將在數據庫 collection 中調用一個方法。在這里,它被恰當地命名為 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 參數中獲取 id。但是,如果你試圖將字符串插入上面的
MongoDB 不僅要求 ID 為字符串,還要求 ID 是一個對象,它們被之為 ObjectID。
別擔心,這很容易解決。這是完整的代碼:
// 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,它應如下所示:
DELETE 路由實際上刪除對象與查找對象幾乎相同。你只需用 remove 函數替換 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!"); } }); }); // ...UPDATE 路由
最后一個! PUT 方法基本上是 READ 和 CREATE 的混合體。你找到該對象,然后更新它。如果剛才你刪除了數據庫中唯一的筆記,那就再創建一個!
代碼:
// 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); } }); }); // ...
現在你可以更新任何筆記,如下所示:
請注意這些代碼還不完美 —— 比如你沒有提供正文或標題,PUT 請求將會使數據庫中的筆記上的那些字段無效。
API 完成就這么簡單!你完成了可以進行 CRUD 操作的 Node API。
本教程的目的是讓你熟悉 Express、Node 和 MongoDB —— 你可以用簡單的程序作為進軍更復雜項目的跳板。
將來我將會編寫系列教程,用不同的語言和框架創建更簡單的API。如果你有興趣,請點擊關注!
本文首發微信公眾號:前端先鋒 歡迎掃描二維碼關注公眾號,每天都給你推送新鮮的前端技術文章 歡迎繼續閱讀本專欄其它高贊文章:12個令人驚嘆的CSS實驗項目
必須要會的 50 個React 面試題
世界頂級公司的前端面試都問些什么
11 個最好的 JavaScript 動態效果庫
CSS Flexbox 可視化手冊
從設計者的角度看 React
過節很無聊?還是用 JavaScript 寫一個腦力小游戲吧!
CSS粘性定位是怎樣工作的
一步步教你用HTML5 SVG實現動畫效果
程序員30歲前月薪達不到30K,該何去何從
14個最好的 JavaScript 數據可視化庫
8 個給前端的頂級 VS Code 擴展插件
Node.js 多線程完全指南
把HTML轉成PDF的4個方案及實現
更多文章...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109751.html
摘要:異步最佳實踐避免回調地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術和異步函數。 Nodejs 連接各種數據庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字,讀完需 8 分鐘,速讀需 2 分鐘。翻譯自...
摘要:要對進行黑盒測試測試的最好辦法是對他們進行黑盒測試,黑盒測試是一種不關心應用內部結構和工作原理的測試方法,測試時系統任何部分都不應該被。此外,有了黑盒測試并不意味著不需要單元測試,針對的單元測試還是需要編寫的。 本文首發于之乎專欄前端周刊,全文共 6953 字,讀完需 8 分鐘,速度需 2 分鐘。翻譯自:RingStack 的文章 https://blog.risingstack.co...
閱讀 2079·2021-11-24 10:34
閱讀 3055·2021-11-22 11:58
閱讀 3712·2021-09-28 09:35
閱讀 1724·2019-08-30 15:53
閱讀 2769·2019-08-30 14:11
閱讀 1550·2019-08-29 17:31
閱讀 542·2019-08-26 13:53
閱讀 2141·2019-08-26 13:45