2.5 使用 Elysia 和 HTMX 构建高效的后端应用

Elysia 和 HTMX 是构建现代 Web 应用的强大组合。Elysia 是一个高性能的后端框架，特别适合与 Bun 一起使用，而 HTMX 则提供了一种无需 JavaScript 即可实现动态交互的方式。以下是如何使用 Elysia 和 HTMX 构建高效后端应用的示例。

项目设置

首先，您可以使用 Elysia Kickstart 项目模板来快速启动项目。该模板已经配置了 TypeScript、Elysia、HTMX 以及其他开发工具，如 ESLint 和 Prettier，以确保代码质量和一致性。

安装依赖

使用 Bun 安装依赖：

bun install
bun run dev

或者使用 Docker：

docker-compose --file docker/dev/docker-compose.yml up

Elysia 服务器设置

在 src/index.ts 中设置 Elysia 服务器：

import { Elysia } from 'elysia';
 
const app = new Elysia();
 
app.get('/hello', (req, res) => {
  res.send({ message: 'Hello, world!' });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

HTMX 前端设置

在 public/index.html 中添加 HTMX：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elysia and HTMX</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body>
    <button hx-get="/hello" hx-trigger="click" hx-target="#response" hx-swap="innerHTML">
        Click Me!
    </button>
    <div id="response"></div>
</body>
</html>

类型安全

为了确保 HTMX 属性的类型安全，可以在项目中添加类型声明文件 types/htmx.d.ts：

declare namespace HTMX {
  interface HtmxAttributes {
    'hx-get'?: string;
    'hx-post'?: string;
    'hx-trigger'?: string;
    'hx-target'?: string;
    'hx-swap'?: string;
  }
}

综合示例

以下是一个综合示例，展示了如何在一个项目中同时使用 Elysia 和 HTMX，并确保 TypeScript 类型安全：

import { Elysia } from 'elysia';
import 'htmx';
 
const app = new Elysia();
 
app.get('/hello', (req, res) => {
  res.send({ message: 'Hello from Elysia!' });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
 
// HTMX 部分
const button = document.createElement('button');
button.setAttribute('hx-get', '/hello');
button.setAttribute('hx-trigger', 'click');
button.innerText = 'Fetch Data';
document.body.appendChild(button);
 
button.addEventListener('click', () => {
  console.log('Button clicked');
});

通过这种方式，您可以使用 Elysia 处理后端请求，并使用 HTMX 处理前端交互，同时确保整个项目的类型安全。更多详细信息和示例可以参考 Elysia Kickstart 项目模板和相关文档[1][2][3][4][5]。

Citations: [1] https://github.com/syhner/elysia-kickstart [2] https://www.infoworld.com/article/3714603/full-stack-web-development-with-htmx-and-bun-part-1-elysia-and-mongodb.html [3] https://www.youtube.com/watch?v=_TnOSgSPV6M [4] https://github.com/IDRAYNAR/Elysia-x-Bun-CRUD [5] https://www.youtube.com/watch?v=3F7cqnZrzA8

Woodman's Second Brain | 第二大脑

探索