搜尋
首頁web前端js教程羽毛的初學者指南。

Feathers.js:快速構建RESTful API服務器的指南

A Beginner’s Guide to Feathers.js

核心要點:

  • Feathers.js 簡化了RESTful API服務器的創建,處理大部分重複的後端工作,讓開發者專注於代碼定制和配置。
  • 該框架基於Express構建,支持SQL和NoSQL數據庫,使用自動生成必要代碼的服務,可以輕鬆進行CRUD操作。
  • Feathers.js中的身份驗證可以使用JSON Web Tokens (JWT)來保護API端點,確保只有授權用戶才能訪問或修改數據。
  • Feathers.js中的鉤子(Hooks)充當中間件函數,可以在數據到達數據庫之前或之後操作數據,這對於驗證、授權和動態添加字段等任務非常有用。
  • Feathers.js 旨在易於使用和擴展,通過WebSockets支持實時更新,並提供適用於各種前端框架的靈活架構。

本文將指導您使用Feathers.js在Node.js中構建RESTful API服務器。

API服務器,也稱為應用程序服務器,是一個向前端應用程序提供數據的程序。它還在後端處理業務邏輯,並提供對組織數據庫的受限訪問。它不僅可以防止未經授權的人員訪問數據;如果登錄用戶沒有權限,它還可以限制他們訪問或更改數據。

您構建的每個應用程序都需要向最終用戶提供服務。為此,您的應用程序需要處理數據。您可以使用遠程API來創建新服務。但是,對於大多數應用程序,您需要管理自己的數據存儲。一個流行的選擇是使用在線數據存儲服務,例如Firebase。這樣,您不必處理運行分佈式數據庫服務器的繁瑣細節。但是,您的項目需求可能需要使用功能齊全的內部數據庫管理系統,例如MongoDB或Oracle。為了讓您的前端應用程序訪問數據庫中存儲的數據,您需要一個位於數據庫和前端應用程序之間的服務器應用程序。

A Beginner’s Guide to Feathers.js

如上圖所示,應用程序服務器的工作是從數據庫中使用SQL或NoSQL命令訪問數據,並將其轉換為前端應用程序(客戶端瀏覽器)可以理解的格式——例如JSON。此外,應用程序服務器可以使用各種安全協議——例如HTTPS加密和令牌授權——來確保數據庫和客戶端應用程序之間的通信安全可靠。使用這種架構的一個主要優點是,您可以使用相同的應用程序服務器部署針對不同平台的應用程序——桌面、移動、Web等等。而且,為了高效地為更多用戶提供服務並實現快速的響應時間,也很容易水平擴展您的應用程序。

我們將構建一個簡單的API服務器,並演示Feathers提供的各種功能。

先決條件:

在開始學習本教程之前,您需要對以下主題有紮實的基礎:

  • ES6 JavaScript
  • 創建Express應用程序
  • 使用Express創建RESTful API

Feathers構建在Express之上,Express是Node.js的一個極簡主義Web框架。如果您完成了鏈接中演示的教程,您會發現僅僅使用Express構建RESTful API非常費力。使用Feathers,大部分重複性工作已經為您完成。您只需要專注於配置和定制代碼。讓我們深入代碼,學習這個Web框架是如何工作的。

項目創建:

要開始使用Feathers,您需要全局安裝其命令行應用程序:

npm install -g @feathersjs/cli

接下來,使用以下命令創建一個新的API項目:

mkdir contacts-api
cd contacts-api
feathers generate app

以下是我的選擇,您可以隨意選擇任何測試框架。不幸的是,測試不在本文的重點範圍內,因此這裡不會介紹。我個人喜歡簡單,這就是我選擇Jest的原因。

A Beginner’s Guide to Feathers.js

安裝完成後,您可以打開您喜歡的代碼編輯器查看項目文件。

A Beginner’s Guide to Feathers.js

如果您完成了我在先決條件部分列出的Express教程,那么生成的代碼不應該讓您感到害怕。這是一個簡短的摘要,描述了文件夾和文件。

A Beginner’s Guide to Feathers.js

現在不必太擔心每個文件的作用。在本教程的過程中,您會逐漸了解它們的工作方式。現在,讓我們確認測試是否正常工作。

代碼風格檢查(Linting):

