使用 Express.js 构建一个美食杂志网站-JavaScript中文网-JavaScript教程资源分享门户

前言

在互联网时代，网站已经成为人们获取信息、娱乐、学习的主要途径之一。而美食杂志网站则是一个受欢迎的类型，因为它可以为用户提供各种美食的食谱、餐厅介绍、美食活动等信息。本文将介绍如何使用 Express.js 构建一个美食杂志网站。

环境准备

在开始之前，需要安装 Node.js 和 Express.js。如果您还没有安装，可以通过以下命令安装：

$ sudo apt-get install nodejs
$ sudo apt-get install npm
$ npm install express

创建项目

首先，创建一个项目文件夹，我们将其称为 food-magazine。在该文件夹中，创建一个名为 app.js 的文件，这将是我们的应用程序的入口点。

在 app.js 中，添加以下代码：

// javascriptcn.com code example
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

这段代码创建了一个 Express 应用程序并监听端口 3000。当用户访问 http://localhost:3000 时，将显示“Hello World!”。

现在，我们已经创建了一个简单的 Express 应用程序。接下来，我们将添加更多功能以构建一个美食杂志网站。

添加路由

路由是指将用户请求映射到应用程序中的特定代码的过程。在我们的美食杂志网站中，我们需要添加多个路由来处理不同的请求。

首先，我们将创建一个路由来显示主页。在 app.js 中添加以下代码：

app.get('/', (req, res) => {
  res.send('Welcome to Food Magazine!');
});

这将显示一个欢迎消息，告诉用户他们已经进入了美食杂志网站。

接下来，我们将创建一个路由来显示所有的食谱。在 app.js 中添加以下代码：

// javascriptcn.com code example
const recipes = [
  { id: 1, name: 'Spaghetti Bolognese', description: 'A classic Italian dish' },
  { id: 2, name: 'Pad Thai', description: 'A popular Thai dish' },
  { id: 3, name: 'Sushi', description: 'A Japanese delicacy' }
];

app.get('/recipes', (req, res) => {
  res.render('recipes', { recipes });
});

这段代码创建了一个名为 recipes 的数组，其中包含三个对象，每个对象代表一个食谱。然后，我们创建了一个路由来处理 /recipes 的 GET 请求，并使用 res.render 方法将 recipes 数组传递给 recipes 视图。

现在，我们需要创建 recipes 视图。在 food-magazine 文件夹中，创建一个名为 views 的文件夹，并在其中创建一个名为 recipes.ejs 的文件。在 recipes.ejs 中添加以下代码：

// javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>Recipes</title>
  </head>
  <body>
    <h1>Recipes</h1>
    <ul>
      <% for (let recipe of recipes) { %>
        <li><a href="/recipes/<%= recipe.id %>"><%= recipe.name %></a></li>
      <% } %>
    </ul>
  </body>
</html>

这段代码创建了一个 HTML 页面，其中包含一个标题和一个无序列表。我们使用 EJS 模板引擎来渲染页面，并使用 for 循环来遍历 recipes 数组并为每个食谱创建一个链接。

现在，当用户访问 http://localhost:3000/recipes 时，将显示所有的食谱。

接下来，我们将创建一个路由来显示单个食谱。在 app.js 中添加以下代码：

app.get('/recipes/:id', (req, res) => {
  const recipe = recipes.find(recipe => recipe.id === parseInt(req.params.id));
  if (!recipe) return res.status(404).send('Recipe not found');
  res.render('recipe', { recipe });
});

这段代码创建了一个路由来处理 /recipes/:id 的 GET 请求，并使用 req.params.id 来获取 URL 中的食谱 ID。然后，我们使用 Array.find 方法来查找具有相应 ID 的食谱。如果找不到食谱，则返回 404 Not Found。否则，我们将 recipe 对象传递给 recipe 视图。

接下来，我们需要创建 recipe 视图。在 views 文件夹中创建一个名为 recipe.ejs 的文件，并添加以下代码：

// javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title><%= recipe.name %></title>
  </head>
  <body>
    <h1><%= recipe.name %></h1>
    <p><%= recipe.description %></p>
  </body>
</html>

这段代码创建了一个 HTML 页面，其中包含食谱的名称和描述。我们使用 EJS 模板引擎来渲染页面，并使用 <%= %> 语法插入 recipe.name 和 recipe.description。

现在，当用户访问 http://localhost:3000/recipes/1 时，将显示 ID 为 1 的食谱的名称和描述。

添加静态文件

在美食杂志网站中，我们需要添加一些静态文件，例如图像、CSS 和 JavaScript 文件。为了提供这些文件，我们需要使用 Express 的 express.static 中间件。

首先，我们将在 food-magazine 文件夹中创建一个名为 public 的文件夹，并在其中添加一个名为 styles.css 的 CSS 文件。在 app.js 中添加以下代码：

app.use(express.static('public'));

这段代码告诉 Express 使用 public 文件夹中的文件作为静态文件。现在，我们可以在 HTML 文件中使用相对路径来引用这些文件，例如：

<link rel="stylesheet" href="/styles.css">

结论

在本文中，我们介绍了如何使用 Express.js 构建一个美食杂志网站。我们学习了如何创建路由来处理不同的请求，如何使用模板引擎来渲染视图，以及如何使用静态文件来提供图像、CSS 和 JavaScript 文件。

虽然本文只是一个简单的示例，但它可以帮助您了解如何使用 Express.js 构建复杂的 Web 应用程序。希望这篇文章对您有帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6739be09f296f6c55d2b5025