基于Express的Web应用：如何传递电影ID生成单条目详情页？

Hey there! Let's get this single movie detail page sorted out for your app. You're already halfway there with your Express setup—here's how to extend it to pass the movie ID from your results page and render a dedicated detail view:

Step 1: Complete Your Results Route (and Pass Data to the View) #

First, let's finish up that /results route (I'm assuming you're using the OMDB API since it's a common choice for movie apps—adjust if you're using a different API):

app.get("/results", function(req, res){
  var query = req.query.search;
  // Replace YOUR_API_KEY with your actual OMDB API key
  var apiUrl = `http://www.omdbapi.com/?s=${query}&apikey=YOUR_API_KEY`;
  
  request(apiUrl, function(error, response, body){
    if(!error && response.statusCode === 200){
      var movieData = JSON.parse(body);
      // Pass the search results to your results.ejs view
      res.render("results", {movies: movieData.Search});
    } else {
      res.render("error", {message: "Failed to fetch movie results"});
    }
  });
});

Step 2: Add Links to Your Results Page #

In your results.ejs file, update each movie entry to include a link that passes the movie's unique ID (like imdbID from OMDB) as a URL parameter:

<% if (movies) { %>
  <% movies.forEach(movie => { %>
    <div class="movie-card">
      <h3><%= movie.Title %></h3>
      <img src="<%= movie.Poster !== 'N/A' ? movie.Poster : '/placeholder.jpg' %>" 
           alt="Poster for <%= movie.Title %>">
      <!-- Link to the detail page with the movie ID -->
      <a href="/movie/<%= movie.imdbID %>" class="detail-link">View Full Details</a>
    </div>
  <% }) %>
<% } else { %>
  <p>No movies found for your search!</p>
<% } %>

Step 3: Create the Detail Page Route #

Add a new route in app.js that captures the movie ID from the URL, fetches the single movie's data, and renders the detail view:

// Route for single movie detail page
app.get("/movie/:id", function(req, res){
  const movieId = req.params.id; // Grab the ID from the URL
  const apiUrl = `http://www.omdbapi.com/?i=${movieId}&apikey=YOUR_API_KEY`;
  
  request(apiUrl, function(error, response, body){
    if(!error && response.statusCode === 200){
      const singleMovie = JSON.parse(body);
      // Pass the single movie data to the show.ejs view
      res.render("show", {movie: singleMovie});
    } else {
      res.render("error", {message: "Could not load movie details"});
    }
  });
});

Step 4: Build the Detail View (show.ejs) #

Create a new EJS file called show.ejs to display the full movie details:

<!DOCTYPE html>
<html>
<head>
  <title><%= movie.Title %> | Movie Details</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div class="movie-detail-container">
    <h1><%= movie.Title %></h1>
    <div class="movie-content">
      <img src="<%= movie.Poster !== 'N/A' ? movie.Poster : '/placeholder.jpg' %>" 
           alt="Poster for <%= movie.Title %>">
      <div class="movie-info">
        <p><strong>Release Year:</strong> <%= movie.Year %></p>
        <p><strong>Genre:</strong> <%= movie.Genre %></p>
        <p><strong>Director:</strong> <%= movie.Director %></p>
        <p><strong>Cast:</strong> <%= movie.Actors %></p>
        <p><strong>IMDB Rating:</strong> <%= movie.imdbRating %></p>
        <p class="plot"><strong>Plot:</strong> <%= movie.Plot %></p>
      </div>
    </div>
    <!-- Link back to search/results -->
    <a href="/" class="back-link">Back to Search</a>
  </div>
</body>
</html>

Quick Notes to Keep in Mind #

• API Key: Don't forget to replace YOUR_API_KEY with your actual OMDB API key (you can get one for free on their website).
• Error Handling: I added basic error handling routes—you can create an error.ejs file to display friendly error messages to users.
• Static Files: Your existing express.static middleware will handle CSS, images, etc., just make sure your file paths are correct.
• URL Encoding: If you add links back to results with the movie title, use encodeURIComponent() to handle special characters (like spaces or ampersands).

内容的提问来源于stack exchange，提问作者Skreedi