正文

如何用Express轻松解析并展示前端页面：快速上手指南

/0 浏览量
0727

Express 是一个灵活的 Node.js Web 应用框架，它可以帮助开发者快速创建 Web 应用程序。在这个指南中，我们将探讨如何使用 Express 来解析并展示前端页面，从基础设置到实际应用。

环境准备

在开始之前，请确保你的计算机上已经安装了 Node.js 和 npm（Node.js 的包管理器）。你可以通过以下命令检查是否已经安装：

node -v
npm -v

如果尚未安装，请访问 Node.js 官网 下载并安装。

创建项目

  1. 创建一个新的目录用于存放你的项目，并进入该目录：
mkdir express-app
cd express-app
  1. 初始化一个新的 Node.js 项目：
npm init -y
  1. 安装 Express 框架：
npm install express

基础设置

  1. 创建一个名为 app.js 的文件，并添加以下代码：
const express = require('express');
const path = require('path');
const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 设置模板引擎
app.set('view engine', 'ejs');

// 定义路由
app.get('/', (req, res) => {
  res.render('index');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
  1. 在项目根目录下创建一个名为 public 的文件夹，并在其中创建一个名为 index.ejs 的文件。这个文件将作为你的前端页面。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express App</title>
</head>
<body>
  <h1>Welcome to Express App!</h1>
</body>
</html>

解析并展示前端页面

在上面的代码中，我们使用了 express.static 中间件来设置静态文件目录，这样 Express 就可以解析并展示 public 文件夹中的文件。在我们的例子中，index.ejs 文件被解析并展示在根路由 / 上。

使用模板引擎

Express 默认使用 ejs 作为模板引擎。你可以使用 EJS 模板来动态生成 HTML 页面。在 index.ejs 文件中，你可以添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1>Welcome to <%= title %>!</h1>
</body>
</html>

在 app.js 文件中，你可以修改根路由的处理函数来传递标题：

app.get('/', (req, res) => {
  res.render('index', { title: 'Express App' });
});

现在，当你访问根路由时，页面标题将显示为 “Express App”。

总结

通过以上步骤，你已经学会了如何使用 Express 来解析并展示前端页面。Express 提供了丰富的功能和灵活性，可以帮助你快速搭建 Web 应用程序。希望这个指南对你有所帮助！

-- 展开阅读全文 --