Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

概述 本指南将引导您使用 mithril js 创建一个 crud（创建、读取、更新和删除）应用程序。 在本教程中，您将学习如何配置一个名为 basic crud app mithriljs 的 back4app 项目，以作为您 web 应用程序的强大后端。 我们将设计一个高效的数据架构，通过 back4app 的管理面板进行管理，并使用 rest api 调用集成您的 mithril js 前端。 您将学习什么 如何设置一个可靠处理数据的 crud 系统，使用强大的后端。 构建可扩展数据库设计的策略，并将其链接到 mithril js 应用程序。 利用 back4app 直观的拖放管理界面执行 crud 操作。 部署方法，包括 docker 容器化，以快速使您的应用程序上线。 要求 在开始之前，请确认您已拥有： 一个 back4app 账户和一个活跃的项目。 如需帮助，请参考 开始使用 back4app https //www back4app com/docs/get started/new parse app 一个 mithril js 开发环境。 您可以通过 npm 或 cdn 包含 mithril。确保您已安装 node js（v14+）。 javascript、mithril js 和 restful api 的基本知识。 如需更多指导，请查看 mithril js 文档 https //mithril js org/ 步骤 1 – 初始化您的项目 设置一个新的 back4app 项目 登录到您的 back4app 账户。 从您的仪表板点击 新应用 按钮。 提供项目名称： basic crud app mithriljs 并按照指导步骤进行操作。 创建新项目 设置完成后，您的项目将列在您的仪表板上，作为您应用程序的后端中心。 步骤 2 – 构建您的数据库架构 构建数据模型 对于这个 crud 应用，您将设计几个关键集合。以下是创建集合及其各自字段的概述，以有效处理 crud 操作。 1\ 项目集合 此集合包含每个项目的详细信息。 字段 类型 目的 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 关于该项目的简要总结。 创建于 日期 创建时间戳。 更新于 日期 最新更新的时间戳。 2\ 用户集合 此集合管理用户档案和认证细节。 字段 类型 目的 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一名称。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全身份验证的哈希密码。 创建于 日期 用户注册的时间戳。 更新于 日期 任何修改的时间戳。 您可以通过 back4app 仪表板手动添加这些集合和字段，方法是创建新类并相应地定义每一列。 创建新类 要添加字段，只需选择适当的数据类型，提供名称，设置默认值，并标记是否必需。 创建列 利用 back4app 的 ai 代理进行模式自动化 back4app 上的集成 ai 代理通过根据提供的提示自动生成您的集合，从而简化模式创建。 如何使用 ai 代理： 从您的项目仪表板访问 ai 代理。 通过详细描述集合和字段来描述您所需的模式。 查看生成的模式并应用更改。 示例提示： create the following 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) 此工具有助于确保您的数据库设计在处理 crud 操作时既一致又最佳。 步骤 3 – 激活管理员界面和 crud 功能 管理员界面概述 back4app 管理员界面是一个无代码解决方案，旨在帮助您轻松管理后端数据。其拖放设计使得执行 crud 操作变得轻而易举。 如何启用管理员界面 前往您的 back4app 仪表板中的 更多 部分。 点击 管理员应用 然后选择 启用管理员应用 。 设置您的管理员凭据以创建您的第一个管理员用户。此过程还配置角色（例如 b4aadminuser ) 和系统集合。 启用管理员应用 激活后，登录管理界面以管理您的集合。 管理应用仪表板 通过管理界面执行 crud 操作 添加新记录： 在任何集合中使用“添加记录”选项（例如，项目）来创建条目。 查看/修改记录： 点击记录以检查详细信息或编辑其字段。 删除记录： 利用删除功能清除过时的条目。 这个直观的界面通过简化常规 crud 操作来增强用户体验。 步骤 4 – 将 mithril js 与 back4app 连接 在您的后端准备好并通过管理界面进行管理后，是时候使用 rest api 调用将您的 mithril js 前端连接到 back4app。 使用 mithril js 的 rest api 调用 我们将依赖 rest api 调用与您的 back4app 后端进行交互。 示例：获取和显示项目 创建一个 mithril 组件，从项目集合中检索项目： // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; 这个组件使用 mithril 的生命周期方法 oninit 在组件初始化时加载数据。 示例：添加新项目 您可以集成一个表单以发送 post 请求来添加新项目： // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; 您可以类似地使用相应的 http 方法（put/patch 用于更新，delete 用于删除）实现更新和删除操作。 步骤 5 – 增强后端安全性 实施访问控制 通过对每个对象应用访问控制列表（acl）来保护您的数据。例如，要创建一个只有所有者可以修改的项目： async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } 设置类级别权限 (clps) 在您的 back4app 控制面板中，调整每个集合的 clp 以定义默认安全策略。这确保只有授权用户可以访问敏感信息。 步骤 6 – 用户身份验证设置 配置用户账户 back4app 使用 parse 用户类来管理身份验证。使用 mithril js，您可以通过 rest api 调用管理注册和登录。以下是用户注册的示例： // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; 您可以采用类似的方法进行登录和管理会话。 第 7 步 – 部署您的 mithril js 前端 back4app 的 web 部署功能通过链接您的 github 存储库，让您无缝托管您的 mithril js 应用程序。 7 1 构建生产版本 在终端中打开您的项目目录。 运行构建命令： npm run build 这将生成一个 build 文件夹，包含优化后的静态文件。 7 2 组织和提交你的代码 你的代码库应该有类似于以下的结构： basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md 示例 src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); 提交并推送到 github 初始化 git（如果尚未初始化）： git init 添加你的文件： git add 提交更改： git commit m "initial commit of mithril js frontend" 在 github 上创建一个仓库（例如， basic crud app mithriljs frontend ) 并推送你的代码： git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 将 github 与 web 部署链接 登录到您的 back4app 控制面板，导航到您的项目 ( basic crud app mithriljs ），并选择 web deployment 按照屏幕提示连接您的 github 账户。 选择包含您的 mithril js 源代码的存储库和分支（例如， main ）。 7 4 设置部署配置 配置： 构建命令： 如果构建文件夹不存在，请指定 npm run build 。 输出目录： 将其设置为 build 以指向您的静态资产。 环境变量： 添加任何必要的 api 密钥或设置。 7 5 docker 化您的应用程序（可选） 如果您更喜欢容器化，请包含一个 dockerfile \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 部署您的应用程序 在您的 back4app web 部署部分点击 部署 按钮。 监控构建过程，因为 back4app 拉取、构建并部署您的应用程序。 完成后，您将收到一个指向您的实时 mithril js 应用程序的 url。 7 7 验证部署 在您的浏览器中打开提供的 url。 确认您的应用程序加载正常，导航工作，并且资产正确提供。 如有必要，请使用浏览器开发工具进行故障排除。 第8步 – 总结与未来方向 干得好！你成功构建了一个与 back4app 集成的基本 crud 应用程序，使用了 mithril js。 你创建了一个名为 basic crud app mithriljs 的项目，定义了 items 和 users 的数据库架构，并通过管理界面管理了你的后端。 此外，你通过 rest api 调用连接了 mithril js 前端，并采取了安全措施来保护你的数据。 接下来是什么？ 改善前端： 添加详细视图、搜索功能或实时更新等功能。 扩展后端功能： 探索云函数、额外的 api 集成或基于角色的权限。 了解更多： 深入研究 back4app 文档 https //www back4app com/docs 和 mithril js 指南，以进行高级增强。 祝你编码愉快，项目顺利！