Quickstarters
如何构建Astro前端并将其连接到后端?
32 分
在本教程中,您将使用 astro 构建一个待办事项列表应用程序,并将其连接到由 back4app 提供的托管后端服务。 如果您想掌握基本的 crud(创建、读取、更新、删除)操作,同时使用 astro 构建现代静态前端与动态数据,那么本指南就是为您设计的。 在本教程结束时,您的应用程序将与处理数据存储、身份验证等的后端无缝交互。 开发全栈应用程序可能会因为后端配置和数据库管理而具有挑战性。 为了简化您的流程,我们使用 back4app— 一个强大的后端即服务 —这样您就可以专注于创建快速且轻量的 astro 前端。 back4app 提供完全托管的 nosql 数据库、用户身份验证、用于自定义逻辑的云代码以及无缝集成的 sdk。这使您能够构建和部署可扩展的应用程序,而无需管理服务器基础设施。 关键要点 通过遵循本教程,您将: 使用 vite 初始化一个现代的 astro 项目。 集成后端服务以管理您应用程序的数据。 实现基本的 crud 操作, 动态待办事项列表 。 使用 back4app 上的容器化工作流部署您的完整功能应用程序。 先决条件 在开始之前,请确保您已: 在您的机器上安装了 node js 和 npm。请使用 node v 和 npm v 验证安装。 基本的 astro 知识, 包括基于文件的路由和组件创建。 一个 back4app 账户, 用于管理您的后端服务。如果您还没有,请在 back4app https //www back4app com/ 注册。 在这些先决条件到位后,您就可以开始构建您的项目。 项目设置 首先设置您的本地开发环境并初始化一个新的 astro 项目。 确保您已安装 node js (lts 版本) 。如果没有,请从 nodejs org https //nodejs org/ 下载它。 通过运行以下命令创建您的 astro 项目 npm create astro\@latest todo app 导航到您的项目目录 cd todo app 启动开发服务器以验证设置 npm run dev 您的 astro 应用现在应该在浏览器中打开。前端准备好后,继续在 back4app 上创建后端。 创建 todo 后端 back4app 提供一个完全托管的后端服务,基于 parse , 包括 nosql 数据库、身份验证、云代码和自动生成的 api。 按照以下步骤设置您的后端: 登录 到您的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用。" 命名您的应用 (例如, todoapp ) 并选择 nodejs/parse 作为后端类型。 导航到 "数据库" > "浏览器" , 点击 "创建类" , 并选择 "自定义" 将类命名为 任务 并设置其权限以允许公共读取和写入(您可以稍后进行细化)。 在 任务 类中,添加以下字段: 标题 (字符串)– 任务标题。 描述 (字符串)– 关于任务的详细信息。 完成 (布尔值)– 任务完成状态。 截止日期 (日期)– 任务的截止日期。 点击 "保存" 创建模式。 将 back4app 与 astro 集成 您将使用 parse javascript sdk 将您的 astro 应用连接到 back4app 后端。 安装 parse sdk npm install parse 通过创建一个专用模块来配置 sdk。例如,在 src/lib/parseclient js 中创建一个文件,内容如下 import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; 您现在可以在您的 astro 组件或页面中导入此模块以与后端交互。 开发前端 您的 astro 应用将由组件和页面组成,以添加、显示、更新和删除任务。使用 astro 的基于文件的路由和组件来构建动态待办事项列表。 构建您的组件 要创建前端,您将使用 solid js。在 astro 中使用 solid js,请安装 solid js 包。 像这样 npm install solid js 创建一个 src/components 文件夹来组织你的 ui 组件: mkdir src/components 你将创建以下组件: taskformsolid jsx – 用于添加新任务。 taskitemsolid jsx – 用于表示单个任务。 tasklistsolid jsx – 用于显示任务列表。 todoapp jsx – 用于显示完整的应用程序。 taskformsolid jsx 该组件渲染一个表单,用于捕获任务详细信息并将其提交到 back4app。 // taskformsolid jsx import { createsignal } from 'solid js'; import parse from ' /lib/parseclient'; export default function taskformsolid(props) { const \[title, settitle] = createsignal(''); const \[description, setdescription] = createsignal(''); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title()); task set('description', description()); task set('completed', false); await task save(); if (props refreshtasks) { props refreshtasks(); } settitle(''); setdescription(''); } catch (error) { console error('error adding task ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title()} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description()} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } taskitemsolid jsx 该组件表示一个单独的任务,提供按钮以切换其完成状态或删除任务。 // taskitemsolid jsx import { createsignal } from 'solid js'; import parse from ' /lib/parseclient'; export default function taskitemsolid(props) { const \[iscompleted, setiscompleted] = createsignal(props task completed); const togglecomplete = async () => { try { const query = new parse query('task'); const tasktoupdate = await query get(props task id); const newcompletedstate = !iscompleted(); tasktoupdate set('completed', newcompletedstate); await tasktoupdate save(); setiscompleted(newcompletedstate); if (props refreshtasks) { props refreshtasks(); } } catch (error) { console error('error updating task ', error); } }; const deletetask = async () => { try { const query = new parse query('task'); const tasktodelete = await query get(props task id); await tasktodelete destroy(); if (props refreshtasks) { props refreshtasks(); } } catch (error) { console error('error deleting task ', error); } }; return ( \<div class={`task item ${iscompleted() ? 'completed' ''}`}> \<div> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \</div> \<div> \<button onclick={togglecomplete}> {iscompleted() ? 'undo' 'complete'} \</button> \<button onclick={deletetask}>delete\</button> \</div> \</div> ); } tasklistsolid jsx 该组件通过遍历数组并渲染每个taskitem来显示任务列表。 // tasklistsolid jsx import { for, show } from 'solid js'; import taskitemsolid from ' /taskitemsolid'; export default function tasklistsolid(props) { return ( \<div class="task list"> \<show when={props tasks length > 0} fallback={\<p>no tasks available\</p>}> \<for each={props tasks}> {(task) => ( \<taskitemsolid task={task} refreshtasks={props refreshtasks} /> )} \</for> \</show> \</div> ); } todoapp jsx 该组件导入并显示其他组件。它显示整个应用程序。 // todoapp jsx import { createsignal, onmount, createeffect } from 'solid js'; import parse from ' /lib/parseclient'; import taskformsolid from ' /taskformsolid'; import tasklistsolid from ' /tasklistsolid'; export default function todoapp() { const \[tasks, settasks] = createsignal(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error('error fetching tasks ', error); } }; onmount(() => { fetchtasks(); }); return ( <> \<taskformsolid refreshtasks={fetchtasks} /> \<tasklistsolid tasks={tasks()} refreshtasks={fetchtasks} /> \</> ); } 页面集成 在你的主页面(例如, src/pages/index astro ),管理任务的状态并集成你的组件。 \ // index astro import todoapp from ' /components/todoapp'; import layout from ' /layouts/layout astro'; import parse from ' /lib/parseclient'; \ \<layout> \<div class="container"> \<h1>to do list\</h1> \<todoapp client\ load /> \</div> \</layout> 应用程序样式 要添加全局基本样式,请将以下 css 样式添加到 layouts astro 文件中,位于 src/layouts 目录下。 container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 现在将 is\ global 属性添加到样式标签中。 \<!doctype html> \<html lang="en"> \<head> \<meta charset="utf 8" /> \<meta name="viewport" content="width=device width" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<meta name="generator" content={astro generator} /> \<title>astro basics\</title> \</head> \<body> \<slot /> \</body> \</html> \<style is\ global> / your styles / \</style> 在 back4app 上部署前端 back4app web deployment 提供了一个容器化环境来托管你的 astro 应用程序。 生成生产构建 npm run build 创建 dockerfile 在你的项目根目录中创建一个 dockerfile ,内容如下 \# build stage from node 18 alpine as build workdir /app \# copy package files and install dependencies copy package json package lock json / run npm ci \# copy all files and build the application copy run npm run build \# production stage from node 18 alpine workdir /app \# set environment variables env node env=production env host=0 0 0 0 env port=3000 \# copy the build output from the build stage copy from=build /app/dist/ /dist/ \# install the static file server run npm install g serve \# expose the port expose 3000 \# start serving the static files from the "dist" folder cmd \["serve", " s", "dist", " l", "3000"] 在本地测试 docker 容器 构建你的 docker 镜像 docker build t todo frontend 运行容器 docker run p 3000 3000 todo frontend 在你的浏览器中打开 http //localhost 3000 以验证你的 astro 应用是否正确提供服务。 部署到 back4app 初始化一个 git 仓库,添加你的项目文件,并提交 git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 登录到 back4app web 部署 https //www back4app com/containers 点击 "创建新应用" , 提供您的项目名称,并选择您的 github 仓库。 授权 back4app 并选择 dockerfile 部署 确认构建设置并点击 "部署" 以启动部署 监控您的部署 部署后,使用 back4app 控制面板来 查看调试日志 监控容器性能和资源使用 在新提交时触发重建 如有需要,配置自定义域 在 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 测试与调试 部署后,确认您的 astro 前端与 back4app 后端正确通信: api 验证: 使用浏览器的开发者工具 (f12 → 网络) 检查 api 调用。 任务操作: 通过 ui 添加、完成和删除任务,并在 back4app 数据库浏览器中验证更新。 错误处理: 检查控制台日志中的错误,并测试边缘情况,例如空提交。 性能测试: 使用浏览器工具模拟慢网络条件以评估响应能力。 与 astro 一起使用 back4app 的最佳实践 为了优化您的应用程序: 高效请求: 在处理多个任务时使用批量操作: const tasks = \[task1, task2, task3]; parse object saveall(tasks); 优化查询 仅检索必要字段 query select('title', 'completed'); 环境管理 将敏感密钥存储在环境变量中 astro parse app id=your app id astro parse js key=your js key 安全性 使用acl限制访问 task setacl(new parse acl(parse user current())); 后端卸载 利用云代码处理复杂逻辑以减少api暴露。 结论 您现在已经通过创建astro前端、将其与back4app的后端集成并使用容器化工作流进行部署,构建了一个全栈待办事项应用程序。 本教程指导您完成每一步——从本地开发到云部署——确保您的astro ui与后端服务之间的无缝交互。 展望未来,考虑增强功能,如实时更新、改进的身份验证和第三方集成。要进一步学习,请访问 back4app文档 https //www back4app com/docs 并探索社区资源。

