如何创建一个基本的 CRUD 应用程序与 StencilJS？全面教程

概述 在本指南中，您将学习如何使用 stenciljs 构建一个基本的 crud（创建、读取、更新和删除）应用程序。 本教程将引导您构建一个执行基本操作以有效管理数据的 web 应用程序。我们将首先启动一个名为 basic crud app stenciljs 的 back4app 项目，它将作为您强大的后端。 之后，您将通过定义集合和字段来设计一个可扩展的数据库——可以手动进行，也可以借助 back4app ai agent。这一步确保您的数据库能够可靠地支持所有 crud 操作。 接下来，您将利用 back4app 管理应用程序，这是一个直观的拖放界面，可以无缝管理您的集合。这个无代码工具简化了 crud 操作的处理。 最后，您将通过 rest/graphql api 将您的 stenciljs 前端连接到 back4app。虽然可以使用 parse sdk，但我们将专注于适合 stenciljs 的 api 集成，确保您的后端通过高级访问控制保持安全。 到本教程结束时，您将拥有一个支持基本 crud 功能以及用户身份验证和强大数据管理的生产就绪 web 应用程序。 基本见解 掌握构建 crud 应用程序的过程，配备可靠的后端系统。 了解如何设计可扩展的后端并将其与 stenciljs 前端连接。 学习使用无代码管理工具（back4app 管理应用）进行高效的数据操作。 发现部署策略，包括 docker 容器化，以快速启动您的 web 应用程序。 先决条件 在开始之前，请确保您拥有： 一个具有活动项目的 back4app 账户。 需要帮助？查看 back4app 入门指南 https //www back4app com/docs/get started/new parse app 。 一个 stenciljs 开发环境。 使用官方的 stenciljs 文档 https //stenciljs com/docs/introduction 来设置您的环境。确保安装 node js（v14 或更高版本）。 基本的 javascript、web 组件和 rest api 知识。 如有必要，请复习 stenciljs 概念 https //stenciljs com/docs 。 步骤 1 – 启动您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 从您的仪表板中选择“新应用”选项 。 为您的项目命名： basic crud app stenciljs 并按照屏幕上的说明完成设置。 创建新项目 设置完成后，您的项目将在仪表板上可见，为您的后端配置提供坚实的基础。 步骤 2 – 构建您的数据库模式 定义数据模型 对于这个 crud 应用程序，您需要设置多个集合。以下是示例集合及其字段和数据类型，以帮助您为高效的 crud 操作构建数据库。 1\ 收藏：物品 此收藏包含每个物品的详细信息。 字段 数据类型 细节 id 对象id 自动生成的主键。 标题 字符串 项目的名称或标题。 描述 字符串 项目的简要描述。 创建于 日期 项目创建的时间戳。 更新于 日期 最后更新的时间戳。 2\ 收集：用户 此集合管理用户档案和身份验证。 字段 数据类型 细节 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 用户账户的最后更新时间戳。 您可以通过在 back4app 控制面板中为每个集合创建一个新类并添加具有适当数据类型的列，手动添加这些集合。 创建新类 按照提示选择数据类型，指定字段名称，设置默认值，并标记该字段是否为必填项。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理是您仪表板中可用的创新工具，它根据简单的提示自动生成您的数据库模式。此功能加快了项目设置，并确保您的模式与应用程序需求保持一致。 如何利用 ai 代理： 访问 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 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 – 将 stenciljs 与 back4app 连接 在通过管理员应用配置和管理您的后端后，下一步是将您的 stenciljs 前端连接到 back4app。 选项 a：使用 rest 或 graphql api 对于 stenciljs，我们将专注于 api 集成以保持简单。 示例：通过 rest 获取数据 // example rest api call to retrieve items 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(); console log('items retrieved ', data results); } catch (error) { console error('error retrieving items ', error); } }; fetchitems(); 根据需要将这些 api 调用集成到您的 stenciljs 组件中。 选项 b：利用 parse sdk（如有需要） 如果您更喜欢使用 parse sdk，您仍然可以将其集成到您的 stenciljs 项目中，因为它是一个 javascript 库。然而，我们这里的示例专注于 api 调用。 步骤 5 – 加强您的后端 实施访问控制列表（acls） 通过在您的对象上设置 acl 来确保数据安全。例如，要创建一个私有项目： async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } 配置类级权限（clps） 在 back4app 仪表板中，为每个集合设置 clp，以确保只有授权用户可以访问敏感数据。 步骤 6 – 管理用户身份验证 建立用户账户 back4app 使用 parse 的用户类来管理身份验证。在您的 stenciljs 项目中，按如下方式实现用户注册和登录： // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } 类似的结构可以应用于登录和会话管理。您还可以直接从 back4app 仪表板启用社交登录、电子邮件验证和密码重置等功能。 步骤 7 – 使用 web 部署启动您的 stenciljs 前端 back4app 的 web 部署功能允许您通过直接从 github 存储库部署代码来托管您的 stenciljs 应用程序。 7 1 构建您的生产包 在终端中打开您的项目目录。 执行构建命令： npm run build 这将生成一个 www 文件夹，其中包含优化的静态资源。 确认构建： 确保 www 文件夹包含一个 index html 以及必要的 css、js 和图像文件。 7 2 组织和上传您的源代码 您的代码库应包含您 stenciljs 应用程序的所有源文件。一个示例结构可能是 basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md 示例源文件 src/parseconfig ts // src/parseconfig ts import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 示例源文件 src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } 将您的代码提交到 github 在你的项目目录中初始化一个 git 仓库 （如果尚未完成）： git init 暂存你的文件： git add 提交你的更改： git commit m "初始提交 stenciljs 前端代码" 创建一个新的 github 仓库： 命名为类似 basic crud app stenciljs frontend 将你的代码推送到 github： git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 通过网络部署连接您的代码库 访问网络部署： 登录到您的 back4app 控制面板，选择您的项目 ( basic crud app stenciljs ），然后点击 网络部署 部分。 集成 github： 按照提供的说明连接您的 github 账户。这将使 back4app 能够访问您的代码库。 选择代码库和分支： 选择您的代码库（例如， basic crud app stenciljs frontend ) 并选择适当的分支（例如， main )。 7 4 设置您的部署 输入额外的部署细节： 构建命令： 如果您的代码库不包含预构建的 www 文件，请指定构建命令（例如， npm run build )。back4app将在部署期间执行此命令。 输出目录： 将输出目录设置为 www 以便back4app知道在哪里找到您的静态文件。 环境变量： 在部署设置中添加任何所需的环境变量（例如，api密钥）。 7 5 使用docker对您的stenciljs项目进行容器化 如果您偏好使用docker进行部署，请在您的代码库中包含一个 dockerfile ，类似于： \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 将此文件包含在您的代码库中，并在back4app中选择docker部署。 7 6 部署您的应用程序 启动部署： 在配置您的设置后，点击 部署 按钮。 观察构建过程： back4app 将从 github 获取您的代码，运行构建命令（如果设置了），并部署您的容器化应用程序。 访问您的应用程序： 一旦部署，back4app 将提供一个 url，您的 stenciljs 应用程序将在该 url 上运行。 7 7 验证您的部署 访问 url： 在您的网络浏览器中打开提供的 url。 测试功能： 确保应用程序正确加载，路由正常工作，所有资源（css、js、图像）都能正常提供。 必要时调试： 使用浏览器开发者工具检查任何错误。如果出现问题，请检查 back4app 日志并验证 github 和构建配置。 第8步 – 总结与未来方向 干得好！您已经成功构建了一个完整的 crud 应用程序，使用了 stenciljs 和 back4app。 您设置了一个名为 basic crud app stenciljs 的项目，设计了 items 和 users 的集合，并通过管理应用程序管理数据。 此外，您将 stenciljs 前端连接到后端，并实施了强大的安全措施。 下一步： 增强前端： 考虑通过详细的项目视图、搜索功能和实时通知等高级功能扩展您的 stenciljs 应用程序。 添加更多功能： 集成复杂的后端逻辑（例如，云函数）、第三方 api 集成，或实施基于角色的权限。 深化您的知识： 探索 back4app 文档 https //www back4app com/docs 和其他教程，以获取有关性能调优和自定义集成的更多见解。 通过遵循本教程，您已经掌握了创建一个强大应用所需的技能。