Membina Penjelajah Watak Rick dan Morty dengan HTMX dan Express.js

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:

• Menyediakan pelayan Express.js (peranti perjalanan antara dimensi kami)
• Mencipta bahagian hadapan dinamik dengan EJS dan HTMX (pelihat portal kami)
• Melaksanakan penomboran sisi pelayan yang lancar dengan HTMX (kaedah kami melompat antara dimensi)

Sama ada anda seorang pengaturcara baru atau pembangun berpengalaman yang ingin meningkatkan tahap, panduan ini akan membantu anda mencipta apl web yang sangat mengagumkan.

Sediakan Meja Kerja Interdimensi Anda

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.

1. Pertama, pastikan anda telah memasang Node.js. Jika tidak, anda boleh memuat turunnya dari nodejs.org.
2. Seterusnya, kami akan menyediakan direktori projek kami dan memasang pakej yang diperlukan. Buka terminal anda dan jalankan arahan berikut:

mkdir rick-and-morty-explorer
cd rick-and-morty-explorer
npm init -y
npm install express axios ejs

1. Struktur Projek: Mengatur projek kami adalah serupa dengan menyusun alat Rick. Berikut ialah struktur asas:

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.

Membuat Pelayan Kosmik (Express.js Backend)

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.

Mereka bentuk Multiverse Viewer (Frontend dengan EJS dan HTMX)

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.

Melaksanakan Penomboran Antara Dimensi

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:

• Kami mengira halaman semasa dan menyemak sama ada terdapat halaman sebelumnya atau seterusnya.
• Atribut hx-get pada setiap pautan memberitahu HTMX untuk membuat permintaan GET ke pelayan kami dengan nombor halaman yang sesuai dan sebarang penapis aktif.
• hx-target="body" memastikan keseluruhan kandungan halaman dikemas kini semasa menavigasi.
• hx-push-url="true" mengemas kini URL, membenarkan pengguna berkongsi atau menanda halaman halaman tertentu.

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.

Crafting the Multiverse Filter

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:

Creating Character Profiles: Adding the Details Screen

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:

Putting It All Together: Your Interdimensional Character Explorer

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.

Conclusion: Your Portal to Advanced Web Development

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.

"Post-Credits Scene": Additional Resources and Easter Eggs

Before you go, here are some additional resources to help you on your journey:

• HTMX Documentation
• Express.js Documentation
• Rick and Morty API

And for those who made it to the end, here are a few hidden Rick and Morty references:

• Remember, "Wubba Lubba Dub Dub!" means you're in great pain, but also having a great time coding.
• Lastly, always be like Rick – curious, inventive, and never afraid to break the rules (of JavaScript).

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!