Erstellen eines Rick and Morty-Charakter-Explorers mit HTMX und Express.js

Wubba lubba dub dub, Entwickler! Haben Sie sich jemals gefragt, wie es wäre, das riesige Multiversum von Rick und Morty durch die Linse der Webentwicklung zu erkunden? Schnappen Sie sich Ihre Portal-Waffen und machen Sie sich bereit, denn heute werden wir genau das tun – wir werden einen Rick and Morty-Charakter-Explorer mit HTMX und Express.js erstellen. Das Ziel dieses Tutorials ist es, zu zeigen, wie einfach es ist, Webentwicklung durchzuführen und Paginierung mit HTMX zu implementieren

In diesem Abenteuer behandeln wir Folgendes:

• Einrichten eines Express.js-Servers (unser interdimensionales Reisegerät)
• Erstellen eines dynamischen Frontends mit EJS und HTMX (unserem Portal-Viewer)
• Implementierung einer reibungslosen, serverseitigen Paginierung mit HTMX (unserer Methode zum Springen zwischen Dimensionen)

Egal, ob Sie ein unerfahrener Programmierer oder ein erfahrener Entwickler sind, der aufsteigen möchte, dieser Leitfaden hilft Ihnen beim Erstellen einer Web-App, die wirklich beeindruckend ist.

Einrichten Ihrer interdimensionalen Werkbank

Bevor wir beginnen können, zwischen den Dimensionen zu hüpfen, müssen wir unsere interdimensionale Werkbank einrichten. Stellen Sie sich das so vor, als würden Sie Ricks Garage organisieren, aber mit weniger Todesstrahlen und mehr JavaScript.

1. Stellen Sie zunächst sicher, dass Node.js installiert ist. Wenn nicht, können Sie es von nodejs.org herunterladen.
2. Als nächstes richten wir unser Projektverzeichnis ein und installieren die notwendigen Pakete. Öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus:

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

1. Projektstruktur: Die Organisation unseres Projekts ähnelt dem Ordnen von Ricks Gadgets. Hier ist eine Grundstruktur:

rick-and-morty-explorer/
├── node_modules/
├── public/
│   └── styles.css
├── views/
│   └── index.ejs
├── package.json
└── server.js

Da unsere Werkbank nun eingerichtet ist, können wir mit der Herstellung unseres kosmischen Servers fortfahren.

Erstellen des Cosmic Server (Express.js Backend)

Jetzt erstellen wir unseren Express.js-Server. Das ist, als würde man den Motor unserer Portalkanone bauen – er ist es, der unsere interdimensionalen Reisen antreibt.

In diesem Tutorial verwenden wir eine von Fans erstellte Rick and Morty-API, die es uns ermöglicht, eine Liste der Charaktere, ihre Standorte und die Episoden, in denen sie aufgetreten sind, abzurufen. Wir werden auch ejs verwenden, eine beliebte Javascript-Vorlage Engine, um unser HTML auszuschreiben. ejs ist nicht erforderlich, vereinfacht aber das Schreiben unseres HTML auf saubere und wiederverwendbare Weise.

Öffnen Sie server.js und beginnen Sie mit dem Codieren:

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'));

Dieses Server-Setup ist wie Ricks Garage – hier geschieht die ganze Magie. Wir verwenden Express, um unseren Server zu erstellen und das Routing zu verwalten. Über die Hauptroute (/) rufen wir basierend auf den Abfrageparametern Charakterdaten von der Rick and Morty API ab.

Beachten Sie, wie wir hier mit Paginierung und Filtern umgehen. Der Seitenparameter bestimmt, welche Ergebnisseite wir anfordern, während Name und Status das Filtern von Zeichen ermöglichen. Diese Flexibilität ist für unsere HTMX-Paginierungsimplementierung von entscheidender Bedeutung.

Entwerfen des Multiverse Viewers (Frontend mit EJS und HTMX)

Da unser kosmischer Server installiert ist, brauchen wir eine Möglichkeit, das Multiversum zu betrachten. Geben Sie EJS und HTMX ein – unseren mehrdimensionalen Anzeigebildschirm und unsere effizienten Gadget-Designs.

HTMX ist eine neue JavaScript-Bibliothek, mit der Sie direkt in HTML auf AJAX, CSS-Übergänge, WebSockets und vom Server gesendete Ereignisse zugreifen können, ohne JavaScript (React, Angular, Vue usw.) schreiben zu müssen. Es ist wie Ricks Nervenimplantat – es erweitert die Fähigkeiten von HTML über Ihre kühnsten Träume hinaus.

Fügen Sie in Ihrer Datei „views/index.ejs“ den folgenden Code hinzu:

<!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>

Der obige Code richtet eine Basistabelle für unsere Website ein. Im folgenden Abschnitt werden wir Paginierung und Filterung mit HTMX hinzufügen.

Interdimensionale Paginierung implementieren

Jetzt implementieren wir die Paginierung, den interdimensionalen Reisemechanismus unserer App. Hier glänzt HTMX wirklich und ermöglicht uns die Implementierung einer reibungslosen, serverseitigen Paginierung ohne benutzerdefiniertes JavaScript.

Fügen Sie diesen Paginierungsabschnitt direkt nach der Zeichentabelle zu Ihrer index.ejs hinzu:

<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>

Dieser Paginierungsabschnitt ist das Kronjuwel unserer HTMX-Implementierung. Lassen Sie es uns aufschlüsseln:

• Wir berechnen die aktuelle Seite und prüfen, ob es vorherige oder nächste Seiten gibt.
• Das hx-get-Attribut auf jedem Link weist HTMX an, eine GET-Anfrage an unseren Server mit der entsprechenden Seitennummer und allen aktiven Filtern zu stellen.
• hx-target="body" sorgt dafür, dass beim Navigieren der gesamte Seiteninhalt aktualisiert wird.
• hx-push-url="true" aktualisiert die URL und ermöglicht Benutzern das Teilen oder Lesezeichen bestimmter Seiten.

Das Schöne an dieser HTMX-Paginierung ist ihre Einfachheit und Effizienz. Wir sind in der Lage, eine reibungslose, serverseitige Paginierung zu implementieren, ohne eine einzige Zeile benutzerdefiniertes JavaScript zu schreiben. Es ist so nahtlos wie Ricks Portalpistole – klicken Sie auf einen Link und Sie werden sofort zur nächsten Seite mit Charakteren weitergeleitet.

Durch die Nutzung von HTMX haben wir ein Paginierungssystem geschaffen, das nicht nur einfach zu implementieren ist, sondern auch ein reibungsloses, App-ähnliches Benutzererlebnis bietet. Es ist schnell, behält den Status über das Laden der Seite hinweg bei und verwendet nur minimales Javascript.

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!

Das obige ist der detaillierte Inhalt vonErstellen eines Rick and Morty-Charakter-Explorers mit HTMX und Express.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!