当前位置：首页 > article >正文

Node.js 和 Express 搭建一个简单的 Web 应用程序

article 2024/11/19 15:36:08

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，而 Express 是一个简洁而灵活的 Node.js Web 应用程序框架。使用 Express，你可以快速搭建一个 Web 服务器，处理 HTTP 请求和响应。

以下是如何使用 Node.js 和 Express 搭建一个简单的 Web 应用程序的步骤：

1. 安装 Node.js 和 npm

首先，确保你的系统上已经安装了 Node.js 和 npm（Node Package Manager）。你可以通过以下命令检查是否已安装：

node -v
npm -v

如果没有安装，可以从 Node.js 官网下载并安装。

2. 创建项目目录

mkdir myapp
cd myapp

3. 初始化项目

使用 npm 初始化项目，生成 package.json 文件：

npm init -y

4. 安装 Express

使用 npm 安装 Express：

npm install express

5. 创建 Express 应用程序

在项目目录中创建一个 app.js 文件，并添加以下代码：

// app.js
const express = require('express');
const app = express();
const port = 3000;

// 定义一个简单的路由
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

6. 运行应用程序

使用以下命令运行应用程序：

node app.js

打开浏览器，访问 http://localhost:3000，你应该会看到 "Hello, World!" 的输出。

7. 添加更多路由

你可以添加更多的路由来处理不同的请求。例如：

// app.js
const express = require('express');
const app = express();
const port = 3000;

// 定义一个简单的路由
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// 定义一个关于页面的路由
app.get('/about', (req, res) => {
  res.send('This is the about page.');
});

// 定义一个用户页面的路由
app.get('/user/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

8. 使用中间件

Express 支持中间件，可以用来处理请求和响应之间的逻辑。例如，使用 express.json() 中间件来解析 JSON 请求体：

// app.js
const express = require('express');
const app = express();
const port = 3000;

// 使用 express.json() 中间件来解析 JSON 请求体
app.use(express.json());

// 定义一个简单的路由
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// 定义一个关于页面的路由
app.get('/about', (req, res) => {
  res.send('This is the about page.');
});

// 定义一个用户页面的路由
app.get('/user/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

// 定义一个 POST 请求的路由
app.post('/user', (req, res) => {
  const { name, age } = req.body;
  res.send(`User created: Name - ${name}, Age - ${age}`);
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

9. 使用模板引擎

Express 支持多种模板引擎，如 EJS、Pug 等。以下是使用 EJS 模板引擎的示例：

安装 EJS

npm install ejs

配置模板引擎

// app.js
const express = require('express');
const app = express();
const port = 3000;

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

// 定义一个简单的路由
app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page' });
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

创建模板文件

在项目目录中创建一个 views 目录，并在其中创建一个 index.ejs 文件：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <h1>Welcome to <%= title %></h1>
</body>
</html>

查看全文

http://www.kler.cn/a/400272.html