如何使用 Knockout.js 创建基本 CRUD 应用程序：分步指南

概述 在本指南中，您将学习如何使用 knockout js 创建一个功能齐全的 crud（创建、读取、更新、删除）应用程序。 本教程演示了如何在 web 应用程序中实现基本操作，同时利用 back4app 作为后端服务。 我们将首先设置一个名为 basic crud app knockout 的 back4app 项目，为您的应用程序建立一个可靠的数据管理系统。 之后，您将通过定义集合和字段来设计一个灵活的数据库架构——可以手动进行，也可以借助 back4app ai agent 的帮助——以确保您的应用程序能够有效处理所有 crud 操作。 接下来，您将使用 back4app 管理应用程序，这是一个用户友好的拖放工具，轻松管理您的集合。该界面简化了执行 crud 操作的过程。 最后，您将通过 rest api 调用将您的 knockout js 前端与 back4app 集成。此集成还将涵盖适当访问控制的安全后端实践。 在本教程结束时，您将构建一个生产就绪的网络应用程序，支持基本的 crud 功能，包括用户身份验证，并具有强大的数据管理功能。 关键要点 了解如何使用 back4app 开发高效管理数据的 crud 应用程序。 获得设计可扩展后端并将其与 knockout js 前端连接的实践经验。 学习使用无代码管理工具（back4app 管理应用）执行创建、读取、更新和删除操作。 发现部署策略，包括 docker 容器化，以快速启动您的网络应用程序。 先决条件 在开始之前，请确保您拥有： 一个 back4app 账户和一个活跃的项目。 如需指导，请参考 back4app 入门指南 https //www back4app com/docs/get started/new parse app 。 为 knockout js 设置的开发环境。 通过 cdn 包含库，或如果您更喜欢模块化设置，则通过 npm 安装。 基本的 javascript、knockout js 和 rest api 知识。 请查阅 knockout js 文档 https //knockoutjs com/documentation/introduction html 以获取介绍。 步骤 1 – 项目初始化 设置您的 back4app 项目 访问您的 back4app 账户。 从您的仪表板中选择 “新应用” 选项 。 输入项目名称： basic crud app knockout 并完成设置过程。 创建新项目 创建后，您的项目将在仪表板上可见，形成您后端配置的基础。 步骤 2 – 制作您的数据库架构 设计数据结构 对于这个crud应用程序，您将创建几个集合。以下是示例集合，包含建议的字段和数据类型，以指导您的数据库设计。此模式支持基本的crud操作。 1 项目集合 字段 数据类型 细节 id 对象id 自动生成的唯一密钥。 标题 字符串 该项目的标题。 描述 字符串 该项目的简要总结。 创建于 日期 项目创建时的时间戳。 更新于 日期 最后更新的时间戳。 2 用户收集 字段 数据类型 细节 id 对象id 自动生成的唯一标识符。 用户名 字符串 每个用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用户密码的安全哈希。 创建于 日期 账户创建时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过在 back4app 仪表板中为每个集合添加新类并定义字段来手动创建这些集合。 创建新类 通过选择数据类型、命名字段、设置默认值和标记必填字段来定义您的字段。 创建列 使用 back4app ai 代理进行模式自动化 back4app ai 代理简化了直接从您的仪表板生成模式的过程。它可以根据您的描述自动创建集合和字段。 使用 ai 代理的步骤： 启动 ai 代理： 通过您的 back4app 仪表板或项目设置访问它。 详细描述您的数据模型： 粘贴一个描述性提示，列出您所需的集合和字段。 审核并应用： 代理将提出一个模式。审核并确认建议以将其集成到您的项目中。 示例提示 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) 此过程节省时间，并确保您的应用程序具有一致且优化的模式。 步骤 3 – 激活管理员应用程序并管理 crud 操作 管理员界面概述 back4app 管理应用提供了一种无代码解决方案，用于管理您的后端数据。其直观的拖放界面使 crud 操作变得轻而易举。 如何激活管理应用 前往您的 back4app 仪表板中的 “更多” 菜单 。 选择 “管理应用” 并点击 “启用管理应用。” 设置您的管理员凭据 通过创建第一个管理员用户，这也配置了角色，如 b4aadminuser 和基本系统集合。 启用管理应用 激活后，登录管理应用以开始数据管理。 管理应用仪表板 使用管理界面进行 crud 操作 在管理应用中，您可以： 添加记录： 点击集合中的 “添加记录” 按钮（例如，项目）以创建新条目。 查看/修改记录： 选择一条记录以检查其详细信息或更新字段。 删除记录： 删除任何不再需要的条目。 这个简化的界面增强了可用性，加速了数据管理。 步骤 4 – 将 knockout js 与 back4app 连接 在您的后端就绪后，是时候使用 rest api 调用集成您的 knockout js 前端了。 使用 rest api 进行 crud 操作 由于 parse sdk 通常不与 knockout js 一起使用，您将直接执行 api 调用。以下是处理 crud 任务的示例。 获取项目示例 // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); knockout js viewmodel 示例 以下是管理您的项目的示例 viewmodel function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; 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(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); 此视图模型集成了用于创建和删除项目的api调用，同时使用knockout js可观察对象管理状态。 步骤5 – 保护您的后端 访问控制列表（acls） 通过为每个对象分配acl来保护您的数据。例如，要使项目仅对其创建者可访问： function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; 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(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } 类级权限 (clps) 在 back4app 仪表板中，为每个集合设置 clps，以确保只有经过身份验证或授权的用户可以访问敏感信息。 步骤 6 – 实现用户身份验证 配置用户帐户 back4app 使用用户类来管理身份验证。在您的 knockout js 应用中，使用 rest api 调用处理用户注册和登录。 示例：用户注册 function registeruser(username, password, email) { var user = { username username, password password, email email }; 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(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } 用户登录和会话管理可以遵循类似的方法。可以通过 back4app 配置电子邮件验证和密码重置等附加功能。 步骤 7 – 使用 web 部署部署您的 knockout js 前端 back4app 的 web 部署功能让您通过链接 github 存储库轻松托管您的 knockout js 前端。请按照以下步骤操作： 7 1 构建您的生产文件 在终端中打开您的项目目录。 运行您的构建过程： 如果您使用像 webpack 这样的构建工具，请运行相应的命令（例如， npm run build ) 来编译您的资产。 确认构建： 确保您的构建文件夹包含一个 index html 和所有必需的静态资产。 7 2 组织并提交您的代码到 github 您的代码库应包含您 knockout js 前端的所有源文件。一个示例结构可能是： basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md 示例文件： src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; 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(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); 提交并推送代码到 github 初始化 git（如果尚未完成）： git init 暂存你的文件： git add 提交你的更改： git commit m "初始提交用于 knockout js 前端" 创建一个 github 仓库 （例如， basic crud app knockout frontend ）。 推送你的代码： git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 将你的 github 仓库与 web 部署链接 访问 web 部署功能： 在你的 back4app 仪表板中，选择你的项目（basic crud app knockout），然后点击 web 部署 。 连接到 github： 按照提示集成你的 github 账户。 选择你的仓库和分支： 选择你的仓库（例如， basic crud app knockout frontend ）和包含你代码的分支（例如， main ）。 7 4 部署设置 构建命令： 如果您的代码库不包含预构建文件夹，请指定构建命令（例如， npm run build ）。 输出目录： 将其设置为包含您的静态文件的文件夹（例如， build 或者 public ）。 环境变量： 添加任何所需的环境变量，例如 api 密钥。 7 5 使用 docker 容器化您的应用程序（可选） 如果您希望使用 docker，请在您的代码库中包含一个 dockerfile ： # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 部署您的应用程序 点击部署按钮： 配置设置后，启动部署 监控过程： back4app 将获取您的代码，构建它（如有必要），并部署您的容器化应用 访问您的应用： 完成后，back4app 将提供一个 url 以访问您的 knockout js 应用 7 7 测试部署 打开提供的 url： 检查您的应用是否正常加载 运行测试： 确保所有路由和资源（css、js、图像）正常工作 如有必要，调试： 使用开发者工具检查任何错误，并参考 back4app 部署日志 第 8 步 – 结论和未来方向 做得好！您已经成功构建了一个使用 knockout js 和 back4app 的基本 crud 应用程序。 您设置了一个名为 basic crud app knockout 的项目，为项目中的项目和用户创建了详细的集合，并通过管理应用程序管理您的数据。 此外，您还通过 rest api 调用将 knockout js 前端与后端集成，并实施了安全访问控制。 下一步： 扩展您的前端： 通过详细的项目视图、搜索功能或实时更新等功能增强您的应用程序。 添加高级后端逻辑： 探索使用云函数或集成第三方服务。 深入了解： 查阅 back4app 文档 https //www back4app com/docs 以获取进一步的优化和高级集成。 通过遵循本教程，您现在具备了使用 knockout js 和 back4app 构建强大且可扩展的 crud 应用程序的知识。祝您编码愉快！