Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

概述 在本指南中，您将学习如何使用 polymer 开发一个功能齐全的 crud（创建、读取、更新、删除）应用程序。 本教程演示了如何执行管理和修改数据的基本操作。您将首先设置一个名为 basic crud app polymer 的 back4app 项目，该项目将作为您应用程序的后端。 接下来，您将通过概述精确的集合和字段来构建一个可扩展的数据模型——可以手动完成，也可以借助 back4app ai agent，以确保您的数据库针对 crud 操作进行了优化。 接下来，您将利用 back4app 管理应用程序，这是一个用户友好的拖放管理界面，以简化您的数据操作。 最后，您将使用 rest/graphql api 将 polymer 前端与 back4app 集成，同时通过复杂的访问控制增强后端安全性。 在本教程结束时，您将构建一个生产就绪的 web 应用程序，支持核心 crud 操作，并包括用户身份验证和强大的数据管理功能。 你将学到什么 开发一个有效管理数据的crud应用程序，具有可靠的后端 设计一个可扩展的后端，并将其与基于polymer的前端连接 利用拖放式管理界面（back4app管理应用）来简化数据操作 使用现代技术（包括docker容器化）部署你的应用程序 先决条件 在开始之前，请确保你拥有 一个具有活动项目的back4app账户 如需帮助，请查看 back4app入门指南 https //www back4app com/docs/get started/new parse app 一个polymer开发环境 使用polymer cli或类似工具，并确认已安装node js（v14或更高版本） 对javascript、polymer和rest api有基本了解 你可以参考 polymer文档 https //www polymer library polymer project org/3 0/docs/devguide/feature overview 以获取更多详细信息 步骤1 – 设置你的项目 启动一个新的 back4app 项目 访问您的 back4app 账户。 从您的仪表板中选择“新应用”选项 。 指定项目名称： basic crud app polymer 并按照说明完成项目创建。 创建新项目 完成这些步骤后，您的项目将在 back4app 仪表板上可见，形成您后端配置的基础。 步骤 2 – 构建您的数据库架构 构建您的数据模型 对于这个crud应用，需要几个集合。下面是示例集合及其字段和相应类型，这将帮助您设计一个能够处理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 \ 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) 使用 ai 代理可确保您的模式在一致性和优化方面满足应用程序的要求。 步骤 3 – 激活管理员应用并执行 crud 操作 管理员应用概述 back4app 管理员应用提供无代码的后端管理界面。其直观的拖放设计简化了 crud 操作，使您能够轻松创建、查看、更新和删除记录。 激活管理员应用 前往“更多”菜单 在您的 back4app 控制面板上。 选择“管理员应用” 然后点击 “启用管理员应用。” 设置您的管理员凭据 通过创建一个初始管理员用户，这也将建立角色（如 b4aadminuser ) 和系统集合。 启用管理员应用 激活后，登录管理员应用以管理您的后端数据。 管理员应用仪表板 使用管理员应用管理数据 在管理员应用中，您可以： 添加记录： 在任何集合（例如，项目）中使用“添加记录”按钮以创建新条目。 查看/修改记录： 点击记录以检查其详细信息或编辑其字段。 删除记录： 利用删除功能消除不再需要的数据。 此界面通过简化所有 crud 功能大大增强了可用性。 步骤 4 – 将 polymer 连接到 back4app 通过管理员应用配置好后端后，是时候将您的 polymer 前端链接到 back4app。 选项 a：使用 rest/graphql api 我们将使用 rest 或 graphql api 执行 crud 操作。例如，要使用 rest 检索项目： // example rest call to get items const fetchitems = async () => { 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(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 根据需要将类似的 api 调用集成到您的 polymer 元素中。 步骤 5 – 加强后端安全性 实施访问控制列表 (acls) 通过将 acl 应用于对象来保护您的数据。例如，要创建一个受限项目 async function createrestricteditem(data, owner) { const itemdata = { title data title, description data description }; // configure acl to permit only the owner access const acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { 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({ itemdata, acl acl }) }); const result = await response json(); console log('restricted item created ', result); } catch (error) { console error('error creating item ', error); } } 配置类级权限 (clps) 在 back4app 仪表板中，为每个集合设置 clps 以定义默认访问规则。此配置确保只有授权用户可以访问敏感数据。 步骤 6 – 在 polymer 中进行用户身份验证 建立用户账户 back4app 使用 parse 的用户类来管理身份验证。在您的 polymer 项目中，按照下面的示例实现用户注册和登录： // example function for user registration using rest api async function signupuser(username, password, email) { 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({ username, password, email }) }); const result = await response json(); alert('user registered successfully!'); console log(result); } catch (error) { alert('registration error ' + error message); } } 可以采用类似的方法进行登录和会话管理，并通过 back4app 仪表板配置额外的功能，如电子邮件验证和密码重置。 步骤 7 – 使用 web 部署部署您的 polymer 前端 back4app 的 web 部署功能通过链接您的 github 存储库，让您无缝托管 polymer 应用程序。按照以下步骤部署您的应用。 7 1 构建您的生产版本 在终端中打开您的项目目录。 执行构建命令： polymer build 此命令生成一个 build 文件夹，包含所有优化的静态文件。 检查构建： 确保 build 文件夹包含一个 index html 文件以及必要的资产目录。 7 2 组织和上传您的源代码 您的代码库应包含 polymer 前端的完整源代码。一个示例目录结构可能如下所示： basic crud app polymer frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── my app js │ ├── api config js │ └── components/ │ ├── items list js │ └── auth form js ├── polymer json └── readme md 示例： src/api config js // src/api config js export const app id = 'your application id'; export const rest api key = 'your rest api key'; export const api url = 'https //parseapi back4app com'; 示例： src/my app js import { polymerelement, html } from '@polymer/polymer/polymer element js'; class myapp extends polymerelement { static get template() { return html` \<style> / your css styles here / \</style> \<h1>item manager\</h1> \<items list>\</items list> \<auth form>\</auth form> `; } } customelements define('my app', myapp); 示例： src/my app js 将您的代码提交到 github 初始化一个 git 仓库 （如果尚未完成）： git init 暂存您的文件： git add 提交您的更改： git commit m "初始提交 polymer 前端" 创建一个 github 仓库： 命名为 basic crud app polymer frontend 将您的代码推送到 github： git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 7 3 将您的 github 仓库与 web 部署连接 访问 web 部署： 登录 back4app，导航到您的项目（ basic crud app polymer ），并选择 web 部署 功能。 集成 github： 按照提示连接您的 github 账户，允许 back4app 访问您的仓库。 选择您的仓库和分支： 选择仓库（例如， basic crud app polymer frontend ）和适当的分支（例如， main ）。 7 4 配置部署设置 指定以下详细信息： 构建命令： 如果 build 文件夹未预构建，请设置命令（例如， polymer build )。back4app将在部署期间执行此操作。 输出目录： 将其设置为 build 以便 back4app 识别您的静态站点文件。 环境变量： 在部署配置中包含任何必要的变量（例如 api 密钥）。 7 5 使用 docker 对您的 polymer 应用进行容器化 如果 docker 是您的部署选择，请在您的代码库中包含一个 dockerfile ，类似于： # use an official node image for building from node 16 alpine as builder \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy the project files copy \# build the polymer app run polymer build \# use nginx to serve the built files from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 将此 dockerfile 集成到您的项目中，并在 back4app 中选择 docker 作为部署选项。 7 6 部署您的应用程序 点击部署按钮： 一旦确认您的设置，点击 部署 观察构建过程： back4app 将获取您的代码，运行构建命令，并部署您的容器化应用程序。 获取您的 url： 部署后，您将收到一个 url，您的 polymer 应用程序可以通过该 url 访问。 7 7 测试您的部署 访问 url： 在您的浏览器中打开提供的链接。 验证功能： 检查所有路由是否正确加载，以及 css、javascript 和图像等资产是否按预期显示。 故障排除： 如果出现任何问题，请查看部署日志和 back4app 上的 github 集成设置。 第8步 – 总结与未来方向 干得好！您已经成功构建了一个完整的crud应用程序，使用了polymer和back4app。 您的项目， basic crud app polymer ，现在具有清晰定义的项目和用户集合，通过管理应用程序无缝管理，并配有安全且集成的polymer前端。 下一步： 增强前端： 添加详细项目视图、搜索功能或实时更新等功能。 扩展功能： 与云函数或第三方api集成额外的后端逻辑。 探索更多： 查看 back4app文档 https //www back4app com/docs 以获取更多高级配置和性能优化。 凭借这些技能，您已具备构建可扩展crud后端和使用polymer和back4app部署强大web应用程序的能力。祝您编码愉快！