本文主要是介绍使用 HTMX 和 Bun 进行全栈 Web 开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
将 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 src="https://unpkg.com/htmx.org@1.9.10"></script><button hx-post="/clicked"hx-trigger="click"hx-target="#parent-div"hx-swap="outerHTML">Click 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?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+1.8.0'const 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 = '<ul>'for (const item of data) {html += `<li>${item.name}</li>`}html += '</ul>'return html
})
然后在我们的 index.html 中使用它：
<ul id="data-list"></ul>
<button hx-get="/quotes" hx-target="#data-list">Load Data</button>
现在，当您加载 /public/index.html 并单击按钮时，就会显示从服务器发送的列表。从端点发出 HTML 与常见的 JSON 模式不同。我们在这里遵守 RESTful 原则，HTMX 有用于处理 JSON 端点的插件，但这更习惯使用。
在我们的端点中，我们只是手动创建 HTML。在真实的应用程序中，我们可能会使用某种 JavaScript 框架来使事情更易于管理。
现在，我们可以从数据库中检索数据：
.get("/quotes", async () => {const url ='mongodb://127.0.0.1:27017/quote?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+1.8.0'const 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 border="1">'html += '<tr><th>Quote</th><th>Author</th></tr>'for (const quote of quotes) {html += `<tr><td>${quote.quote}</td><td>${quote.author}</td></tr>`}html += '</table>'return 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 需要多考虑一下。
这篇关于使用 HTMX 和 Bun 进行全栈 Web 开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
