通过建造学习!本教程通过使用NetLify无服务器功能和可通行的aect应用程序来展示jamstack体系结构。尽管Jamstack强调静态托管,但该项目展示了动态功能,包括完整的CRUD功能。
技术选择
代表JavaScript,API和Markup的Jamstack以新颖的方式利用现有技术。该教程的技术堆栈优先考虑易于部署和托管。 Netlify功能可以使用可呼射的后端CRUD操作,从而在Netlify上无缝部署。 Airtable简化了数据库管理,提供用户友好的接口和JavaScript SDK,从而消除了对单独的数据库托管和管理的需求。
应用概述
该应用程序跟踪在线课程,就像个人学习队列一样。它允许用户添加,更新,按购买并删除课程。
源代码:我创建了在线课程,包括使用React和NetLify功能构建安全的,可以生产的Jamstack应用程序的新课程。本课程涵盖了身份验证,可通行的数据存储,样式的组件,Netlify CI等。了解更多→
可通行设置
可播放数据库的“基础”。请按照以下步骤:
- 创建一个免费的Airtable帐户。
- 创建一个新的基础(我将我的名字命名为“ Jamstack Demos”)。
- 用这些列创建一个名为“课程”的表:
-
name
(单行文本) -
link
(单行文本) -
tags
(多个选择 - 添加标签,例如“ node”,“ react”,“ jamstack”,“ javascript”) -
purchased
(复选框)
-
- 添加一些示例课程数据。
获取可驾驶的凭据
在编码之前,请收集这些可通行的证书:
- API键:在您的Airtable帐户概述页面上找到。
- 基本ID:位于您的基本详细信息中。
- 表名:(例如,“课程”)
项目设置
Github上有一个入门项目。请按照以下步骤:
- 分叉存储库。
- 克隆本地的分叉存储库。
- 签出
starter
分支(git checkout starter
)。
该项目包括一个create-react-app
结构,无服务器功能的functions
目录以及netlify.toml
配置文件。安装dotenv
软件包:
NPM安装Dotenv
用您的可呼叫凭证在项目root中创建.env
文件:
<code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>
无服务器功能
NetLify函数是/functions
目录中的JavaScript文件。 courses.js
文件充当主要API端点。它基于HTTP方法,使用辅助功能( getCourses
, createCourse
, updateCourse
, deleteCourse
):
exports.handler = async(event)=> { 如果(event.httpmethod ==='get'){ 返回等待GetCourses(事件); } // ...其他HTTP方法 };
airtable.js
文件配置可播放连接:
require('dotenv')。config(); var airtable = require('airtable'); // ...可动用的基座和桌子设置...
Crud操作
助手功能与可呼射相互作用:
-
getCourses.js
:使用table.select().firstPage()
,处理错误并格式化响应。 -
createCourse.js
:使用table.create()
创建一个新课程。 -
updateCourse.js
:使用table.update()
更新课程。 -
deleteCourse.js
:使用table.destroy()
删除课程。
测试:使用netlify dev
在本地运行功能。使用Postman或失眠等工具进行测试端点。
反应前端
React应用程序与无服务器功能进行交互:
-
App.js
:loadCourses
使用fetch('/api/courses')
提取课程。 -
CourseForm.js
:submitCourse
发送发布请求以创建新课程。 -
Course.js
:markCoursePurchased
发送请求请求,deleteCourse
发送删除请求。
部署进行Netlify
通过连接GITHUB存储库来部署到NetLify。指定:
- 构建命令:
npm run build
- 发布目录:
build
- 从
.env
文件中添加环境变量。
结论
该教程展示了Jamstack架构的简单性和力量。 React,NetLify功能和可播放的组合提供了强大且易于部署的全堆栈应用程序。探索其他Jamstack服务和技术,以进一步增强您的开发工作流程。
以上是与React,无服务器和可通行的jamstack一起的详细内容。更多信息请关注PHP中文网其他相关文章!

文章讨论了CSS保证金属性,特别是“保证金:40px 100px 120px 80px”,其应用程序以及对网页布局的影响。

本文讨论了CSS边境属性,重点是自定义,最佳实践和响应能力。主要论点:边境 - 拉迪乌斯(Border-Radius)对响应式设计最有效。

本文讨论了CSS中评论的使用,详细介绍了单线和多行评论语法。它认为注释可以增强代码可读性,可维护性和协作,但如果无法正确管理,可能会影响网站性能。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3汉化版
中文版,非常好用

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具