本文的目標是提供如何建立安全性的 Node.js GraphQL API 的快速指南。 【影片教學推薦:node js教學 】
你可能會想到一些問題:
- 使用 GraphQL API 的目的是什麼?
- 什麼是GraphQL API?
- 什麼是GraphQL查詢?
- GraphQL的好處是什麼?
- GraphQL是否優於REST?
- 為什麼我們要使用Node.js?
這些問題都是有意義的,但在回答之前,我們應該深入了解目前Web 開發的狀態:
- 現在幾乎所有的解決方案都使用了某種應用程式介面(API)。
- 即使你只用社群網路(如Facebook或Instagram),還是會用到使用API的前端。
- 如果你感到好奇,你會發現幾乎所有線上娛樂服務都在使用不同類型的API,包括Netflix,Spotify和YouTube等。
你會發現幾乎在每種情況下都會有一個不需要你去詳細了解的API,例如你不需要知道它們是怎樣構建的,並且不需要使用與他們相同的技術就能夠將其整合到你自己的系統中。 API允許你提供一種可以在伺服器和客戶端通訊之間進行通用標準通訊的方式,而不必依賴特定的技術堆疊。
透過結構良好的API,可以擁有可靠、可維護且可擴展的API,可以為多種客戶端和前端應用提供服務。
什麼是 GraphQL API?
GraphQL 是一種 API 所使用的查詢語言,由Facebook開發並用於其內部項目,並於2015年公開發布。它支援讀取、寫入和即時更新等操作。同時它也是開源的,通常會與REST和其他架構放在一起比較。簡而言之,它是基於:
- GraphQL查詢 —— 允許客戶端進行讀取和控制接收資料的方式。
- GraphQL 修改 —— 描述如何在伺服器上寫入資料。關於怎樣將資料寫入系統的GraphQL約定。
#雖然本文應該要展示一個關於如何建置和使用GraphQL API的簡單但真實的場景,但我們不會去詳細介紹GraphQL。因為GraphQL團隊提供了全面的文檔,並在Introduction to GraphQL中列出了幾個最佳實踐。
什麼是GraphQL查詢?
如上所述,查詢是客戶端從API讀取和操作資料的一種方式。你可以傳遞物件的類型,並選擇要接收的欄位類型。以下是一個簡單的查詢:
query{ users{ firstName, lastName } }
我們嘗試從用戶庫中查詢所有用戶,但只接收firstName
和lastName
。此查詢的結果將類似於:
{ "data": { "users": [ { "firstName": "Marcos", "lastName": "Silva" }, { "firstName": "Paulo", "lastName": "Silva" } ] } }
客戶端的使用非常簡單。
使用GraphQL API的目的是什麼?
創建API的目的是使自己的軟體具有可以被其他外部服務整合的能力。即使你的程式被單一前端程式所使用,也可以將此前端視為外部服務,為此,當透過API為兩者之間提供通訊時,你能夠在不同的專案中運作。
如果你在一個大型團隊中工作,可以將其拆分為創建前端和後端團隊,從而允許他們使用相同的技術,並使他們的工作更輕鬆。
在本文中,我們將重點放在如何建構使用GraphQL API的框架。
GraphQL比REST好嗎?
GraphQL是一種適合多種情況的方法。 REST是一種體系結構方法。如今,有大量的文章可以解釋為什麼一個比另一個好,或者為什麼你應該只使用REST而不是GraphQL。另外你可以透過多種方式在內部使用GraphQL,並將API的端點維護為基於REST的架構。
你應該做的是了解每種方法的好處,分析自己正在創建的解決方案,評估你的團隊使用解決方案的舒適程度,並評估你是否能夠指導你的團隊快速掌握這些技術。
本文更偏重於實用指南,而不是GraphQL和REST的主觀比較。如果你想查看這兩者的詳細比較,我建議你查看我們的另一篇文章,為什麼GraphQL是API的未來。
在今天的文章中,我們將專注於如何用Node.js建立GraphQL API。
為什麼要使用Node.js?
GraphQL有好幾個不同的支援庫可供使用。出於本文的目的,我們決定使用Node.js環境下的函式庫,因為它的應用非常廣泛,而且Node.js允許開發人員使用他們熟悉的前端語法進行伺服器端開發。
掌握GraphQL
我们将为自己的 GraphQL API 设计一个构思的框架,在开始之前,你需要了解Node.js和Express的基础知识。这个GraphQL示例项目的源代码可以在这里找到(https://github.com/makinhs/no...)。
我们将会处理两种类型的资源:
- Users ,处理基本的CRUD。
- Products, 我们对它的介绍会详细一点,以展示GraphQL更多的功能。
Users 包含以下字段:
- id
- firstname
- lastname
- password
- permissionLevel
Products 包含以下字段:
- id
- name
- description
- price
至于编码标准,我们将在这个项目中使用TypeScript。
让我们开始编码!
首先,要确保安装了最新的Node.js版本。在本文发布时,在Nodejs.org上当前版本为10.15.3。
初始化项目
让我们创建一个名为node-graphql
的新文件夹,并在终端或Git CLI控制台下使用以下命令:npm init
。
配置依赖项和TypeScript
为了节约时间,在我们的Git存储库中找到以下代码去替换你的package.json
应该包含的依赖项:
{ "name": "node-graphql", "version": "1.0.0", "description": "", "main": "dist/index.js", "scripts": { "tsc": "tsc", "start": "npm run tsc && node ./build/app.js" }, "author": "", "license": "ISC", "dependencies": { "@types/express": "^4.16.1", "@types/express-graphql": "^0.6.2", "@types/graphql": "^14.0.7", "express": "^4.16.4", "express-graphql": "^0.7.1", "graphql": "^14.1.1", "graphql-tools": "^4.0.4" }, "devDependencies": { "tslint": "^5.14.0", "typescript": "^3.3.4000" } }
更新package.json
后,在终端中执行:npm install
。
接着是配置我们的TypeScript模式。在根文件夹中创建一个名为tsconfig.json
的文件,其中包含以下内容:
{ "compilerOptions": { "target": "ES2016", "module": "commonjs", "outDir": "./build", "strict": true, "esModuleInterop": true } }
这个配置的代码逻辑将会出现在app文件夹中。在那里我们可以创建一个app.ts
文件,在里面添加以下代码用于基本测试:
console.log('Hello Graphql Node API tutorial');
通过前面的配置,现在我们可以运行 npm start
进行构建和测试了。在终端控制台中,你应该能够看到输出的字符串“Hello Graphql Node API tutorial”。在后台场景中,我们的配置会将 TypeScript 代码编译为纯 JavaScript,然后在build
文件夹中执行构建。
现在为GraphQL API配置一个基本框架。为了开始我们的项目,将添加三个基本的导入:
- Express
- Express-graphql
- Graphql-tools
把它们放在一起:
import express from 'express'; import graphqlHTTP from 'express-graphql'; import {makeExecutableSchema} from 'graphql-tools';
现在应该能够开始编码了。下一步是在Express中处理我们的程序和基本的GraphQL配置,例如:
import express from 'express'; import graphqlHTTP from 'express-graphql'; import {makeExecutableSchema} from 'graphql-tools'; const app: express.Application = express(); const port = 3000; let typeDefs: any = [` type Query { hello: String } type Mutation { hello(message: String) : String } `]; let helloMessage: String = 'World!'; let resolvers = { Query: { hello: () => helloMessage }, Mutation: { hello: (_: any, helloData: any) => { helloMessage = helloData.message; return helloMessage; } } }; app.use( '/graphql', graphqlHTTP({ schema: makeExecutableSchema({typeDefs, resolvers}), graphiql: true }) ); app.listen(port, () => console.log(`Node Graphql API listening on port ${port}!`));
我们正在做的是:
- 为Express服务器启用端口3000。
- 定义我们想要用作快速示例的查询和修改。
- 定义查询和修改的工作方式。
好的,但是typeDefs和resolvers中发生了什么,它们与查询和修改的关系又是怎样的呢?
- typeDefs - 我们可以从查询和修改中获得的模式的定义。
- Resolvers - 在这里我们定义了查询和修改的功能和行为,而不是想要的字段或参数。
- Queries - 我们想要从服务器读取的“获取方式”。
- Mutations - 我们的请求将会影响在自己的服务器上的数据。
现在让我们再次运行npm start,看看我们能得到些什么。我们希望该程序运行后产生这种效果:Graphql API 侦听3000端口。
我们现在可以试着通过访问 http://localhost:3000/graphql 查询和测试GraphQL API:
好了,现在可以编写第一个自己的查询了,先定义为“hello”。
请注意,我们在typeDefs
中定义它的方式,页面可以帮助我们构建查询。
这很好,但我们怎样才能改变值呢?当然是mutation!
现在,让我们看看当我们用mutation对值进行改变时会发生什么:
现在我们可以用GraphQL Node.js API进行基本的CRUD操作了。接下来开始使用这些代码。
Products
对于Products,我们将使用名为products的模块。为了是本文不那么啰嗦,我们将用内存数据库进行演示。先定义一个模型和服务来管理Products。
我们的模型将基于以下内容:
export class Product { private id: Number = 0; private name: String = ''; private description: String = ''; private price: Number = 0; constructor(productId: Number, productName: String, productDescription: String, price: Number) { this.id = productId; this.name = productName; this.description = productDescription; this.price = price; } }
与GraphQL通信的服务定义为:
export class ProductsService { public products: any = []; configTypeDefs() { let typeDefs = ` type Product { name: String, description: String, id: Int, price: Int } `; typeDefs += ` extend type Query { products: [Product] } `; typeDefs += ` extend type Mutation { product(name:String, id:Int, description: String, price: Int): Product! }`; return typeDefs; } configResolvers(resolvers: any) { resolvers.Query.products = () => { return this.products; }; resolvers.Mutation.product = (_: any, product: any) => { this.products.push(product); return product; }; } }
Users
对于users,我们将遵循与products模块相同的结构。我们将为用户提供模型和服务。该模型将定义为:
export class User { private id: Number = 0; private firstName: String = ''; private lastName: String = ''; private email: String = ''; private password: String = ''; private permissionLevel: Number = 1; constructor(id: Number, firstName: String, lastName: String, email: String, password: String, permissionLevel: Number) { this.id = id; this.firstName = firstName; this.lastName = lastName; this.email = email; this.password = password; this.permissionLevel = permissionLevel; } }
同时,我们的服务将会是这样:
const crypto = require('crypto'); export class UsersService { public users: any = []; configTypeDefs() { let typeDefs = ` type User { firstName: String, lastName: String, id: Int, password: String, permissionLevel: Int, email: String } `; typeDefs += ` extend type Query { users: [User] } `; typeDefs += ` extend type Mutation { user(firstName:String, lastName: String, password: String, permissionLevel: Int, email: String, id:Int): User! }`; return typeDefs; } configResolvers(resolvers: any) { resolvers.Query.users = () => { return this.users; }; resolvers.Mutation.user = (_: any, user: any) => { let salt = crypto.randomBytes(16).toString('base64'); let hash = crypto.createHmac('sha512', salt).update(user.password).digest("base64"); user.password = hash; this.users.push(user); return user; }; } }
提醒一下,源代码可以在 https://github.com/makinhs/no... 找到。
现在运行并测试我们的代码。运行npm start
,将在端口3000上运行服务器。我们现在可以通过访问http://localhost:3000/graphql来测试自己的GraphQL
尝试一个mutation,将一个项目添加到我们的product列表中:
为了测试它是否有效,我们现在使用查询,但只接收id
,name
和price
:
query{ products{ id, name, price } } 将会返回: { "data": { "products": [ { "id": 100, "name": "My amazing product", "price": 400 } ] } }
很好,按照预期工作了。现在可以根据需要获取字段了。你可以试着添加一些描述:
query{ products{ id, name, description, price } }
现在我们可以对product进行描述。接下来试试user吧。
mutation{ user(id:200, firstName:"Marcos", lastName:"Silva", password:"amaz1ingP4ss", permissionLevel:9, email:"marcos.henrique@toptal.com") { id } }
查询如下:
query{ users{ id, firstName, lastName, password, email } }
返回内容如下:
{ "data": { "users": [ { "id": 200, "firstName": "Marcos", "lastName": "Silva", "password": "kpj6Mq0tGChGbZ+BT9Nw6RMCLReZEPPyBCaUS3X23lZwCCp1Ogb94/ oqJlya0xOBdgEbUwqRSuZRjZGhCzLdeQ==", "email": "marcos.henrique@toptal.com" } ] } }
到此为止,我们的GraphQL骨架完成!虽然离实现一个有用的、功能齐全的API还需要很多步骤,但现在已经设置好了基本的核心功能。
总结和最后的想法
让我们回顾一下本文的内容:
- 在Node.js下可以通过Express和GraphQL库来构建GraphQL API;
- 基本的GraphQL使用;
- 查询和修改的基本用法;
- 为项目创建模块的基本方法;
- 测试我们的GraphQL API;
为了集中精力关注GraphQL API本身,我们忽略了几个重要的步骤,可简要总结如下:
- 新项目的验证;
- 使用通用的错误服务正确处理异常;
- 验证用户可以在每个请求中使用的字段;
- 添加JWT拦截器以保护API;
- 使用更有效的方法处理密码哈希;
- 添加单元和集成测试;
请记住,我们在Git (https://github.com/makinhs/node-graphql-tutorial)上有完整的源代码。可以随意使用、fork、提问、pull 并运行它!请注意,本文中提出的所有标准和建议并不是一成不变的。
这只是设计GraphQL API的众多方法之一。此外,请务必更详细地阅读和探索GraphQL文档,以了解它提供的内容以及怎样使你的API更好。
英文地址原文:https://www.toptal.com/graphql/graphql-nodejs-api
更多编程相关知识,可访问:编程教学!!
以上是建立安全Node.js GraphQL API的快速指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver CS6
視覺化網頁開發工具

Dreamweaver Mac版
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebStorm Mac版
好用的JavaScript開發工具