如何使用 Astro 创建 CRUD 应用？

概述 在本指南中，您将学习如何使用 astro 创建一个 crud（创建、读取、更新和删除）web 应用程序。 本教程将引导您设置一个 back4app 项目——我们强大的后端——并设计一个支持基本操作的数据结构。 然后，我们将构建一个与 back4app 通过 rest/graphql api 进行通信的 astro 前端，确保安全和高效的数据管理。 在本指南结束时，您将拥有一个生产就绪的 web 应用程序，配备用户身份验证和安全的数据处理。 您将学习什么 如何使用 astro 和 back4app 构建 crud 应用程序的结构。 设计一个具有自定义集合的可扩展后端。 使用拖放管理界面轻松管理数据。 使用 rest 或 graphql 将您的 astro 前端与 back4app 集成。 如果需要，部署您的 astro 项目并使用 docker 进行容器化。 前提条件 在开始之前，请确认您已拥有 一个拥有新项目的 back4app 账户。 查看 使用 back4app 入门 https //www back4app com/docs/get started/new parse app 以获取指导。 设置一个 astro 开发环境。 使用官方的 astro 文档 https //docs astro build 开始。确保安装了 node js（版本 14 及以上）。 对 javascript、astro 和 rest api 有基本的了解。 如果您需要复习，请访问 astro 文档 https //docs astro build 。 步骤 1 – 初始化您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用” 从您的仪表板 命名您的项目： basic crud app astro 并按照说明完成设置 创建新项目 创建后，您的项目将出现在您的 back4app 仪表板上——这是您后端配置的基础。 步骤 2 – 构建您的数据库架构 构建您的数据模型 对于我们的 crud 应用程序，您将定义几个集合。以下是示例集合及其字段和类型，以帮助您有效配置数据库架构。此结构支持高效的 crud 操作。 1\ 项目收集 字段 类型 目的 id 对象id 自动生成的主键。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要概述。 创建于 日期 创建时间戳。 更新于 日期 最后修改的时间戳。 2\ 用户收集 字段 类型 目的 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 账户创建时。 更新于 日期 账户的最后更新时间。 您可以通过在 back4app 控制面板中创建新类并添加适当的列来手动配置这些集合。 创建新班级 要添加字段，请选择数据类型，提供字段名称，必要时定义默认值，并标记该字段是否为必填项。 创建列 利用 back4app ai 代理进行模式设置 back4app 中集成的 ai 代理可以自动生成您的模式。在 ai 代理界面中描述您所需的集合和字段，查看其建议，并将其应用于您的项目。 示例提示 create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto created) \ 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 – 将astro与back4app连接 在配置好后端后，是时候集成您的astro前端了。 利用rest/graphql api 由于astro是一个针对性能优化的静态网站生成器，我们将使用rest或graphql api与back4app进行交互。这种方法避免了对parse sdk的需求。 示例：通过 rest 获取项目 以下是 astro 组件中 rest api 调用的示例： // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> 在您的 astro 组件中集成类似的 api 调用以创建、更新和删除记录。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过在对象上设置 acl 来保护您的数据。例如，创建一个只有所有者可以修改的项目： async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } 配置类级权限 (clps) 在 back4app 仪表板中，调整每个集合的 clp 以定义谁可以访问和修改您的数据。 步骤 6 – 添加用户身份验证 设置用户注册和登录 back4app 使用 parse 的用户类进行身份验证。在您的 astro 项目中，通过利用 rest api 调用创建用户注册和登录组件。 示例：用户注册 // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> 您可以为用户登录和会话管理构建类似的组件。 第 7 步 – 部署您的 astro 前端 back4app的web部署功能允许您通过连接您的github存储库无缝托管您的astro项目。 7 1 构建您的生产版本 在您的项目目录中打开终端。 运行构建命令： npm run build 这将生成一个优化的 dist 文件夹，包含您的静态资产。 检查构建： 确保 dist 文件夹包含一个 index html 以及其他资产目录。 7 2 组织您的项目存储库 您的存储库应包括完整的astro源代码。一个示例结构可能是： basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md 示例文件 src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 提交并推送您的代码到 github 初始化一个 git 仓库（如果尚未完成）： git init 添加所有文件： git add 提交您的更改： git commit m "初始提交用于 astro 前端" 在 github 上创建一个仓库 （例如， basic crud app astro ) 并推送： git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 将 github 与 back4app web 部署链接 访问 web 部署： 登录到您的 back4app 控制面板，导航到您的项目 ( basic crud app astro ），并选择 web 部署 选项。 连接您的 github 账户： 按照提示授权 back4app 访问您的代码库。 选择您的代码库和分支： 选择代码库（例如， basic crud app astro ）和分支（通常是 main ）。 7 5 配置部署设置 构建命令： 指定构建命令（例如， npm run build ），如果您的代码库缺少预构建输出。 输出目录： 将其设置为 dist ，以便 back4app 知道在哪里找到您的静态文件。 环境变量： 添加任何所需的变量，例如 api 密钥。 7 6 将您的 astro 应用程序 docker 化（可选） 如果您更喜欢容器化部署，请包含一个 dockerfile ，例如： \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果需要，请在您的 web 部署配置中集成 docker 设置。 7 7 启动您的应用程序 点击部署按钮 在 web 部署部分。 监控构建过程： back4app 将检索您的代码，构建它，并部署您的应用程序。 接收您的 url： 一旦部署，back4app 将提供一个 url，您的网站将在该 url 上上线。 第8步 – 总结与未来增强 干得好！你现在已经使用astro和back4app创建了一个完整的crud应用程序。你的项目包括一个具有详细项目和用户集合的后端，以及一个通过rest/graphql api执行所有crud操作的前端。 下一步： 增强前端： 添加详细视图、搜索功能和实时通知等功能。 扩展后端功能： 考虑集成云函数或额外的api端点以实现更复杂的逻辑。 深入探索： 在 back4app文档 https //www back4app com/docs 和 astro文档 https //docs astro build 中探索更多资源以了解高级主题。 通过遵循本教程，你现在掌握了使用astro和back4app构建强大且可扩展的crud应用程序的知识。享受编码和探索新可能性！