如何使用 Nuxt.js 创建 CRUD 应用？

概述 在本教程中，您将发现如何使用 nuxt js 构建一个完全可操作的 crud（创建、读取、更新、删除）应用程序。 我们将使用 back4app 作为我们的后端服务，以便轻松处理数据存储和管理。 本指南涵盖了基本的 crud 功能，详细说明了如何设置 back4app 项目、创建多功能数据模型以及将 crud 操作与您的 nuxt js 应用程序集成。 最初，您将配置一个名为 basic crud app nuxt 的 back4app 项目，该项目提供强大的 nosql 数据存储环境。 您将通过手动或通过 back4app 的智能 ai 代理来定义数据结构，建立类和字段。 接下来，您将使用 back4app 管理应用程序来管理后端——一个用户友好的拖放界面，用于高效的数据操作。 最后，您将使用 rest api 调用将您的 nuxt js 应用程序连接到 back4app，以执行安全的 crud 操作。 在本指南结束时，您将创建一个生产就绪的 nuxt js 应用程序，能够处理基本的 crud 操作以及安全的用户身份验证和数据管理。 要点 学习如何构建一个具有高性能后端的 nuxt js crud 应用程序。 了解设计可扩展后端的过程，并将其链接到您的 nuxt js 前端。 探索 back4app 的管理应用程序如何简化创建、读取、更新和删除等数据操作。 获取有关部署方法的见解，包括 docker 容器化，以实现无缝的生产发布。 先决条件 在开始之前，请确保您拥有： 一个具有新配置项目的 back4app 账户。 如果您需要帮助，请参考 开始使用 back4app https //www back4app com/docs/get started/new parse app 。 一个用于 nuxt js 的开发环境。 确保您已安装 node js，并设置您选择的 ide 或文本编辑器。 对 nuxt js、vue js 和 rest api 的基本知识。 如果您需要复习，请参考 nuxt js 文档 https //nuxtjs org/docs 。 步骤 1 – 项目初始化 设置新的 back4app 项目 登录到您的 back4app 账户。 从您的仪表板中选择 “新应用” 选项 。 为您的项目命名： basic crud app nuxt 并按照设置说明进行操作。 创建新项目 项目创建后，它将出现在您的仪表板上，准备进行进一步的后端配置。 步骤 2 – 制作数据模型 建立您的数据结构 对于这个 crud 应用程序，您将在 back4app 项目中设置几个类（或集合）。以下是基本 crud 功能所需的关键类及其字段的示例。 1\ 项目集合 此集合存储有关每个项目的详细信息。 字段 类型 描述 id 对象id 系统生成的唯一标识符。 标题 字符串 物品名称。 描述 字符串 项目的简要描述。 创建于 日期 标记项目创建的时间戳。 更新时间 日期 标记最后更新的时间戳。 2\ 用户集合 此集合管理用户详细信息和身份验证信息。 字段 类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全身份验证的哈希密码。 创建于 日期 账户创建时间戳。 更新时间 日期 账户修改的时间戳。 您可以在 back4app 控制面板中手动定义这些集合和字段。 创建新类 您可以通过选择适当的数据类型、命名字段、可选地设置默认值以及指定字段是否为必填项来添加字段。 创建列 利用 back4app ai 代理进行模式生成 back4app ai 代理是您仪表板中的一个方便工具，可以根据提供的描述自动构建您的模式。此功能加快了设置过程，并确保您的数据模型针对 crud 操作进行了优化。 如何使用 ai 代理： 打开 ai 代理： 从您的 back4app 仪表板的项目设置中访问它。 描述您的架构： 提供详细的提示，概述您需要的类和字段。 审核并确认： 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) 此智能功能节省时间，并确保您的数据结构始终为最佳 crud 操作设置。 步骤 3 – 启用管理员应用程序并处理 crud 操作 管理员应用程序概述 back4app 管理员应用程序提供无代码界面，便于无缝的后端数据管理。其拖放功能使得执行 crud 操作（如添加、编辑、查看和删除记录）变得简单。 激活管理员应用程序 转到“更多”菜单 在您的 back4app 仪表板中。 选择“管理员应用程序” 并点击 “启用管理员应用程序。” 设置您的管理员帐户 通过创建初始凭据。此步骤还将创建系统角色，例如 b4aadminuser 并配置基本系统集合。 启用管理员应用程序 启用后，登录管理员应用程序以轻松管理您应用程序的数据。 管理员应用程序仪表板 使用管理员应用程序进行crud操作 在管理员应用程序中，您可以： 添加新条目： 在集合中使用“添加记录”按钮（如项目）插入数据。 查看和编辑： 点击任何记录以检查其详细信息或进行修改。 删除条目： 删除不再需要的记录。 这个直观的界面简化了您应用程序的数据管理。 步骤 4 – 将您的 nuxt js 应用程序连接到 back4app 在您的后端就位后，下一步是将您的 nuxt js 应用程序与 back4app 集成。 使用 rest api 调用 由于 parse sdk 通常不与 nuxt js 一起使用，您将使用 rest api 调用执行 crud 操作。 在 nuxt js 中设置 api 请求 安装 axios 如果尚未安装，请将 axios 添加到您的 nuxt js 项目中 npm install @nuxtjs/axios 配置 axios 模块 在您的 nuxt config js , 包含 axios 模块并设置基本配置 export default { modules \['@nuxtjs/axios'], axios { baseurl 'https //parseapi back4app com' } } 执行 crud 操作 创建一个服务（例如， services/items js ) 来处理 api 调用。以下是您可能如何获取、创建、更新和删除项目的示例 // services/items js export default { async fetchitems() { try { const response = await this $axios $get('/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response results; } catch (error) { console error('获取项目时出错 ', error); return \[]; } }, async additem(title, description) { try { const response = await this $axios $post('/classes/items', { title, description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response; } catch (error) { console error('创建项目时出错 ', error); } }, async updateitem(objectid, newtitle, newdescription) { try { const response = await this $axios $put(`/classes/items/${objectid}`, { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response; } catch (error) { console error('更新项目时出错 ', error); } }, async removeitem(objectid) { try { const response = await this $axios $delete(`/classes/items/${objectid}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response; } catch (error) { console error('删除项目时出错 ', error); } } } 在您的 nuxt js 页面或组件中集成这些 api 方法，以启用完整的 crud 功能。 步骤 5 – 增强安全性 实施访问控制列表 (acls) 通过为单个对象设置 acl 来保护您的数据。例如，您可以限制某个项目，使其创建者才能查看或修改它： async function createprivateitem(title, description, userid) { try { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; const response = await this $axios $post('/classes/items', { title, description, acl acl }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); console log('private item created ', response); } catch (error) { console error('error creating private item ', error); } } 设置类级权限 (clps) 在您的 back4app 控制面板中，配置 clps 以强制执行默认访问策略，确保只有经过身份验证的用户才能与特定集合进行交互。 步骤 6 – 实施用户身份验证 设置用户注册和登录 back4app 利用内置的用户集合来管理身份验证。在您的 nuxt js 应用中，使用 rest api 调用实现注册和登录。 示例：用户注册和登录 export default { async registeruser(username, password, email) { try { const response = await this $axios $post('/users', { username, password, email }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); console log('user registered ', response); return response; } catch (error) { console error('registration error ', error); } }, async loginuser(username, password) { try { const response = await this $axios $get('/login', { params { username, password }, headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); console log('user logged in ', response); return response; } catch (error) { console error('login error ', error); } } } 这种方法支持会话管理、密码恢复和其他身份验证功能。 第7步 – 部署您的nuxt js应用程序 back4app简化了部署过程。您可以使用多种方法部署您的nuxt js应用程序，包括docker容器化。 7 1 构建您的nuxt js项目 构建应用程序： 运行以下命令以生成生产构建 npm run build 启动应用程序： 使用以下命令测试您的生产构建 npm run start 7 2 组织您的项目结构 一个典型的nuxt js项目结构可能如下所示 basic crud app nuxt/ \| assets/ \| components/ \| layouts/ \| pages/ \| plugins/ \| services/ \| | items js \| | auth js \| static/ \| nuxt config js \| package json \| dockerfile 7 3 docker化您的nuxt js应用程序 如果您更喜欢容器化，请在项目根目录中包含一个 dockerfile \# use a node js image as the base from node 16 alpine \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application copy \# build the application run npm run build \# expose the port (adjust if necessary) expose 3000 \# start the application cmd \["npm", "run", "start"] 7 4 通过 back4app web 部署 连接您的代码库： 确保您的 nuxt js 项目托管在 github 上。 配置部署： 在您的 back4app 控制面板中，导航到 web 部署 部分，链接您的代码库（例如， basic crud app nuxt ），并选择适当的分支。 设置构建指令： 定义构建命令（例如， npm run build ) 并指定输出目录。 部署： 点击 部署 并跟踪日志，直到您的应用程序上线。 第 8 步 – 总结与未来步骤 干得好！你现在已经构建了一个与 back4app 集成的 nuxt js crud 应用程序。 你创建了一个名为 basic crud app nuxt 的项目，设计了 items 和 users 的集合，并通过 back4app 管理应用程序管理你的数据。 此外，你通过 rest api 调用连接了你的 nuxt js 应用程序，并实施了强有力的安全措施。 接下来是什么： 功能扩展： 考虑添加高级搜索过滤器、详细的项目视图或实时更新等功能。 后端增强： 研究云函数、与外部 api 的集成或基于角色的权限。 进一步学习： 探索 back4app 文档 https //www back4app com/docs 和其他指南，以进一步优化你的应用程序。 祝你编码愉快，享受使用 nuxt js 和 back4app 构建的乐趣！