如何构建 Solid.js 前端并将其连接到后端

在本指南中，您将使用 solid js 构建一个待办事项列表应用程序，并将其连接到由 back4app 提供的强大后端。 本教程被设计为理想的起点，因为它涵盖了基本的 crud（创建、读取、更新、删除）操作，并指导您设计一个清晰且功能齐全的用户界面。 到最后，您将拥有一个完全可操作的应用程序，演示如何集成托管的后端服务，同时利用 solid js 实现响应式前端。 开发全栈应用程序可能会很具挑战性，因为设置后端、管理数据库、处理身份验证和部署基础设施的复杂性。 为了简化这个过程，我们使用 back4app，它提供可扩展的 后端即服务（baas）解决方案 , 让您专注于构建前端，而它管理托管、数据库和 api。 back4app 提供全面的后端服务，包括现成的数据库、身份验证、用于服务器端逻辑的云代码以及用于顺利集成的 sdk。它还支持容器化部署，使其成为托管全栈应用程序的灵活选择。 借助这些工具，您可以快速开发和部署应用程序，而无需担心服务器维护。 关键要点 通过遵循本教程，您将学习到： 使用 vite 初始化一个现代的 solid js 项目。 无缝集成后端服务以处理您的应用程序数据。 为动态和交互式用户界面实现基本的 crud 操作。 使用容器化工作流在 back4app 上部署一个完全功能的 待办事项列表 应用程序。 先决条件 在开始之前，请确保您具备以下工具和技能： node js 和 npm 从 nodejs org https //nodejs org/ 安装 node js（推荐 lts 版本），并通过在终端中运行 node v 和 npm v 来验证。 基本的 solid js 知识 需要熟悉组件、反应信号（使用 createsignal ）和 jsx 语法。如果您是 solid js 的新手，建议先复习其基础知识。 一个 back4app 账户 在 back4app https //www back4app com/ 注册以设置和管理您的后端服务。 在具备这些先决条件后，您就可以开始设置项目并开始构建。 项目设置 首先设置您的本地开发环境，并使用 vite 初始化您的 solid js 项目，以获得快速的开发体验。 验证您的机器上是否安装了 node js (lts 版本) 。如有需要，请从 nodejs org https //nodejs org/ 下载并安装。确认安装： node v npm v 使用 vite 初始化您的 solid js 项目。在终端中运行以下命令（将 todo app 替换为您想要的项目名称）： npm create vite\@latest todo app template solid 切换到您的项目目录： cd todo app 安装所有必要的依赖项： npm install 启动开发服务器以确认您的设置： npm run dev 您的 solid js 应用程序现在应该在本地运行。打开浏览器中显示的 url 以进行验证。接下来，您将设置 back4app 上的后端以管理数据存储和 api 交互。 创建待办事项后端 back4app 提供一个完全托管的后端服务，基于 parse ，提供 nosql 数据库、身份验证、云代码和自动生成的 api，开箱即用。 本节将指导您创建一个 任务 数据模型，以存储您的待办事项，并将其与您的 solid js 前端链接。 设置您的后端应用程序 登录 到您的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用。" 为您的应用命名 （例如， todosolidapp ) 并选择 nodejs/parse 作为后端类型。 应用创建后，导航到 "数据库" > "浏览器" 点击 "创建一个类" 并选择 "自定义" 。将类命名为 任务 并设置 类级别权限 以允许公共读取和写入（您可以稍后收紧这些设置）。 在 任务 类中，添加以下字段： 标题 （字符串）– 任务标题。 描述 （字符串）– 任务的详细信息。 完成 （布尔值）– 表示任务是否完成的状态。 截止日期 （日期）– 任务的截止日期。 点击 "保存" 以完成您的模式。 将 back4app 与 solid js 集成 使用 parse javascript sdk 将 back4app 集成到您的 solid js 项目中，以与您的后端进行通信。通过 npm 安装 sdk npm install parse 通过用您的 application id 和 javascript key 初始化 sdk 来进行配置。请从您的 back4app 仪表板的 app settings > security & keys 中获取这些信息。 在您的 src/index jsx （或等效的入口文件）中，按如下方式导入和配置 parse： import { render } from "solid js/web"; import ' /index css' import app from " /app"; 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; render(() => \<app />, document getelementbyid("root")); 后端配置完成后，您可以开始在 solid js 中构建待办事项列表 ui 并实现 crud 操作。 使用 solid js 开发前端 现在您的后端已连接，使用 solid js 构建待办事项应用程序的用户界面。您将创建组件来添加、显示、更新和删除任务，同时使用响应式信号管理状态。 组织您的组件 您的应用程序将由以下关键组件组成： taskform jsx – 管理添加新任务。 tasklist jsx – 显示所有任务并提供完成或删除它们的控制。 taskitem jsx – 代表一个单独的任务，并提供标记为完成或删除的操作。 在 src 中创建一个 components 文件夹，并添加这些文件： mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx 使用 solid js 管理状态 利用 solid js 的 createsignal 和 createeffect 进行状态管理和副作用处理。首先在 app jsx 中设置状态： import { createsignal, onmount } from "solid js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; import parse from "parse/dist/parse min js"; function app() { 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 ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks()} fetchtasks={fetchtasks} /> \</div> ); } export default app; 构建任务表单组件 在 taskform jsx , 创建一个受控表单以添加任务。使用 createsignal 管理输入值，并将数据提交到 back4app import { createsignal } from "solid js"; import parse from "parse/dist/parse min js"; function taskform(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(); props fetchtasks(); 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> ); } export default taskform; 显示任务列表 在 tasklist jsx , 使用 taskitem 组件为每个条目渲染任务列表 import taskitem from " /taskitem"; function tasklist(props) { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={props fetchtasks} /> )) )} \</div> ); } export default tasklist; 创建任务项组件 在 taskitem jsx , 设置操作以将任务标记为完成或删除它 import parse from "parse/dist/parse min js"; function taskitem(props) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick={handlecomplete}> {props task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; 为您的应用程序添加样式 在 index css 文件中添加以下样式，位于 src 文件夹 / center the content and add spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container 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; } container p { font size 1rem; } 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; } } 在您的 src/index jsx import " /index css"; 最终确定用户界面 您的 solid js 待办事项应用程序现在具有与 back4app 集成的动态前端和自定义样式。该应用程序允许您添加、显示、更新和删除任务，同时保持高效的前端与后端通信。 接下来，您将使用 back4app 的 web 部署平台部署您的 solid js 应用程序。 在 back4app web 部署上部署前端 back4app web 部署提供了一个完全托管的容器化环境来部署您的应用程序。通过基于 docker 的部署，您可以轻松打包您的 solid js 前端并进行部署。 为生产配置 vite 使用 vite 构建的 solid js 应用程序默认在开发模式下运行。对于生产，构建一个静态版本并使用轻量级的 web 服务器（如 nginx）进行服务。 更新你的 vite config js 以设置正确的基础路径： import { defineconfig } from 'vite'; import solidplugin from 'vite plugin solid'; export default defineconfig({ plugins \[solidplugin()], base ' /', // ensures correct asset paths in containerized environments }); 生成生产就绪的文件： npm run build 为你的应用创建 dockerfile 在项目根目录创建一个 dockerfile 来定义您的应用程序如何容器化 \# use an official lightweight node js image to build the app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# use nginx to serve the static files from nginx\ alpine \# copy custom nginx config for spa routing copy nginx conf /etc/nginx/conf d/default conf \# copy built app from build stage copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 创建 dockerfile 后，配置 nginx 以在您尝试直接访问路由时正确路由请求到您的 solid js 应用程序的根 index html 文件。为此，在项目的根目录中创建一个 nginx conf 文件，并粘贴下面的代码块。 server { listen 80; server name localhost; root /usr/share/nginx/html; index index html; \# gzip settings for better performance gzip on; gzip vary on; gzip min length 10240; gzip proxied expired no cache no store private auth; gzip types text/plain text/css text/xml text/javascript application/x javascript application/xml application/javascript; gzip disable "msie \[1 6]\\ "; \# handle static file requests location \\ (?\ jpg|jpeg|gif|png|ico|svg|woff2|woff|eot|ttf|css|js)$ { expires 30d; add header cache control "public, max age=2592000"; try files $uri =404; } \# redirect all requests to index html for spa routing location / { try files $uri $uri/ /index html; } \# error pages error page 404 /index html; error page 500 502 503 504 /50x html; location = /50x html { root /usr/share/nginx/html; } } 在本地测试容器 在部署之前，构建并测试您的 docker 容器 docker build t todo solid frontend 运行容器 docker run p 8080 80 todo solid frontend 在浏览器中访问 http //localhost 8080 以确认您的应用程序是否正确提供服务。 推送到 github 并通过 back4app 部署 将您的项目推送到 github 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 部署进行部署： 登录到 back4app web 部署 https //www back4app com/containers 点击 "创建新应用" , 提供一个名称，并选择 github 仓库 授权 back4app 访问您的仓库并选择 todo solid 仓库 选择 dockerfile 部署 并确认构建设置 点击 "部署" 开始构建过程 监控和管理部署 部署后，使用 back4app 控制面板来 查看日志以进行调试 监控容器性能和资源使用 通过新的提交触发重新部署 如有需要，配置自定义域 测试和调试您的应用程序 一旦部署，彻底测试你的 solid js 应用程序： 验证 api 连接： 打开浏览器的开发者控制台 (f12 → 网络) 检查任务操作期间的 api 调用。 添加和检索任务： 使用 ui 添加任务，然后刷新并确认数据在 back4app 的数据库浏览器中的持久性。 crud 操作： 测试标记任务为完成和删除，确保更新反映在后端。 处理边缘情况： 验证表单输入并使用浏览器开发者工具模拟较慢的网络条件。 如果出现问题，请查看 back4app 日志或检查你的 api 配置。 使用 back4app 服务的最佳实践 通过以下方式增强应用程序的性能和安全性： 优化 api 调用： 对于多个操作使用批量请求，并在查询中仅选择必要的字段。 保护环境变量： 将敏感凭据存储在环境变量中。使用 vite，创建一个 env 文件： vite parse app id=your app id vite parse js key=your js key 实现自动扩展： 在 back4app web 部署中启用自动扩展以应对高流量场景。 增强安全性： 使用类级权限 (clps) 限制数据修改，并根据需要设置 acl。 利用云代码： 将复杂逻辑卸载到云代码中，以提高性能并减少 api 暴露。 结论 您现在已经使用 solid js 构建了一个全栈待办事项应用程序，前端使用 solid js，后端使用 back4app 的强大服务。 本教程涵盖了从初始化 solid js 项目和集成 parse sdk 到通过容器化工作流在 back4app 上部署您的应用程序的整个过程。 随着您的进展，考虑添加高级用户身份验证、实时更新和第三方集成等功能，以进一步增强您的应用程序。 有关更多详细信息和支持，请查看 back4app 文档 https //www back4app com/docs 。