為了確保我們的項目符合定義的ESLint規則,只需運行命令npm test。如果您使用的是Unix或Linux平台,這應該可以正常運行。如果您使用的是Windows,則需要調整一些內容才能成功運行測試。

首先,轉到package.json並查看scripts部分。將test行更改為:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},

接下來,如果您在Visual Studio Code中安裝了Prettier,則需要在“工作區設置”選項卡中將單引號設置更改為true:

{
  "prettier.singleQuote": true
}

最後,確保在創建或編輯任何文件時,換行符為LF。如果您使用的是Visual Studio Code或類似的編輯器,您可以在狀態欄中檢查當前的換行符樣式。如果顯示CRLF,則更改為LF。進行這些更改將幫助您通過代碼風格檢查測試。不幸的是,要使測試通過需要更多工作,這裡將不作介紹。

讓我們看看如何生成CRUD RESTful接口。

生成服務:

在Express中構建RESTful CRUD API接口需要一些工作。在Feathers中,您只需執行單個命令,回答幾個問題,即可生成代碼:

npm install -g @feathersjs/cli

在本教程中,我們將使用NeDB數據庫。 Feathers確實支持SQL數據庫(如MySQL)和NoSQL數據庫(如MongoDB)。但是,安裝數據庫系統——無論是在您的機器上還是在雲服務器上——都需要花費一定的時間來配置它。另一方面,NeDB是一個完全用JavaScript編寫的內存數據庫,支持MongoDB API的一個子集。無需配置;您只需安裝它即可。它非常適合原型設計和測試新應用程序。這就是我們將在本教程中使用的數據庫。

讓我們簡要地看一下使用此命令生成的一些文件:

  • services/contacts/contact.service.js。這是一個Feathers服務,它為/contacts提供CRUD API端點。非常小,不是嗎?這是因為Feathers為我們完成了繁重的工作。它使我們免於編寫樣板CRUD代碼。
  • services/contacts/contact.hooks.js。在這裡,我們自定義CRUD邏輯的行為。我們有before部分,我們可以在Feathers讀取或寫入數據庫之前檢查或更改數據。我們還有一個after部分,我們可以在將結果發送到客戶端應用程序之前檢查或更改數據庫中的結果。我們可以執行諸如限制訪問、數據驗證、執行聯接操作以及計算附加字段或列的值等操作。
  • models/contacts.model.js。在這裡,我們定義一個模型並將其附加到數據庫表。這也是我們定義模式的地方,該模式可用於在插入或更新新記錄時驗證字段。不幸的是,NeDB不支持模式。但是,我已經提供了一個連接到MongoDB的模型示例,該模型通過mongoose適配器支持模式功能:
mkdir contacts-api
cd contacts-api
feathers generate app

儘管使用NeDB有一些限制,但它仍然是一個非常適合原型設計的數據庫。大多數NoSQL數據庫允許您使用任何結構提交數據,而無需首先定義模式。最好在實現項目需求後實現模式。有了模式,Feathers將使用您定義的規則為您執行字段驗證。您需要一個可用於生產的數據庫(如MongoDB)才能定義模式。請注意,開發數據庫的配置定義在config/default.json中:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},

這是提供數據庫憑據的地方。我們還有另一個配置文件config/production.json。這是在部署Feathers應用程序時使用的生產數據庫配置。在開發過程中使用單獨的數據庫非常重要。否則,您有刪除或損壞生產數據庫中業務運營數據的風險。

現在我們已經設置了聯繫人的CRUD服務,是時候試一試了。您可以使用命令npm start啟動Feather服務器。請注意,此服務器不支持熱重載。因此,每次更改代碼時都需要重新啟動它。為了與我們的Feathers應用程序交互,我們需要一個API瀏覽器工具,例如Postman或Insomnia。在本教程中,我將使用Insomnia,但是您可以輕鬆地使用Postman或任何其他工具來進行操作。

創建新的GET請求(按Ctrl N),並將其命名為“列出聯繫人”。在URL部分,輸入http://localhost:3030/contacts。當您點擊“發送”按鈕時,您應該看到以下視圖:

A Beginner’s Guide to Feathers.js

什麼也沒有!我們的數據庫當前為空,因此我們需要創建一些新的聯繫人。創建一個名為“創建聯繫人”的新請求。填寫其餘字段,如下所示:

