如何使用 Ractive.js 构建基本的 CRUD 应用程序：逐步指南

概述 在本指南中，您将学习如何使用 ractive js 构建一个完全功能的 crud（创建、读取、更新、删除）应用程序。 本教程涵盖了从设置 back4app 项目到设计数据库架构，最后将 ractive js 前端与后端集成的整个工作流程。这个项目被称为 basic crud app ractive ，将作为您 web 应用程序的强大数据管理解决方案。 您将首先初始化一个 back4app 项目，手动或借助 back4app ai agent 配置集合和字段。 接下来，您将使用直观的 back4app 管理应用程序进行简单的数据处理，然后通过 rest api 调用将 ractive js 界面与 back4app 集成。本指南还解释了如何使用高级访问控制方法来保护您的后端。 到最后，您将拥有一个生产级的 crud 应用程序，不仅执行基本操作，还支持用户身份验证和安全数据管理。 要点 掌握构建crud应用程序，熟练管理数据并拥有可靠的后端。 了解如何设计可扩展的数据架构，并将其与ractive js前端连接。 利用拖放管理界面（back4app管理应用）轻松进行crud操作。 学习部署策略，包括docker容器化，以快速启动web应用。 先决条件 在开始之前，请确保您拥有： 一个活跃的back4app账户，并创建了一个新项目。 请参考 back4app入门指南 https //www back4app com/docs/get started/new parse app 以获取指导。 一个ractive js开发环境。 使用模板或您喜欢的配置设置项目，确保安装node js（v14或更高版本）。 基本的javascript、ractive js和rest api知识。 根据需要查看 ractive js文档 https //ractive js org/ 。 步骤1 – 项目初始化 启动一个新的back4app项目 登录到您的 back4app 账户。 在您的仪表板上选择“新应用程序”选项。 命名您的项目 basic crud app ractive 并按照屏幕上的说明进行创建。 创建新项目 设置完成后，您的项目将在仪表板上可见，准备进行进一步的后端配置。 步骤 2 – 设计您的数据库架构 构建您的数据模型 对于这个 crud 应用程序，您将定义几个集合来管理您的数据。以下是集合的示例，包含建议的字段和数据类型，以确保后端优化 crud 功能。 1\ 收藏：物品 此收藏包含每个物品的详细信息。 字段 类型 目的 id 对象id 自动生成的主标识符。 标题 字符串 项目标题。 描述 字符串 项目的简要总结。 创建于 日期 记录创建时间戳。 更新于 日期 最后更新时间戳。 2\ 收集：用户 此集合管理用户数据和身份验证。 字段 类型 目的 id 对象id 自动生成的主标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全认证的哈希密码。 创建于 日期 账户创建的时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过 back4app 仪表板手动建立这些集合，方法是创建新类并添加所需的列。 创建新类 通过选择适当的数据类型、命名列以及设置默认值或必填值来定义字段。 创建列 利用 back4app ai 代理进行模式自动化 back4app ai 代理可以根据您的提示自动生成您的模式。这个高效的工具通过快速建立您的集合和字段来简化项目管理。 如何操作 ai 代理： 从您项目的仪表板访问 ai 代理。 输入详细的提示，描述您所需的集合和字段。 审查并将自动生成的模式应用到您的项目中。 示例提示 create these collections for my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 这种方法确保您的模式一致并符合您应用的需求。 步骤 3 – 激活管理应用程序并管理 crud 操作 关于管理界面 back4app 管理员应用程序提供了一种无代码解决方案来处理您的后端数据。其拖放界面使得添加、修改或删除记录等 crud 操作变得轻而易举。 如何启用管理员应用程序 前往您的 back4app 仪表板上的“更多”菜单。 选择“管理员应用程序”并点击 “启用管理员应用程序。” 设置您的第一个管理员用户，这也配置了角色（例如 b4aadminuser ）和系统集合。 启用管理员应用程序 一旦激活，登录管理员应用程序以管理您的集合。 管理员应用程序仪表板 通过管理员应用程序管理数据 添加条目： 在集合（如项目）中使用“添加记录”选项输入新数据。 查看/编辑记录： 选择任何记录以检查详细信息或更新字段。 删除条目： 使用删除功能消除过时的记录。 这个用户友好的界面简化了所有 crud 功能。 步骤 4 – 将 ractive js 连接到 back4app 现在您的后端已经准备好，是时候将您的 ractive js 前端连接到 back4app。 使用 ractive js 进行 rest api 调用 由于 ractive js 没有专门的 parse sdk，您将使用 rest api 调用来执行 crud 操作。 示例：获取项目 创建一个 ractive 组件，从您的 back4app items 集合中检索并显示数据。 items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); 您可以将这些 api 交互集成到您的 ractive js 组件中，以处理所有 crud 操作。 步骤 5 – 加强后端安全性 实施访问控制 通过在您的对象上设置访问控制列表 (acl) 来增强安全性。例如，要使某个项目私有： async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } 配置类级权限 在 back4app 仪表板中，调整每个集合的类级权限 (clps) 以定义默认访问策略。此步骤确保只有授权用户可以访问敏感数据。 步骤 6 – 管理用户身份验证 配置用户账户 back4app 使用 parse 的用户类来处理身份验证。在您的 ractive js 应用程序中通过 rest api 调用实现用户注册和登录。 示例：用户注册 async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } 为登录和会话处理实现类似的例程。可以通过 back4app 仪表板设置密码恢复和电子邮件验证等附加功能。 步骤 7 – 部署您的 ractive js 前端 back4app 的 web 部署功能允许您通过将其链接到您的 github 存储库来托管您的 ractive js 应用程序。 7 1 构建您的生产版本 在终端中打开您的项目文件夹。 执行构建过程（这可能是基于您的设置的自定义命令，例如使用 rollup 或 webpack）。 确保您的生产文件夹（通常命名为 dist 或 build ）包含您的静态文件。 7 2 组织和提交你的代码 你的项目仓库应该有一个清晰的结构，例如： basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md 示例文件： ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; 提交你的代码 初始化一个 git 仓库： git init 添加你的文件： git add 提交更改： git commit m "ractive js 前端的初始提交" 创建一个 github 仓库（例如， basic crud app ractive ) 并推送你的代码： git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 将您的代码库链接到 back4app 网络部署 登录到您的 back4app 控制面板，选择您的项目 ( basic crud app ractive ），然后选择 web deployment 选项。 按照提示连接您的 github 账户。 选择包含您的 ractive js 代码的代码库和分支（通常是 main )。 7 4 设置部署参数 配置以下内容： 构建命令： 指定您的构建命令（例如， npm run build )。 输出目录： 设置为您的生产文件夹（例如， build 或 dist )。 环境变量： 包含任何必要的 api 密钥或配置变量。 7 5 使用 docker 容器化（可选） 如果您希望通过 docker 部署，请在您的项目中包含一个 dockerfile ： \# base build stage using node js from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 启动您的应用程序 点击 部署 按钮在 back4app 中 监控部署过程，back4app 将拉取并构建您的代码库 完成后，back4app 将提供一个 url 用于您的托管 ractive js 应用 7 7 验证部署 在浏览器中打开提供的 url 测试所有路由，确保每个资源（css、js、图片）正确加载 如果出现问题，请查看部署日志并检查您的构建设置 第 8 步 – 总结与未来方向 干得好！您已经成功构建了一个完整的 crud 应用程序，使用了 ractive js 和 back4app。 您设置了一个名为 basic crud app ractive 的项目，为项目中的 items 和 users 定义了精确的集合，并使用直观的管理应用程序进行后端管理。 此外，您将 ractive js 前端与后端集成，并加强了数据安全性。 下一步： 增强您的用户界面： 添加详细视图、搜索功能或实时更新等功能。 扩展您的后端： 集成高级后端逻辑，例如云函数或第三方 api 服务。 深化您的学习： 探索 back4app 文档 https //www back4app com/docs 以获取更多高级配置和优化。 通过本教程，您现在具备了使用 back4app 为您的 ractive js 应用程序创建可扩展 crud 后端的专业知识。祝您编码愉快！