如何为JavaScript构建后端？

介绍 在本教程中，您将学习如何使用 back4app 为 vanilla javascript 应用程序构建完整的后端。 我们将逐步整合 back4app 的基本功能——如数据库管理、云代码函数、rest 和 graphql api、用户身份验证以及实时查询（实时查询）——以创建一个安全、可扩展且强大的后端，与您用纯 javascript 编写的前端无缝通信。 您还将看到，back4app 的快速设置和直观环境可以大幅减少与手动配置服务器和数据库相比所需的时间和精力。 在此过程中，您将获得关键功能的实践经验，包括高级安全功能、使用云作业调度任务以及为外部集成设置 webhook。 在本教程结束时，您将为将此基础设置提升为生产就绪的应用程序做好充分准备，或根据需要轻松地整合自定义逻辑和第三方 api。 前提条件 要完成本教程，您需要： 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app https //www back4app com/docs/get started/new parse app 如果您没有账户，可以免费创建一个。请按照上面的指南准备好您的项目。 基本的原生 javascript 环境 您可以通过简单地创建一个 index html 文件并引用外部脚本来设置此环境。确保您有一个现代的网页浏览器或可以运行 javascript 的环境。 node js（版本 14 或更高）（可选） 如果您计划在本地安装 parse javascript sdk 或通过命令行管理代码部署，则需要 node js。 安装 node js https //nodejs org/en/download/ 熟悉 javascript 基础知识 mdn web 文档关于 javascript https //developer mozilla org/en us/docs/web/javascript 如果您是该语言的新手，请复习基本的 javascript 概念。 在开始之前，请确保您具备所有这些前提条件。设置好您的 back4app 项目和基本的 javascript 环境将帮助您更轻松地跟随。 步骤 1 – 设置 back4app 项目 创建新项目 在 back4app 上构建您的 vanilla javascript 后端的第一步是创建一个新项目。如果您还没有创建一个，请按照以下步骤操作： 登录到您的 back4app 账户 。 点击您的 back4app 仪表板中的“新应用”按钮 。 给您的应用命名 （例如，“vanillajs backend tutorial”）。 项目创建后，您将在 back4app 仪表板中看到它列出。这个项目将是本教程中讨论的所有后端配置的基础。 连接 parse sdk back4app 依赖 parse 平台来管理您的数据，提供实时功能，处理用户身份验证等。将您的 vanilla javascript 应用连接到 back4app 可以通过在您的 html 中包含 parse sdk 或者如果您正在运行构建过程，则通过 npm 安装它。 检索您的 parse 密钥 在您的 back4app 仪表板中，导航到您应用的“应用设置”或“安全性与密钥”部分以找到您的 应用程序 id 和 javascript 密钥 您还会找到 parse 服务器 url （通常格式为 https //parseapi back4app com )。 选项 1：通过脚本标签添加 parse 将此脚本添加到您的 index html （将 version 替换为 parse js sdk 仓库 https //github com/parse community/parse sdk js/releases 的有效版本） 选项 2：使用 npm（如果您有构建过程） npm install parse 然后在你的主 javascript 文件中（例如， main js ) import parse from 'parse/dist/parse min js'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; 通过完成此步骤，你已在你的 vanilla javascript 前端和 back4app 后端之间建立了安全连接。所有请求和数据交易都通过此 sdk 安全路由，从而减少了手动 rest 或 graphql 调用的复杂性（尽管在需要时你仍然可以使用它们）。 步骤 2 – 设置数据库 保存和查询数据 在设置好你的 back4app 项目并将 parse sdk 集成到你的 javascript 代码中后，你现在可以开始保存和检索数据。创建记录的最简单方法是使用 parse object 类 // example create a todo item async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } // example query all todo items async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } 或者，你可以使用 back4app 的 rest api 端点 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo back4app 还提供了 graphql 接口 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 这些多样的选项让您可以以最适合您开发过程的方式集成数据操作——无论是通过 parse sdk、rest 还是 graphql。 架构设计和数据类型 默认情况下，parse 允许 动态创建架构 , 但您也可以在 back4app 仪表板中定义您的类和数据类型，以获得更多控制。 导航到您的 back4app 仪表板中的 “数据库” 部分 创建一个新类 （例如，“todo”）并添加相关列，例如标题（字符串）和 iscompleted（布尔值）。 back4app 还支持各种数据类型： 字符串 , 数字 , 布尔值 , 对象 , 日期 , 文件 , 指针, 数组, 关系 , 地理点 , 和多边形 您可以为每个字段选择适当的类型。如果您愿意，您也可以让 parse 在您第一次从 javascript 代码保存对象时自动创建这些列。 back4app 提供一个 ai 代理，可以帮助您设计数据模型： 打开 ai 代理 从您的应用仪表板或菜单中 用简单的语言描述您的数据模型 （例如，“请在 back4app 上创建一个新的待办事项应用，带有完整的类模式。”）。 让 ai 代理为您创建模式 使用ai代理可以在设置数据架构时节省时间，并确保应用程序的一致性。 关系数据 如果您有关系数据——比如，一个 类别 对象指向多个 待办事项 项——您可以在parse中使用 指针 或 关系 。例如，向一个 类别 添加指针： // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todo = new parse object('todo'); // construct a pointer to the category const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; // set fields todo set('title', title); todo set('category', categorypointer); try { return await todo save(); } catch (err) { console error('error creating task with category relationship ', err); } } 当您查询时，您还可以包含指针数据： const query = new parse query('todo'); query include('category'); const todoswithcategory = await query find(); 这个 include('category') 调用在每个待办事项旁边获取类别详细信息，使您的关系数据无缝可访问。 实时查询 为了实时更新，back4app提供了 实时查询 。在您的原生javascript应用中，您可以订阅特定类的更改： 在您的back4app仪表板中启用 实时查询 ，在您应用的 服务器设置 下。确保“实时查询”已开启。 在您的代码中初始化 实时查询订阅 ： src/parseconfig js // src/parseconfig js import parse from 'parse/dist/parse min js'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; import parse from ' /parseconfig js'; async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } 通过订阅，您可以在创建、更新或删除新待办事项时接收实时通知。此功能对于需要多个用户在不刷新页面的情况下查看最新数据的协作或动态应用程序特别有价值。 步骤 3 – 使用 acl 和 clp 应用安全性 back4app 安全机制 back4app 非常重视安全性，提供了 访问控制列表 (acls) 和 类级权限 (clps) 这些功能允许您限制谁可以在每个对象或每个类的基础上读取或写入数据，确保只有授权用户可以修改您的数据。 访问控制列表 (acls) 一个 acl 应用于单个对象，以确定哪些用户、角色或公众可以执行读/写操作。例如 async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } 当您保存对象时，它具有一个 acl，防止除了指定用户之外的任何人读取或修改它。 类级权限 (clps) clps 管理整个类的默认权限，例如该类是否可以公开读取或写入，或者是否只有某些角色可以访问它。 前往您的 back4app 控制面板 , 选择您的应用程序，然后打开 数据库 部分。 选择一个类 (例如，“待办事项”)。 打开类级权限 标签。 配置您的默认设置，例如“需要身份验证”以进行读取或写入，或“无访问”以供公众使用。 这些权限设定了基线，而 acls 则微调单个对象的权限。一个强大的安全模型通常结合了 clps（广泛限制）和 acls（细粒度的每个对象限制）。有关更多信息，请访问 应用安全指南。 步骤 4 – 编写和部署云函数 云代码是parse server环境的一个功能，允许您在服务器端运行自定义javascript代码——无需管理您的服务器或基础设施。通过编写云代码，您可以通过额外的业务逻辑、验证、触发器和集成来扩展您的back4app后端，这些都在parse server上安全高效地运行。 工作原理 当您编写云代码时，通常会将您的javascript函数、触发器和任何所需的npm模块放在一个 main js (或 app js ) 文件中。然后将此文件部署到您的back4app项目中，该项目在parse server环境中执行。由于这些函数和触发器在服务器上运行，您可以信任它们处理机密逻辑、处理敏感数据或进行仅限后端的api调用——这些过程您可能不想直接暴露给客户端。 您为back4app应用编写的所有云代码都在back4app管理的parse server内部运行，因此您无需担心服务器维护、扩展或配置。每当您更新并部署您的main js文件时，正在运行的parse server将更新为您最新的代码。 main js 文件结构 一个典型的 main js 可能包含： 需要 任何所需模块的声明（npm包、内置node模块或其他云代码文件）。 云函数定义 使用 parse cloud define() 触发器 如 parse cloud beforesave() , parse cloud aftersave() , 等等。 您安装的npm模块 （如果需要）。例如，您可能会安装一个像 axios 的包来进行http请求。然后，您可以在文件顶部引用（或导入）它。 // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); 通过安装和使用npm模块的能力，云代码变得极其灵活，使您能够与外部api集成、执行数据转换或执行复杂的服务器端逻辑。 典型用例 业务逻辑 例如，您可以通过聚合多个对象属性来计算用户在游戏中的得分，然后自动存储该数据。 数据验证 确保某些字段存在或用户在保存或删除记录之前具有正确的权限。 触发器 当数据发生变化时执行操作（例如，当用户更新其个人资料时发送通知）。 集成 连接第三方api或服务。例如，您可以直接从云代码集成支付网关、slack通知或电子邮件营销平台。 安全执行 通过在您的云代码函数中验证和清理输入参数来增加额外的安全层。例如，您可以确保传入的数据符合特定格式，拒绝无效或恶意输入，并根据用户角色或权限在执行敏感操作之前强制执行访问规则。 部署您的函数 下面是一个简单的云代码函数，用于计算从客户端发送的文本字符串的长度： main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 通过 https //www back4app com/docs/local development/parse cli 1 安装cli： 对于 linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash 对于 windows 下载 b4a exe 文件从 发布页面 https //github com/back4app/parse cli/releases 2 https //www back4app com/docs/local development/parse cli#f cxi b4a configure accountkey 3 部署您的云代码 b4a deploy 通过仪表板部署 在您应用的仪表板中，转到 云代码 > 函数 将函数复制/粘贴到 main js 编辑器中 点击 部署 调用您的函数 从香草javascript使用parse sdk（假设您已按上述配置parse）： async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } 您也可以通过rest调用它： curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength 或者通过graphql： mutation { calculatetextlength(input { text "hello graphql" }) { result } } 这种灵活性使您能够将自定义逻辑集成到您的香草javascript前端或任何其他支持rest或graphql的客户端中。 步骤5 – 配置用户身份验证 back4app中的用户身份验证 back4app利用 parse user 类作为身份验证的基础。默认情况下，parse处理密码哈希、会话令牌和安全存储。这意味着您不必手动设置复杂的安全流程。 设置用户身份验证 在一个原生javascript设置中，您可以使用以下代码创建一个新用户： async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } 登录现有用户： async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } 通过rest，登录可能看起来像： curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login 会话管理 成功登录后，parse会创建一个 会话令牌 ，该令牌存储在用户对象中。您可以访问当前登录的用户： const currentuser = parse user current(); if (currentuser) { console log('currently logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } parse会自动在后台处理基于令牌的会话，但您也可以手动管理或撤销它们。这在您需要注销时非常有用： await parse user logout(); 社交登录集成 back4app 和 parse 可以与流行的 oauth 提供商集成，例如 google 或 facebook , 通过安装额外的包或使用现有的适配器。例如，您可以通过配置您的 facebook 应用 id 并使用 parse facebookutils login() 详细说明可能有所不同，因此请参考 社交登录文档。 https //www back4app com/docs/platform/sign in with apple const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; 电子邮件验证和密码重置 要启用电子邮件验证和密码重置 在您的 back4app 控制面板中导航到 电子邮件设置 。 启用电子邮件验证 以确保新用户验证其电子邮件地址的所有权。 配置发件人地址 , 电子邮件模板，以及如果需要的话，您的自定义域名。 这些功能通过验证用户对电子邮件的所有权并提供安全的密码恢复方法来提高账户安全性和用户体验。 步骤 6 – 处理文件存储 上传和检索文件 parse 包含 parse file 类来处理文件上传，back4app 安全地存储这些文件 async function uploadimage(file) { // file might be obtained from an \<input type="file" /> or any other source const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } 要将文件附加到数据库中的对象，可以这样做： async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } 检索文件 url 非常简单： const imagefile = photo get('imagefile'); const imageurl = imagefile url(); 您可以通过将此 imageurl 设置为 src 来在您的网页中显示它 \<img> 标签。 文件安全性 parse server 提供灵活的配置来管理文件上传安全性。以下示例显示了如何设置权限以控制谁可以将文件上传到服务器： enableforpublic 设置为 true 时，允许任何人，无论其身份验证状态如何，上传文件。 enableforanonymoususer 控制匿名用户（未注册）是否可以上传文件。当启用时，临时或访客用户可以上传文件。 enableforauthenticateduser 指定是否仅允许经过身份验证的用户上传文件。这对于确保只有受信任的用户可以访问此功能是理想的。 第 7 步 – 使用云作业调度任务 云作业 云作业 在back4app中让您可以安排和运行后台的例行任务——例如清理旧数据或发送每日摘要电子邮件。一个典型的云作业可能看起来像这样： // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo'); const query = new parse query(todo); // for example, remove todos older than 30 days const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 部署您的云代码 使用新作业（通过cli或仪表板）。 转到back4app仪表板 > 应用设置 > 服务器设置 > 背景作业 安排 作业每天运行或按您需要的任何间隔运行。 云作业使您能够自动化后台维护或其他定期过程——无需手动干预。 步骤8 – 集成webhooks webhooks 允许您的 back4app 应用在特定事件发生时向外部服务发送 http 请求。这对于与第三方系统（如支付网关（例如，stripe）、电子邮件营销工具或分析平台）集成非常强大。 导航到 webhooks 配置 在您的 back4app 仪表板 > 更多 > webhooks，然后点击添加 webhook。 设置一个端点 （例如， https //your external service com/webhook endpoint ）。 配置触发器 以指定在您的 back4app 类或 cloud code 函数中哪些事件将触发 webhook。 例如，如果您想在创建新 todo 时通知 slack 频道： 创建一个接受传入 webhook 的 slack 应用。 复制 slack webhook url。 在您的 back4app 仪表板中，将端点设置为该 slack url，用于事件“todo 类中的新记录。” 如果需要，您还可以添加自定义 http 头或有效负载。 您还可以通过在触发器中进行自定义 http 请求来定义 cloud code 中的 webhooks，例如 beforesave、aftersave： 第 9 步 – 探索 back4app 管理面板 “ back4app 管理应用 ”是一个基于 web 的管理界面，旨在让非技术用户执行 crud 操作并处理常规数据任务，而无需编写任何代码。它提供了一个 以模型为中心 , 用户友好 的界面，简化了数据库管理、自定义数据管理和企业级操作。 启用管理应用 通过访问 应用仪表板 > 更多 > 管理应用 ，然后点击“启用管理应用”按钮来启用它。 创建第一个管理员用户 （用户名/密码），这会自动在您应用的架构中生成一个新角色（b4aadminuser）和类（b4asetting、b4amenuitem 和 b4acustomfield）。 选择一个子域名 以访问管理界面并完成设置。 登录 使用您创建的管理员凭据访问新的管理员应用程序仪表板。 启用后，back4app 管理应用程序使您可以轻松查看、编辑或删除数据库中的记录——无需直接使用 parse 仪表板或后端代码。通过可配置的访问控制，您可以安全地与需要清晰、点击式管理数据的团队成员或客户共享此界面。 结论 通过遵循本综合教程，您已经： 创建了一个安全的后端 用于一个原生javascript应用程序在back4app上。 配置了一个数据库 具有类模式、数据类型和关系。 集成了实时查询 （实时查询）以便立即更新数据。 应用了安全措施 使用acl和clp来保护和管理数据访问。 实现了云代码 函数在服务器端运行自定义业务逻辑。 设置了用户身份验证 支持电子邮件验证和密码重置。 管理文件上传 和检索，具有可选的文件安全控制。 调度云作业 用于自动化后台任务。 使用webhooks 与外部服务集成。 探索了back4app管理面板 用于数据管理。 凭借坚实的原生javascript前端和强大的back4app后端，您现在已具备开发功能丰富、可扩展和安全的应用程序的良好条件。继续探索更高级的功能，集成您的业务逻辑，并利用back4app的强大功能为您节省无数小时的服务器和数据库管理时间。祝您编码愉快！ 下一步 构建一个生产就绪的javascript应用程序 通过扩展这个后端以处理更复杂的数据模型、缓存策略和性能优化。 集成高级功能 例如专门的身份验证流程、基于角色的访问控制或外部api（如支付网关）。 查看back4app的官方文档 以深入了解高级安全性、性能调优和日志分析。 探索其他教程 关于实时聊天应用程序、物联网仪表板或基于位置的服务。您可以将这里学到的技术与第三方api结合起来，创建复杂的现实世界应用程序。