韶关房地产网站建设,网站建设swot,清理wordpress数据表,函数自定义wordpress将 HTMX 放在前端#xff0c;Bun 放在后端#xff0c;然后将它们与 Elysia 和 MongoDB 连接起来#xff0c;形成快速便捷的技术栈#xff0c;使开发 Web 应用程序变得轻而易举。
Bun 和 HTMX 是目前软件领域最有趣的两个事情。 Bun 是一个速度极快的一体化服务器端 JavaSc…将 HTMX 放在前端Bun 放在后端然后将它们与 Elysia 和 MongoDB 连接起来形成快速便捷的技术栈使开发 Web 应用程序变得轻而易举。
Bun 和 HTMX 是目前软件领域最有趣的两个事情。 Bun 是一个速度极快的一体化服务器端 JavaScript 平台而 HTMX 是一种 HTML 扩展用于创建简单而强大的界面。在本文中我们将使用这两个出色的工具来开发一个全栈应用程序该应用程序使用 MongoDB 进行数据存储并使用 Elysia 作为其 HTTP 服务器。 技术栈
本文的重点是技术栈的四个主要组成部分如何相互作用。这四个组成部分分别是 Bun、HTMX、Elysia 和 MongoDB。这种架构提供了一个快速部署的设置易于配置并且灵活变化。
Bun 是一个 JavaScript 运行时、打包器、包管理器和测试运行器Elysia 是一个高性能 HTTP 服务器基于 Bun 构建HTMX 提供了一种向 HTML 添加细粒度交互性的新颖方法MongoDB 是旗舰级 NoSQL 面向文档的数据存储
请注意本文有两个部分。后续我们将合并 Pug、HTMX 模板引擎用它来开发一些奇特的前端交互。
安装和设置
您需要安装 Bun.js这很容易做到。我们还将在我们的开发机器上将 MongoDB 作为服务与 Bun 一起运行。安装这些软件包后bun -v 和 mongod -version 命令都可以在命令行中运行。
接下来让我们开始一个新项目
bun create elysia iw-beh这告诉 bun 使用 Elysia 模板创建一个新项目。 Bun 中的模板是使用 create 命令快速启动项目的便捷方法。Bun 可以像 Node.js 一样工作无需任何配置。
现在进入新目录 cd iw-beh并按原样运行项目 bun run src/index.js。
最后一个命令告诉 bun 运行 src/index.js 文件。src/index.js 文件是启动 Elysia 服务器的代码
import { Elysia } from elysia;const app new Elysia().get(/, () Hello Elysia).listen(3000);console.log( Elysia is running at ${app.server?.hostname}:${app.server?.port}
);在此文件中我们导入 Elysia 并使用它实例化一个新服务器该服务器侦听端口 3000 并在根目录下有一个 GET 端点。该端点返回一个文本字符串「Hello Elysia」其工作原理与 Express 的相似。如果您访问 localhost:3000您会收到一条简单的问候语。
现在我们已经运行了 Elysia让我们添加 static 插件。 Elysia 有几个用于处理常见场景的插件。在本例中我们希望从磁盘提供一些 HTML。 static 插件正是我们所需要的
bun add elysiajs/static现在运行 static 插件的 Elysia 服务器应该提供 iw-beh/public 目录中的所有内容。如果我们在其中放置一个简单的 HTML 文件并访问 localhost:3000/public我们将看到它的内容。
HTMX 的魔力
接下来让我们向 index.html 添加一个 HTMX 页面。这是 HTMX 主页上的一个简单示例
script srchttps://unpkg.com/htmx.org1.9.10/scriptbutton hx-post/clickedhx-triggerclickhx-target#parent-divhx-swapouterHTMLClick Me!
/button该页面显示一个按钮。单击时该按钮将调用 /clicked 服务器并且该按钮将替换为响应中的任何内容。那里还什么都没有所以目前它什么也没做。
但请注意所有这些仍然是 HTML。我们正在进行 API 调用并执行细粒度的 DOM 更改而无需任何 JavaScript。这项工作是由我们刚刚导入的 htmx.org 库中的 JavaScript 完成的但重点是我们不必担心它。
HTMX 提供了一种 HTML 语法只需使用三个元素属性即可完成这些操作
hx-post 在 AJAX 请求触发时提交帖子hx-target 告诉 hx-post 哪些事件执行 AJAX 请求hx-swap 表示 AJAX 事件发生时要做什么
Elysia 和 MongoDB
现在让我们在 Elysia 中创建一个端点它将向 MongoDB 写入一些内容。首先我们将为 Bun 添加 MongoDB 驱动程序bun add mongodb。
接下来像这样修改 src/index.ts
import { Elysia } from elysia
import { staticPlugin } from elysiajs/static
const { MongoClient } require(mongodb)const app new Elysia().get(/, () Hello Elysia).get(/db, async () {const url mongodb://127.0.0.1:27017/quote?directConnectiontrueserverSelectionTimeoutMS2000appNamemongosh1.8.0const client new MongoClient(url, { useUnifiedTopology: true })try {await client.connect()const database client.db(quote)const collection database.collection(quotes)const stringData Thought is the grandchild of ignorance.const result await collection.insertOne({ quote: stringData })console.log(String inserted with ID: ${result.insertedId})} catch (error) {console.error(error)} finally {await client.close()}return OK}).use(staticPlugin()).listen(3000)console.log( Elysia is running at ${app.server?.hostname}:${app.server?.port},
)在这段代码中我们添加了一个 /db 端点它与 MongoDB 通信。现在它只是将一条引用写入到 quote 数据库中的 quotes 集合内。您可以直接通过访问 localhost:3000/db 来测试这一点。然后您可以验证数据是否已存储在 MongoDB 中
$ mongoshtest use quote
switched to db quote
quote db.quotes.find()
[{_id: ObjectId(65ba936fd59e9c265cc8c092),quote: Thought is the grandchild of ignorance.,author: Swami Venkatesananda}
]创建 HTMX 表格
现在我们从前端连接到数据库让我们创建一个表来输出现有的报价。作为快速测试我们将向服务器添加一个端点
.get(/quotes, async () {const data [{ name: Alice }, { name: Bob }]let html ulfor (const item of data) {html li${item.name}/li}html /ulreturn html
})然后在我们的 index.html 中使用它
ul iddata-list/ul
button hx-get/quotes hx-target#data-listLoad Data/button现在当您加载 /public/index.html 并单击按钮时就会显示从服务器发送的列表。从端点发出 HTML 与常见的 JSON 模式不同。我们在这里遵守 RESTful 原则HTMX 有用于处理 JSON 端点的插件但这更习惯使用。
在我们的端点中我们只是手动创建 HTML。在真实的应用程序中我们可能会使用某种 JavaScript 框架来使事情更易于管理。
现在我们可以从数据库中检索数据
.get(/quotes, async () {const url mongodb://127.0.0.1:27017/quote?directConnectiontrueserverSelectionTimeoutMS2000appNamemongosh1.8.0const client new MongoClient(url, { useUnifiedTopology: true })try {await client.connect()const database client.db(quote)const collection database.collection(quotes)const quotes await collection.find().toArray()// Build the HTML table structurelet html table border1html trthQuote/ththAuthor/th/trfor (const quote of quotes) {html trtd${quote.quote}/tdtd${quote.author}/td/tr}html /tablereturn html} catch (error) {console.error(error)return Error fetching quotes} finally {await client.close()}
})在此端点中我们检索数据库中所有现有的报价并将它们作为简单的 HTML 表返回。在实际应用程序中我们会将数据库连接工作提取到一个中心位置。
如果您查看到目前为止应用程序的服务器和客户端您会发现我们只做了最少的工作。HTMX 在这里简化的最重要的事情是提交表单。hx-post 属性取代了从表单中取出数据、将其编组为 JSON 并使用 fetch() 或类似内容提交的所有工作。
总结
随着事情变得越来越复杂我们开始不得不依赖客户端中的 JavaScript即使使用 HTMX。例如内联行编辑。我们可能希望使用 JavaScript 执行的某些操作例如将新行直接插入表中可以通过 HTMX 交换来完成。HTMX 允许您使用简单的语法做很多事情然后在必要时回退到 JavaScript。
最大的心理变化是从服务器生成 HTMX。您可以选择多种 HTML 或 JavaScript 模板引擎使这一切变得更加容易。一旦我们习惯使用 HTMX一切都会变得轻而易举。本质上我们已经从技术栈中消除了整个 JSON 转换层。
我们刚刚通过组合 Bun、Elysia、HTMX 和 MongoDB 进行了简单的演示模版但您至少应该对这个技术栈有一个感觉这些组件可以很好地协同工作。Bun、Elysia 和 MongoDB 安静地完成自己的工作而如果您更习惯 JSON API则 HTMX 需要多考虑一下。
