首页 web前端 css教程 使用Express构建无服务器GraphQl API并NETLIFY

使用Express构建无服务器GraphQl API并NETLIFY

Apr 04, 2025 am 10:12 AM

使用Express构建无服务器GraphQl API并NETLIFY

构建API似乎令人生畏,但不一定是。本教程展示了如何在一个小时内使用最小代码和随时可用的工具创建和部署一个简单的,只读的API。不需要丰富的后端经验;对JavaScript和NPM的基本了解就足够了。

本指南揭示了诸如REST之类的常见API概念,并引入了GraphQL和无服务器体系结构。我们将使用易于可用的工具,并在此过程中解释其目的。最后,您将拥有一个没有服务器管理头痛的API。

关键概念:GraphQL和无服务器

API从根本上涉及阅读和更新数据。 REST API使用URL来定义数据访问点,需要多个复杂数据检索的请求。 GraphQL通过允许客户指定单个请求中所需的确切数据来提高效率。数据关系表示为图形,优化数据获取。

无服务器体系结构消除了管理服务器的需求。您只为消耗的资源付费,简化部署和维护。我们将利用此无服务器功能来利用NetLify功能。

贸易工具

  1. node.js and express: node.js允许服务器端JavaScript执行,而Express则简化了API开发,其功能诸如路由和中间件之类的功能。

  2. NETLIFY函数:无服务器平台提供免费部署和范围的功能缩放。 NetLify DEV允许本地测试。

项目设置

  1. 创建一个新的项目目录并使用npm init初始化。

  2. 安装必要的软件包: npm i express express-graphql graphql body-parser serverless-http netlify-cli -g

文件结构和配置

  • netlify.toml配置netlify以构建和部署。至关重要的是,它指定了无服务器功能的位置:
 [建造]
命令=“ npm run构建”
发布=“构建”
功能=“功能”
登录后复制
  • /functions/api.js包含API代码。

api.js代码分解

  1. 导入依赖性:
 const express = require(“ express”);
const bodyparser = require(“ Body-Parser”);
const expressGraphQl = require(“ express-graphql”);
const serverless = require(“无服务器-HTTP”);
const {graphQlSchema,graphqlobjectType,graphqlString} = require(“ graphql”);
登录后复制
  1. 初始化Express和无服务器包装器:
 const app = express();
Module.exports.handler = Serverless(App);
登录后复制
  1. 配置Express中间件:
 app.use(bodyparser.json());
app.use(“/”,ExpressGraphQl({schema:schema:graphiql:true}));
登录后复制
  1. 定义GraphQL模式:
 const schema = new GraphQlSchema({{
  查询:新graphqlobjectType({{
    名称:“ Helloworld”,
    字段:()=>({
      信息: {
        类型:GraphQlString,
        分辨率:()=>“ Hello World”,
      },,
    }),
  }),
});
登录后复制

本地发展和测试

在您的终端中运行netlify dev 。访问http://localhost:8888/.netlify/functions/api GraphIQL操场。通过查询{ message }来测试您的API。

部署

将您的项目连接到NetLify(例如,通过GitHub)进行自动部署。 Netlify将处理构建和部署您的无服务器功能。

可选:请求重定向

在您的项目root中创建一个_redirects文件,以将请求从/api重定向到NetLify函数:

 <code>/api /.netlify/functions/api 200!</code>
登录后复制

这简化了API访问。

结论

本教程为构建和部署无服务器GraphQl API的基础提供了基础。该方法是可扩展的,可以根据需要进行更复杂的API开发。请记住要探索链接的资源,以深入研究GraphQL和无服务器技术。完整的源代码可在GitHub上找到(原始文章中提供的链接)。

以上是使用Express构建无服务器GraphQl API并NETLIFY的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热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

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
Google字体可变字体 Google字体可变字体 Apr 09, 2025 am 10:42 AM

我看到Google字体推出了新设计(Tweet)。与上一次大型重新设计相比,这感觉更加迭代。我几乎无法分辨出区别

如何使用HTML,CSS和JavaScript创建动画倒计时计时器 如何使用HTML,CSS和JavaScript创建动画倒计时计时器 Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多

HTML数据属性指南 HTML数据属性指南 Apr 11, 2025 am 11:50 AM

您想了解的有关HTML,CSS和JavaScript中数据属性的所有信息。

如何通过CSS选择第一个类名为item的子元素? 如何通过CSS选择第一个类名为item的子元素? Apr 05, 2025 pm 11:24 PM

在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时,常常会遇到元素个数不�...

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

在前端开发中,如何使用CSS和JavaScript实现类似Windows 10设置界面的探照灯效果? 在前端开发中,如何使用CSS和JavaScript实现类似Windows 10设置界面的探照灯效果? Apr 05, 2025 pm 10:21 PM

在前端开发中如何实现类似Windows...

我们如何创建一个在SVG中生成格子呢模式的静态站点 我们如何创建一个在SVG中生成格子呢模式的静态站点 Apr 09, 2025 am 11:29 AM

格子呢是一块图案布,通常与苏格兰有关,尤其是他们时尚的苏格兰语。在Tar​​tanify.com上,我们收集了5,000多个格子呢

See all articles