Building a Basic CRUD Application with Lit?

概述 在本指南中，您将使用 lit 创建一个功能齐全的 crud（创建、读取、更新、删除）应用程序。 我们将演示如何通过构建一个执行这些基本操作的应用程序来动态管理数据。最初，您将设置一个名为 basic crud app lit 的 back4app 项目，作为您强大的后端。 在建立项目后，您将通过定义集合和字段来设计一个灵活的数据库架构，可以手动完成或借助 back4app ai agent。这一步对于确保您的系统可靠地处理 crud 操作至关重要。 接下来，您将利用 back4app 管理应用程序——一个用户友好的拖放界面，以高效管理您的集合。 最后，您将使用 rest/graphql 将您的 lit 前端与 back4app 集成，确保您的后端通过适当的访问控制保持安全。 在本教程结束时，您将拥有一个生产就绪的 web 应用程序，不仅执行基本的 crud 功能，还包括用户身份验证和安全的数据处理。 关键点 掌握crud应用程序的开发，有效管理数据并拥有可靠的后端。 学习设计可扩展的数据库，并与基于lit的前端无缝集成。 利用拖放管理工具（back4app管理应用）简化crud操作。 理解部署策略，包括使用docker进行容器化，以高效启动您的web应用程序。 先决条件 在开始之前，请确保您拥有： 一个带有新项目的back4app账户。 如需帮助，请参见 开始使用back4app https //www back4app com/docs/get started/new parse app 。 一个lit开发环境。 使用您喜欢的启动工具设置项目，并确保安装node js（v14或更高版本）。 基本的javascript、lit和rest api知识。 如有需要，请查阅 lit文档 https //lit dev/docs/ 。 步骤1 – 初始化您的项目 建立一个新的back4app项目 登录到您的 back4app 账户。 从您的仪表板中选择 “新应用” 选项 。 命名您的项目： basic crud app lit 并按照说明进行创建。 创建新项目 一旦您的项目创建完成，它将出现在仪表板上，为您提供后端配置和项目管理的基础。 步骤 2 – 构建您的数据库架构 构建您的数据模型 对于这个 crud 应用程序，您将定义几个集合。以下是示例集合及建议的字段和数据类型，这将帮助您建立一个能够处理 crud 操作的有效架构。 1\ 项目收集 字段 数据类型 细节 id 对象id 自动生成的主键。 标题 字符串 物品名称。 描述 字符串 关于该项目的简要细节。 创建于 日期 项目创建时的时间戳。 更新于 日期 项目最后修改的时间戳。 2\ 用户收集 字段 数据类型 细节 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全身份验证的哈希密码。 创建于 日期 账户创建的时间戳。 更新于 日期 最新账户更新的时间戳。 您可以通过 back4app 控制面板手动添加这些集合，方法是创建新类并定义适当的列。 创建新类 对于每个字段，只需选择数据类型，分配名称，设置默认值（如有需要），并指定是否为必填项。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理可以从您的仪表板自动生成您的模式，基于描述性提示。此功能通过确保后端设置的一致性来简化项目管理。 如何使用 ai 代理： 启动 ai 代理： 从您的 back4app 仪表板或项目设置中导航到 ai 代理。 详细描述您的数据模型： 粘贴一个全面的提示，描述您所需的集合和字段。 审查并应用： 检查生成的建议并确认以更新您的项目。 示例提示 create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ 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 – 将 lit 与 back4app 连接 现在您的后端已配置并管理，是时候将您的 lit 前端与 back4app 集成了。 选项 a：使用 parse sdk（如适用） 安装 parse sdk： npm install parse 在您的 lit 应用中设置 parse： 创建一个配置文件（例如， src/parseconfig js )： // src/parseconfig js import parse from 'parse'; // 在此插入您的 back4app 凭据 parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在 lit 组件中实现 parse： 创建一个 lit 组件以检索和显示项目： // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("获取项目时出错：", error); } } render() { return html` \<h2>项目\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; 选项 b：利用 rest 或 graphql 如果 parse sdk 不适合您的项目，请使用 rest 或 graphql 执行 crud 操作。例如，通过 rest 检索项目： // example rest request 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 retrieved ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 根据需要在您的 lit 组件中集成这些 api 调用。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过设置 acl 来保护您的对象。例如，要创建一个私有项目 async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } 配置类级权限 (clps) 在 back4app 控制面板中，调整每个集合的 clp 以强制执行默认访问规则。这确保只有经过身份验证或授权的用户才能访问敏感信息。 步骤 6 – 实施用户身份验证 创建用户账户 back4app 利用 parse 的用户类来管理身份验证。在您的 lit 应用程序中，按照下面的示例实现用户注册和登录： // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; 您可以类似地实现登录和会话管理。可以通过 back4app 控制面板设置社交身份验证、电子邮件验证和密码重置等附加功能。 步骤 7 – 通过 web 部署部署您的 lit 前端 back4app 的 web 部署功能允许您通过从 github 存储库部署代码来托管您的 lit 应用程序。按照以下步骤准备您的生产构建，将代码推送到 github，并部署您的网站。 7 1 创建您的生产构建 在终端中打开您的项目目录。 运行构建命令： npm run build 这将创建一个 build 文件夹，其中包含优化的静态资产。 检查构建： 确认 build 文件夹包含一个 index html 文件以及必要的子目录。 7 2 组织和上传您的代码 您的 github 存储库应包含您 lit 前端的完整源代码。一个典型的项目结构可能如下所示： basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 示例配置文件 src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 示例主应用程序文件 src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("failed to load items ", error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error("error adding item ", error); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; 将代码推送到 github 在您的项目目录中初始化 git： git init 添加所有文件： git add 提交您的更改： git commit m "初始 lit 前端提交" 在 github 上创建一个新仓库 （例如， basic crud app lit frontend ）。 推送您的代码： git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 将您的 github 存储库与 back4app web 部署连接 访问 web 部署： 登录到您的 back4app 控制面板，选择您的项目（basic crud app lit），然后选择 web 部署 选项。 链接您的 github 账户： 按照提示连接您的 github 账户，允许 back4app 访问您的存储库。 选择您的存储库和分支： 选择存储库（例如， basic crud app lit frontend ) 和包含您的 lit 代码的分支（例如， main )。 7 4 配置部署设置 指定您的构建设置： 构建命令： 如果缺少预构建的 构建 文件，请使用类似 npm run build 的命令。back4app将在部署期间执行此命令。 输出目录： 将其设置为 build 以便back4app可以找到您的静态文件。 环境变量： 包括任何必要的api密钥或其他特定于环境的值。 7 5 使用docker对您的lit应用进行容器化 如果您更喜欢docker，请在您的代码库中包含一个 dockerfile ： \# use a lightweight node image for building the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining source code and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 在您的back4app部署设置中，选择docker部署选项以容器化您的应用。 7 6 启动您的应用程序 启动部署： 在最终确定设置后，点击 部署 按钮 监控过程： back4app 将获取您的 github 代码，运行构建命令，并部署您的容器 获取您的实时 url： 一旦部署完成，将提供一个 url，您的 lit 应用程序将托管在该 url 上 7 7 验证您的部署 访问 url： 在您的浏览器中打开提供的链接 测试功能： 确保应用程序正常加载，导航正常工作，所有资源正确提供 必要时调试： 使用浏览器开发者工具检查任何问题。如果出现问题，请查看 back4app 中的部署日志 第8步 – 最后的想法和未来的增强 干得好！你已经成功使用lit和back4app开发了一个基本的crud应用程序。 你设置了一个名为 basic crud app lit 的项目，为项目中的items和users定义了详细的数据库架构，并通过admin app管理你的数据。 此外，你将lit前端与后端集成，并实施了强大的安全措施。 下一步： 改善你的前端： 添加详细的项目页面、搜索功能和实时更新等功能。 扩展后端功能： 集成高级功能，如云函数、外部api服务或基于角色的访问控制。 探索更多资源： 访问 back4app文档 https //www back4app com/docs 和其他教程，以深入了解性能和定制。 通过遵循本指南，你现在具备了使用back4app为你的lit应用程序创建可扩展、安全的crud后端的技能。享受编码并继续创新！