A Beginner’s Guide to Feathers.js

如果您忘記將上述表單中的方法更改為POST,您可以稍後進行更改。將方法更改為POST,並將“正文”選項卡更改為JSON。將以下數據複製到JSON選項卡中:

npm install -g @feathersjs/cli

當您點擊“發送”按鈕時,您應該會收到以下響應。請注意,已為您的新聯繫人生成了一個_id

A Beginner’s Guide to Feathers.js

返回“列出聯繫人”,然後再次點擊“發送”按鈕。您應該得到以下結果:

mkdir contacts-api
cd contacts-api
feathers generate app

返回“創建聯繫人”,並發布幾個新記錄:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},
{
  "prettier.singleQuote": true
}

現在讓我們執行更新操作。為此,我們不會使用UPDATE HTTP方法。此方法將完全覆蓋記錄。我們想要做的只是覆蓋單個字段,而不是整個記錄。為此,我們將使用PATCH。創建一個新的請求,“更新聯繫人”,如下所示:

A Beginner’s Guide to Feathers.js

在URL字段中,輸入http://localhost:3030/contacts/{_id}。用第一條記錄的ID替換{_id}。將以下數據粘貼到JSON選項卡中:

feathers generate service

點擊“發送”按鈕。您應該會看到以下結果:

A Beginner’s Guide to Feathers.js

請注意其餘字段保持不變。接下來,我們將刪除一條記錄。這很容易。只需創建一個新的DELETE請求,並將其命名為“刪除聯繫人”。在URL字段中,使用格式http://localhost:3030/contacts/{_id}。就像之前一樣,用要刪除的記錄的ID替換{_id}。點擊“發送”將為您刪除該記錄。您可以通過再次運行“列出聯繫人”請求來確認。

我們剛剛驗證了所有CRUD操作都運行正常。在下一節中,我們將學習如何設置身份驗證。

(以下內容與原文類似,但進行了部分語句調整和段落合併,以提高可讀性和流暢性,並保持原意不變。圖片格式保持不變。)

身份驗證:

目前,我們的/contacts API端點不受保護。如果我們將應用程序部署到雲服務器,任何擁有URL的人都可以訪問和操作我們的記錄。為了限制訪問,我們需要設置身份驗證。我們將使用JSON Web Tokens來為我們的API應用程序實現身份驗證。運行以下命令來設置它:

npm install -g @feathersjs/cli

如您所見,Feathers支持不同的用戶身份驗證方式。 “本地用戶名 密碼”選項最容易設置。

選擇以下選項:

接下來,我們需要創建一個新用戶。我們可以使用Insomnia或任何其他API瀏覽器工具來完成此操作。創建一個新的請求,並將其命名為“創建用戶”。

在JSON選項卡中,發送以下數據:

mkdir contacts-api
cd contacts-api
feathers generate app

您應該會收到類似以下的響應:

我們現在有了一個用戶。讓我們通過創建一個新的請求“列出用戶”並發送URL http://localhost:3030/users來確認這一點。不幸的是,您將收到以下響應:

我們需要進行身份驗證才能訪問此數據。由於我們沒有開發可以用來登錄的前端應用程序,我們將繼續使用API瀏覽器。創建一個新的請求,並將其命名為“獲取JWT令牌”。填寫表單,如下所示:

此請求使用POST方法。為了更清晰起見,您可以將其重命名為“登錄”。在JSON選項卡中,複製以下數據:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},

點擊發送按鈕後,您應該會收到以下響應:

複製令牌代碼(不帶雙引號)。轉到“列出用戶”請求頁面,選擇“Auth”選項卡並選擇Bearer。將此令牌代碼粘貼到TOKEN字段中。

點擊“發送”按鈕後,您應該會看到用戶列表。請注意,我們的身份驗證系統並不完全安全。任何擁有/users URL端點的人都可以創建一個新帳戶並訪問我們的系統。為了防止未經授權創建新帳戶,我們也需要限制該端點。打開文件services/users/users.hooks.js並更新以下代碼段:

這將確保只有經過身份驗證的用戶才能創建新帳戶。下一步是保護/contacts端點。只需打開文件services/contacts/contacts.hooks.js並相應地進行更新:

