Wubba lubba dub dub, pembangun! Pernahkah anda terfikir bagaimana rasanya menerokai pelbagai luas Rick dan Morty melalui lensa pembangunan web? Baik, ambil senjata portal anda dan bersiap sedia, kerana hari ini kami akan melakukannya – kami akan membina Penjelajah Watak Rick dan Morty menggunakan HTMX dan Express.js. Matlamat tutorial ini adalah untuk menunjukkan betapa mudahnya untuk melakukan pembangun web dan melaksanakan penomboran menggunakan HTMX
Dalam pengembaraan ini, kami akan meliputi:
Sama ada anda seorang pengaturcara baru atau pembangun berpengalaman yang ingin meningkatkan tahap, panduan ini akan membantu anda mencipta apl web yang sangat mengagumkan.
Sebelum kita boleh mula melompat antara dimensi, kita perlu menyediakan meja kerja antara dimensi kita. Anggap ini sebagai menganjurkan garaj Rick tetapi dengan sinar kematian yang lebih sedikit dan lebih banyak JavaScript.
mkdir rick-and-morty-explorer cd rick-and-morty-explorer npm init -y npm install express axios ejs
rick-and-morty-explorer/ ├── node_modules/ ├── public/ │ └── styles.css ├── views/ │ └── index.ejs ├── package.json └── server.js
Sekarang meja kerja kami telah disediakan, mari kita teruskan untuk membuat pelayan kosmik kami.
Sekarang, mari buat pelayan Express.js kami. Ini seperti membina enjin senapang portal kami - itulah yang menguatkan perjalanan antara dimensi kami.
Dalam tutorial ini, kami akan menggunakan API Rick dan Morty buatan peminat yang membolehkan kami mengambil senarai watak, lokasi mereka dan episod yang mereka munculkan. Kami juga akan menggunakan ejs, templat javascript yang popular enjin, untuk menulis HTML kami. ejs tidak diperlukan tetapi memudahkan penulisan HTML kami dengan cara yang bersih dan boleh digunakan semula.
Buka server.js, dan mari dapatkan pengekodan:
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.static('public'));
app.set('view engine', 'ejs');
const BASE_URL = 'https://rickandmortyapi.com/api/character';
app.get('/', async (req, res) => {
const { page = 1, name, status } = req.query;
let url = `${BASE_URL}?page=${page}`;
if (name) url += `&name=${name}`;
if (status) url += `&status=${status}`;
try {
const response = await axios.get(url);
res.render('index', { data: response.data, query: req.query });
} catch (error) {
console.error('Error fetching data:', error.message);
res.status(500).render('error', { message: 'Error fetching data' });
}
});
app.listen(3000, () => console.log('Server running on port 3000'));
Persediaan pelayan ini seperti garaj Rick – di situlah semua keajaiban berlaku. Kami menggunakan Express untuk mencipta pelayan kami dan mengendalikan penghalaan. Laluan utama (/) ialah tempat kami akan mengambil data aksara daripada API Rick dan Morty berdasarkan parameter pertanyaan.
Perhatikan cara kami mengendalikan penomboran dan penapis di sini. Parameter halaman menentukan halaman hasil yang kami minta, manakala nama dan status membenarkan untuk menapis aksara. Fleksibiliti ini penting untuk pelaksanaan penomboran HTMX kami.
Dengan pelayan kosmik kami tersedia, kami memerlukan cara untuk melihat multiverse. Masukkan EJS dan HTMX—skrin tontonan pelbagai dimensi kami dan reka bentuk alat yang cekap.
HTMX ialah perpustakaan JavaScript baharu yang membolehkan anda mengakses AJAX, CSS Transitions, WebSockets dan Acara Dihantar Pelayan secara langsung dalam HTML tanpa menulis JavaScript (React, Angular, Vue, dll.). Ia seperti implan saraf Rick—ia meningkatkan keupayaan HTML melangkaui impian paling liar anda.
Dalam fail views/index.ejs anda, tambahkan kod berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rick and Morty Explorer</title>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Rick and Morty Character Explorer</h1>
<!-- Filter section will go here -->
<div id="character-table">
<% if (data.results && data.results.length > 0) { %>
<table>
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Status</th>
<th>Species</th>
<th>Origin</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% data.results.forEach(character => { %>
<tr>
<td><img src="<%= character.image %>" alt="<%= character.name %>" width="50"></td>
<td><%= character.name %></td>
<td><%= character.status %></td>
<td><%= character.species %></td>
<td><%= character.origin.name %></td>
<td><a href="/character/<%= character.id %>" hx-get="/character/<%= character.id %>" hx-target="body" hx-push-url="true">View More</a></td>
</tr>
<% }); %>
</tbody>
</table>
<!-- Pagination section will go here -->
</body>
</html>
Kod di atas menyediakan jadual asas untuk tapak web kami, kami akan menambah penomboran dan penapisan menggunakan HTMX dalam bahagian berikut.
Sekarang, mari kita laksanakan penomboran, mekanisme perjalanan antara dimensi apl kami. Di sinilah HTMX benar-benar bersinar, membolehkan kami melaksanakan penomboran sisi pelayan yang lancar tanpa sebarang JavaScript tersuai.
Tambah bahagian penomboran ini pada index.ejs anda, hanya selepas jadual aksara:
<div class="pagination">
<% const currentPage = parseInt(query.page) || 1; %>
<% if (data.info.prev) { %>
<a href="/?page=<%= currentPage - 1 %><%= query.name ? `&name=${query.name}` : '' %><%= query.status ? `&status=${query.status}` : '' %>"
hx-get="/?page=<%= currentPage - 1 %><%= query.name ? `&name=${query.name}` : '' %><%= query.status ? `&status=${query.status}` : '' %>"
hx-target="body"
hx-push-url="true">Previous</a>
<% } %>
<span>Page <%= currentPage %> of <%= data.info.pages %></span>
<% if (data.info.next) { %>
<a href="/?page=<%= currentPage + 1 %><%= query.name ? `&name=${query.name}` : '' %><%= query.status ? `&status=${query.status}` : '' %>"
hx-get="/?page=<%= currentPage + 1 %><%= query.name ? `&name=${query.name}` : '' %><%= query.status ? `&status=${query.status}` : '' %>"
hx-target="body"
hx-push-url="true">Next</a>
<% } %>
</div>
Bahagian penomboran ini ialah permata mahkota pelaksanaan HTMX kami. Jom pecahkan:
Keindahan penomboran HTMX ini adalah kesederhanaan dan kecekapannya. Kami dapat melaksanakan penomboran sebelah pelayan yang lancar tanpa menulis satu baris JavaScript tersuai. Ia lancar seperti pistol portal Rick – klik pautan, dan anda serta-merta diangkut ke halaman seterusnya aksara.
Dengan memanfaatkan HTMX, kami telah mencipta sistem penomboran yang bukan sahaja mudah untuk dilaksanakan tetapi juga menyediakan pengalaman pengguna yang lancar seperti aplikasi. Ia pantas, mengekalkan keadaan merentas pemuatan halaman dan menggunakan Javascript yang minimum.
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!
Atas ialah kandungan terperinci Membina Penjelajah Watak Rick dan Morty dengan HTMX dan Express.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menambah gaya css ke html
perintah biasa iscsiadm
Bagaimana untuk memaparkan dua div sebelah menyebelah
Kegunaan utama sistem pengendalian Linux
Apakah HD telefon bimbit?
Bolehkah percikan api Douyin dinyalakan semula jika ia telah dimatikan selama lebih daripada tiga hari?
Linux menambah kaedah sumber kemas kini
Bagaimana untuk menjana fail bin dengan mdk
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
