如何使用 Marko 构建基本的 CRUD 应用？逐步指南

概述 本指南将引导您使用 marko 和 back4app 创建一个完整的 crud（创建、读取、更新、删除）应用程序。 在本教程中，您将设置一个名为 basic crud app marko 的项目，设计一个强大的数据库架构，并将您的 marko 前端与 back4app 的 api 集成。 本教程还解释了如何保护您的后端并将您的应用程序部署到生产环境中。 您将学习到的内容 如何构建有效管理数据的 crud 应用程序，使用可靠的后端。 设计可扩展架构的技巧，并将其链接到基于 marko 的前端。 利用 back4app 的用户友好管理界面轻松管理数据。 部署策略，包括使用 docker 进行容器化，以启动您的 web 应用程序。 前提条件 在开始之前，请确保您拥有： 一个 back4app 账户和一个新项目。 如有需要，请按照 使用 back4app 入门 https //www back4app com/docs/get started/new parse app 的说明进行操作。 一个设置好的 marko 开发环境。 使用 marko cli 或您喜欢的设置方法。确保安装了 node js（v14 或更高版本）。 基本的 javascript、marko 和 rest api 知识。 访问 marko 文档 https //markojs com/docs/ 获取更多详细信息。 步骤 1 – 设置您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 在您的仪表板上选择 “新应用” 输入项目名称： basic crud app marko 并按照屏幕上的提示进行操作。 创建新项目 您的新项目现在将在您的 back4app 仪表板上显示，为您的后端奠定基础。 步骤 2 – 制作您的数据库架构 构建您的数据模型 对于这个 crud 应用，您将创建几个集合。以下是集合的示例以及建议的字段，以帮助您设计一个实用的数据库架构。 1\ 集合：产品 该集合将包含每个产品的详细信息。 字段 类型 细节 id 对象id 自动生成的主要标识符。 名字 字符串 产品名称。 细节 字符串 产品的简要描述。 创建于 日期 标记产品创建的时间戳。 更新于 日期 最后更新的时间戳。 2\ 收集：用户 此集合包含用户和身份验证数据。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一名称。 电子邮件 字符串 一个独特的电子邮件地址。 密码 字符串 用户密码的哈希版本。 创建于 日期 记录创建时间戳。 更新于 日期 最后修改时间戳。 您可以通过在 back4app 仪表板中手动定义这些集合，为每个集合创建一个新类，然后添加适当的列。 创建新类 您可以通过选择类型、命名列、设置默认值，并在必要时将其标记为必填项，快速添加字段。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理通过根据您的提示生成集合和字段定义来简化模式设计。此功能节省时间并确保数据库设置的一致性。 如何使用 ai 代理： 访问 ai 代理： 导航到您的 back4app 仪表板，在项目设置中找到 ai 代理。 描述您的模式： 提供详细的提示，描述您所需的集合和字段。 审查并实施： 生成后，审查建议的模式并应用更改。 示例提示 create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) 这种方法简化了您的模式创建过程。 步骤 3 – 激活管理界面和 crud 功能 介绍管理界面 back4app 管理应用程序是一个无代码界面，使数据管理变得轻而易举。其拖放功能让您轻松添加、修改、查看或删除记录。 启用管理界面 前往“更多”部分 在您的 back4app 控制面板中。 选择“管理员应用” 然后点击 “启用管理员应用。” 设置管理员凭据： 创建您的第一个管理员帐户，这也将分配系统角色，如 b4aadminuser 启用管理员应用 一旦激活，登录管理员应用以管理您的后端。 管理员应用仪表板 通过管理员界面管理 crud 操作 在管理员应用中，您可以： 添加新条目： 在集合中使用“添加记录”选项（例如，产品）。 查看/修改记录： 点击任何条目以查看或更新其详细信息。 删除条目： 利用删除功能删除过时的记录。 这个简化的界面通过简化数据管理任务来增强用户体验。 步骤 4 – 将 marko 连接到 back4app 现在您的后端已配置，是时候使用 api 将您的 marko 前端与 back4app 集成。 选项 a：使用 api 您将使用 rest api 调用在您的 marko 应用中执行 crud 操作。 示例：通过rest获取数据 // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); 此代码片段展示了如何通过rest api调用从back4app获取产品数据。 步骤5 – 保护您的后端 配置访问控制 通过对您的记录应用访问控制列表（acl）来增强安全性。例如，要创建一个私有产品条目： async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } 设置默认权限 使用back4app仪表板为每个集合配置类级权限（clp），确保只有授权用户可以访问敏感数据。 步骤6 – 用户身份验证设置 创建用户账户 back4app使用用户类进行身份验证。在您的marko应用中，实现用户注册和登录如下： // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } 此代码片段演示了使用 rest 调用的简单用户注册流程。 第 7 步 – 部署您的 marko 前端 back4app 的 web 部署功能允许您直接从 github 存储库托管您的 marko 项目。 7 1 – 构建您的生产版本 在终端中打开您的项目目录。 运行构建命令 npm run build 这将生成一个 build 目录，其中包含您的优化静态文件。 确认构建 检查 build 文件夹是否包含 index html 和所有资产目录。 7 2 – 组织和上传您的代码 您的代码库应包含您 marko 项目的完整源代码。一个典型的目录结构可能如下所示 basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md 示例 src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } 提交到 github 初始化 git（如有需要）： git init 暂存你的文件： git add 提交你的更改： git commit m "初始提交 marko crud 前端" 创建并推送到你的 github 仓库： 例如，使用一个名为 basic crud app marko frontend 的仓库。 7 3 – 将 github 与 web 部署链接 访问 web 部署： 登录 back4app，进入你的项目（basic crud app marko），并打开 web 部署 部分。 连接你的 github 账户： 按照提示链接你的 github 账户。 选择仓库和分支： 选择仓库（例如， basic crud app marko frontend ）和分支（例如， main ）进行部署。 7 4 – 配置部署 设置附加参数 构建命令 如果没有预构建的 构建 文件夹，请设置构建命令（例如， npm run build )。 输出目录 指定 构建 作为输出文件夹。 环境变量 输入任何必要的变量（例如 api 密钥）。 7 5 – 使用 docker 容器化 如果您更喜欢 docker，请在您的项目库中包含一个 dockerfile 7 6 – 部署您的应用程序 按下部署按钮： back4app 将拉取您的代码库，运行构建并部署您的应用程序。 监控过程： 查看部署日志以获取任何构建或运行时问题。 访问您的网站： 一旦部署，back4app 将提供一个 url 供您访问托管的 marko 应用程序。 7 7 – 确认您的部署 打开提供的 url： 检查您的应用程序是否正确加载。 浏览应用程序： 验证所有页面是否加载并且 crud 功能是否按预期工作。 如有需要进行故障排除： 使用浏览器开发工具和 back4app 日志来解决任何问题。 第8步 – 最后的想法和未来的增强 干得好！你现在已经使用marko和back4app构建了一个功能齐全的crud应用程序。 你设置了一个名为 basic crud app marko 的项目，为产品和用户制作了详细的集合，通过直观的管理界面管理数据，使用rest api集成了你的marko前端，并用强大的控制措施保护了你的后端。 下一步： 增强你的用户界面： 考虑添加高级功能，如产品详情页面、搜索功能和实时通知。 扩展后端功能： 考虑集成无服务器功能或第三方api以增加功能。 深化你的知识： 参考 back4app文档 https //www back4app com/docs 和其他教程，以获取有关性能调优和自定义集成的更多见解。 祝你在marko和back4app上编码愉快！