重新啟動Feathers服務器以使代碼更改生效。如果您嘗試運行“列出聯繫人”請求,您將收到以下響應:

要進行身份驗證,您需要像之前一樣設置Bearer令牌。完成此操作後,您可以發送請求,並且應該會收到您的聯繫人列表。請注意,您之前獲得的令牌將在一天后過期。為提高效率,最好使用環境變量,以便更容易一次更新所有API請求參數。在構建前端應用程序時,您需要將此令牌存儲在本地存儲中。不要使用cookie。否則,您的應用程序將容易受到CSRF攻擊。查看Feathers安全文檔,了解您應該注意的其他安全風險。

現在您已經設置了身份驗證,之後創建的任何新服務都將為您提供保護新端點的選項。讓我們在下一節中查看本教程的最後一個主題。

鉤子(Hooks):

鉤子是附加到服務方法之前、之後或出錯時的中間件函數。它們通常用於處理日誌記錄、限制訪問、保護字段、填充相關實體、發送通知等。如果您查看services/users/users.hooks.js,您可以看到一些內置的Feathers鉤子正在使用中。我們將創建我們自己的自定義鉤子。首先,停止服務器並刪除data/contacts.db數據庫表。接下來,使用以下命令生成一個新鉤子:

npm install -g @feathersjs/cli

使用以下選項創建自定義鉤子process-contact

我們想在這個鉤子中做的是在處理“創建聯繫人”請求之前註入兩個新字段。

  • createdBy:通過_id鏈接到當前登錄的用戶
  • createdOn:添加創建日期

打開文件hooks/process-contact.js並按如下方式更新文件:

接下來,創建一個另一個鉤子populate-user,它將在請求時將用戶對象附加到每個聯繫人記錄。按照以下屏幕截圖中的說明進行操作:

打開文件hooks/populate-user並插入以下代碼:

現在您可以啟動服務器了。使用“創建聯繫人”請求再次創建三個聯繫人。如果您還沒有設置Bearer令牌,請設置它。否則,您將收到授權錯誤。這是創建新聯繫人時應該得到的響應類型:

總結:

我希望您現在已經學習瞭如何快速構建自己的RESTful API服務器。我們只觸及了基礎知識,您應該閱讀完整的指南以發現Feathers可以提供的更多功能,這些功能可以幫助您以最小的努力實現高級功能。您還應該查看Awesome Feathers頁面,其中包含大量的資源。無論您需要插件、項目示例還是教程,您都可能會在那裡找到鏈接。您還應該查看Feathers-plus CLI,它是增強版的Feathers。它在Feathers CLI已提供的功能之上添加了新功能,例如生成用於播種和GraphQL支持的代碼。

如果您想進一步改進contacts-api項目,我建議您使用您選擇的框架創建一個新的前端應用程序。為/contacts/users端點構建登錄屏幕和CRUD頁面。享受實施挑戰的樂趣。

關於Feathers.js的常見問題:

  • 什麼是Feathers.js? Feathers.js是一個用於構建實時應用程序的Web框架。它旨在輕量級、靈活且易於使用,提供了一套用於構建可擴展和可維護服務器端應用程序的工具和模式。

  • Feathers.js支持哪些編程語言? Feathers.js主要在服務器端和客戶端使用JavaScript。它可以在服務器上與Node.js一起使用,並支持客戶端上的各種JavaScript框架,包括React、Angular和Vue.js等框架。

  • Feathers.js的關鍵特性是什麼? Feathers.js包括實時功能(通過WebSocket和RESTful API)、面向服務的架構、對各種數據庫(MongoDB、PostgreSQL等)的支持、身份驗證和授權機制以及用於擴展的插件系統等特性。

  • Feathers.js如何處理實時通信? Feathers.js利用WebSockets的功能來實現實時通信。它開箱即用地提供了一個實時API,允許客戶端在服務器上的數據發生更改時接收實時更新。

  • 我可以將Feathers.js用於服務器端渲染(SSR)嗎? 雖然Feathers.js主要用於構建API和實時應用程序,但它可以與Next.js或Nuxt.js等其他框架結合使用,以實現Web應用程序的服務器端渲染(SSR)。

所有圖片鏈接都保留了原文的格式。

以上是羽毛的初學者指南。的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器