如何使用 TypeScript 创建 CRUD 应用？

概述 在本教程中，您将学习如何使用 typescript 构建 crud（创建、读取、更新、删除）应用程序。 我们将利用 back4app 作为后端平台，使数据管理变得简单。 本指南涵盖了设置 back4app 项目、建模数据以及将 crud 功能集成到 typescript 应用程序中。 最初，您将在 back4app 上创建一个名为 basic crud app typescript 的项目，该项目提供灵活的 nosql 存储解决方案。 您将通过手动定义类和字段或借助 back4app 的 ai agent 来设计数据结构。 接下来，您将使用 back4app 管理应用程序，通过用户友好的界面进行后端管理，从而简化数据操作。 最后，您将使用 parse javascript sdk 将 typescript 应用程序与 back4app 连接，确保安全访问和身份验证。 在本教程结束时，您将拥有一个完全可操作的 typescript 应用程序，能够处理基本的 crud 任务，包括用户身份验证和数据管理。 您将学习什么 如何构建一个基于 typescript 的 crud 应用程序，使用 nosql 后端。 设计与 typescript 前端集成的可扩展后端的方法。 如何利用 back4app 的管理应用程序轻松管理您的数据。 部署策略，包括 docker 容器化，以顺利启动您的 typescript 应用程序。 先决条件 在您开始之前，请确保您拥有： 一个配置好的 back4app 账户和项目。 需要帮助？访问 开始使用 back4app https //www back4app com/docs/get started/new parse app 。 一个 typescript 开发环境。 使用像 visual studio code 的编辑器，并确保您已安装 node js。 基本的 typescript、面向对象编程和 restful api 知识。 如有需要，请参考 typescript 文档 https //www typescriptlang org/docs/ 。 步骤 1 – 项目初始化 设置一个新的 back4app 项目 登录到您的 back4app 账户。 点击您的仪表板上的“新应用”按钮 。 输入项目名称： basic crud app typescript 并按照步骤完成项目创建。 创建新项目 项目建立后，它将出现在您的仪表板上，作为您后端的基础。 步骤 2 – 制定数据架构 定义您的数据结构 对于这个应用程序，您将创建几个集合（类）在 back4app 上。以下是具有便于 crud 操作的字段的基本类的示例。 1\ 项目集合 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要描述。 创建于 日期 项目创建时的时间戳。 更新时间 日期 最新更新的时间戳。 2\ 用户集合 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一名称。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 安全哈希密码用于登录。 创建于 日期 账户创建时间戳。 更新时间 日期 上次账户更新的时间戳。 您可以在 back4app 仪表板中手动创建这些集合和字段。 创建新类 添加字段时，选择数据类型，命名字段，必要时设置默认值，并指明是否为必填项。 创建列 使用 back4app ai 代理进行模式配置 back4app中的集成ai代理可以根据描述自动生成您的数据架构。这简化了设置，并确保您的模型准备好进行crud操作。 如何使用ai代理： 打开ai代理： 登录到您的back4app仪表板，并在项目设置中找到ai代理。 描述您的架构： 提供您所需的集合和字段的详细描述。 审核并确认： ai代理将提出一个架构。审核并确认以应用更改。 示例提示 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) 这种ai辅助的方法节省了时间，并保证了良好结构的架构。 步骤 3 – 使用管理应用进行 crud 操作 管理应用概述 back4app 管理应用提供了一个无代码界面，使管理您的后端数据变得简单。 其拖放功能使您能够轻松执行 crud 操作——例如添加、读取、更新和删除记录。 启用管理应用 前往您的 back4app 仪表板上的 “更多” 菜单 。 选择 “管理应用” 并点击 “启用管理应用。” 设置您的管理员凭据 ，通过创建一个初始管理员账户，这也将定义角色，如 b4aadminuser 和系统类。 启用管理应用 激活后，登录管理应用以管理您的数据。 管理应用仪表板 使用管理应用管理 crud 操作 在管理应用中，您可以： 插入记录： 在任何集合中使用“添加记录”功能（例如，项目）输入新数据。 审核和编辑： 点击记录以查看详细信息或修改字段。 删除记录： 删除不再需要的条目。 这个直观的界面通过简化日常任务来增强数据管理。 步骤 4 – 将您的 typescript 应用连接到 back4app 在您的后端准备好后，下一步是将您的 typescript 应用与 back4app 连接。 选项 a：使用 parse javascript sdk 安装 parse javascript sdk： 使用 npm，运行： npm install parse 在您的 typescript 应用中初始化 parse： 创建一个配置文件（例如， parseconfig ts ) // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } 选项 b：利用 rest 或 graphql 如果您不想使用 parse sdk，可以通过 rest 执行 crud 操作。例如，使用 rest 检索项目： import fetch from 'node fetch'; export async function getitemsviarest() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } 根据需要在您的 typescript 模块中集成这些 api 调用。 步骤 5 – 确保后端安全 设置访问控制列表 (acls) 通过将 acl 应用到您的对象来保护您的数据。例如，要创建一个只有其所有者可以访问的项目： import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } 管理类级权限 (clps) 通过 back4app 仪表板调整 clps，以强制访问限制，使只有经过身份验证的用户才能与某些集合进行交互。 步骤 6 – 实施用户身份验证 管理用户账户 back4app 利用 parse 的内置用户类来处理身份验证。在您的 typescript 应用程序中，实现用户注册和登录如下： import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } 这种方法可以扩展用于会话管理、密码重置和其他身份验证功能。 步骤 7 – 部署您的 typescript 应用程序 back4app 简化了部署过程。您可以使用 docker 容器化等方法部署您的 typescript 应用程序。 7 1 构建您的 typescript 应用 编译和打包： 使用您的构建工具（如 webpack 或 tsc）来编译和打包您的应用程序。 例如，使用 tsc 编译： tsc 确认输出： 确保生成的文件包含所有必要的资产和模块。 7 2 组织您的项目结构 一个典型的 typescript 项目可能看起来像这样： basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md 示例： parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 docker 化您的 typescript 应用程序 如果您选择容器化，请在项目根目录中添加一个 dockerfile \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 通过 back4app web 部署 链接您的 github 仓库： 确保您的 typescript 项目托管在 github 上。 设置部署设置： 在 back4app 仪表板中，使用 web 部署 选项连接您的仓库（例如， basic crud app typescript ) 并选择适当的分支。 定义构建和输出命令： 指定构建命令（如 npm run build ) 并指明输出目录。 部署您的应用： 点击 部署 并跟踪日志，直到您的应用上线。 第 8 步 – 最后的想法和未来的增强 恭喜！您已成功创建了一个基于 typescript 的 crud 应用程序，并与 back4app 集成。 您设置了一个名为 basic crud app typescript 的项目，设计了 items 和 users 的集合，并使用 back4app 管理应用程序管理您的数据。 此外，您通过 parse javascript sdk（或 rest/graphql）连接了您的 typescript 应用程序，并实施了强大的安全措施。 接下来是什么？ 扩展您的应用程序： 集成额外的功能，例如高级过滤、详细的项目视图或实时数据更新。 增强后端功能： 探索云函数，集成第三方 api，或实施基于角色的权限。 进一步学习： 访问 back4app 文档 https //www back4app com/docs ，查看其他指南以优化您的应用程序。 祝您编码愉快，享受构建您的 typescript crud 应用程序的过程！