HTMX构建无重载闪烁的交互式页面

HTMX构建无重载闪烁的交互式页面

推荐超级课程：

• 本地离线DeepSeek AI方案部署实战教程【完全版】
• Docker快速入门到精通
• Kubernetes入门到大师通关课
• AWS云服务快速入门实战

对于您的Web应用程序来说，React通常可能过于庞大，有时仅使用Web服务器和HTMX就能创建出具有交互性的应用程序，效果不亚于React框架。

在这篇博客文章中，我们将展示如何使用HTMX构建无重载闪烁的交互式页面导航：

服务器设置

---

mkdir no-react-app   

cd no-react-app  

npm init -y  

npm install express nunjucks

然后我们创建一个服务器文件并运行

//文件：app.js  

const express = require("express")  

const app = express()  

  

const nunjucks = require('nunjucks');  

nunjucks.configure("views", {  

    autoescape: true,  

    express: app  

});  

  

app.get("/", (req, res) => {  

    res.render("pages/home.html")  

})  

  

app.get("/users", (req, res) => {  

    res.render("pages/users.html")  

})  

  

app.get("/posts", (req, res) => {  

    res.render("pages/posts.html")  

})  

  

app.listen(3000, () => {  

    console.info(`应用程序运行于 http://localhost:3000`)  

})

我们使用nunjucks作为模板引擎。所有模板、布局和部分文件都将存储在“views”目录中。因此，我们的项目结构将如下所示：

应用结构

---

app.js  

views