开发者们,Wubba lubba dub dub!您是否想过通过网络开发的视角探索《瑞克和莫蒂》的广阔多元宇宙会是什么样子?好吧,拿起你的传送门枪并做好准备,因为今天我们将这样做 - 我们将使用 HTMX 和 Express.js 构建一个 Rick 和 Morty 角色资源管理器。本教程的目标是展示使用 HTMX 进行 Web 开发和实现分页是多么容易
在这次冒险中,我们将介绍:
设置你的多维工作台
制作 Cosmic 服务器(Express.js 后端)
在本教程中,我们将使用粉丝制作的《瑞克和莫蒂》API,它允许我们获取角色列表、他们的位置以及他们出现的剧集。我们还将使用 ejs,一种流行的 javascript 模板引擎,写出我们的 HTML。 ejs 不是必需的,但以干净且可重用的方式简化了 HTML 的编写。
打开 server.js,让我们开始编码:
雷雷
注意我们如何在这里处理分页和过滤器。 page 参数确定我们请求的结果页,而 name 和 status 允许过滤字符。这种灵活性对于我们的 HTMX 分页实现至关重要。
设计 Multiverse 查看器(使用 EJS 和 HTMX 的前端)
HTMX 是一个新的 JavaScript 库,允许您直接在 HTML 中访问 AJAX、CSS 转换、WebSocket 和服务器发送事件,而无需编写 JavaScript(React、Angular、Vue 等)。它就像 Rick 的神经植入物一样 — 它增强了 HTML 的功能,超出了您最疯狂的梦想。
在你的views/index.ejs文件中,添加以下代码:
雷雷
实现多维分页
将此分页部分添加到您的index.ejs,就在字符表之后:
雷雷
通过利用 HTMX,我们创建了一个分页系统,该系统不仅易于实现,而且还提供流畅的、类似应用程序的用户体验。它速度快,跨页面加载保持状态,并且使用最少的 Javascript。
Let's take our interdimensional exploration to the next level by adding filters to our character explorer. Think of this as tuning into different channels on interdimensional cable – you want to find the right show (or character) amidst the multiverse chaos.
Add this filter section to your index.ejs file, right above the character table:
<form id="filter-form" hx-get="/" hx-target="body" hx-push-url="true"> <input type="text" name="name" placeholder="Name" value="<%= query.name || '' %>"> <select name="status"> <option value="">All Statuses</option> <option value="alive" <%= query.status === 'alive' ? 'selected' : '' %>>Alive</option> <option value="dead" <%= query.status === 'dead' ? 'selected' : '' %>>Dead</option> <option value="unknown" <%= query.status === 'unknown' ? 'selected' : '' %>>Unknown</option> </select> <button type="submit">Filter</button> </form>
These filters allow users to narrow down their search, just like Rick tuning his interdimensional cable to find the perfect show. Enhanced with the power HTMX, our filter implementation is powerful and intuitive, providing real-time updates without needing custom JavaScript. Our app with both filters and pagination should look like this:
Now that our Rick and Morty Character Explorer looks slick and functional, it's time to add another exciting feature: individual character profiles. Imagine diving into a detailed dossier on Morty or Rick, complete with all their vital stats and episode appearances. Let's add a "View More" button to our character table to take users to a detailed character profile page.
Let's add a new route to our server.js file:
// Route to display character details app.get('/character/:id', async (req, res) => { const { id } = req.params; try { const response = await axios.get(`${BASE_URL}/${id}`); res.render('character', { character: response.data }); } catch (error) { console.error('Error fetching character details:', error.message); res.status(500).render('error', { message: 'Error fetching character details' }); } });
Let's also add a new file views/character.ejs the necessary HTML for our character detail page:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= character.name %> - Details</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <h1><%= character.name %> - Details</h1> <div class="character-details"> <img src="<%= character.image %>" alt="<%= character.name %>"> <ul> <li><strong>Status:</strong> <%= character.status %></li> <li><strong>Species:</strong> <%= character.species %></li> <li><strong>Gender:</strong> <%= character.gender %></li> <li><strong>Origin:</strong> <%= character.origin.name %></li> <li><strong>Location:</strong> <%= character.location.name %></li> </ul> <h2>Episodes</h2> <ul> <% character.episode.forEach(episode => { %> <li><a href="<%= episode %>" target="_blank">Episode <%= episode.split('/').pop() %></a></li> <% }); %> </ul> </div> <a href="/" hx-get="/" hx-target="body" hx-push-url="true" class="back-link">Back to Character List</a> </body> </html>
The code above defines a new route on our web server /character/:id. This new route is resolved when the user clicks on the view more option in the characters table. It fetches details for the specific character and returns a neatly rendered HTML page with all the character details. This page will look like this:
Now that we've built our interdimensional travel device, it's time to see it in action. Here's a complete overview of our code, bringing together everything we've covered so far and also defining custom CSS styles to make the application look better.
Congratulations—you've just built an interdimensional character explorer! In this adventure, we've covered a lot of ground, from setting up our Express.js server and designing a dynamic frontend with EJS and HTMX to implementing smooth pagination and filters.
This project is a testament to the power of HTMX. It shows how we can create dynamic, server-side rendered applications with minimal JavaScript. It's fast, efficient, and user-friendly—just like Rick's portal gun.
But don't stop here! There's a whole multiverse of possibilities waiting for you. Experiment with new features, add more filters or integrate additional APIs. The only limit is your imagination.
Before you go, here are some additional resources to help you on your journey:
And for those who made it to the end, here are a few hidden Rick and Morty references:
Happy coding, and may your interdimensional travels be filled with endless possibilities!
以上是使用 HTMX 和 Express.js 构建 Rick 和 Morty 角色资源管理器的详细内容。更多信息请关注PHP中文网其他相关文章!