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

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 文件,并添加以下代码:

javascript 复制代码
// 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. 添加更多路由

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

javascript 复制代码
// 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 请求体:

javascript 复制代码
// 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

配置模板引擎
javascript 复制代码
// 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 文件:

javascript 复制代码
<!-- 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>
相关推荐
孟陬9 小时前
一个专业的前端如何在国内安装 `pnpm`
npm·node.js·bun
Moonbit13 小时前
安装Wasm版的MoonBit工具链
后端·node.js·webassembly
4_0_414 小时前
全栈视角:从零构建一个现代化的 Todo 应用
前端·node.js
杏花春雨江南15 小时前
npm error Could not resolve dependency:
前端·npm·node.js
嫂子的姐夫15 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
yeyuningzi15 小时前
npm升级提示error engine not compatible with your version of node/npm: npm@11.6.2
前端·npm·node.js
wyzqhhhh15 小时前
npm相关知识
前端·npm·node.js
独立开发者Pony17 小时前
【开源】假期爆肝我做了一个全新的Ai写小说工具模式
人工智能·开源·node.js
ayaya_mana18 小时前
Linux环境下Node.js任意版本安装与pnpm、yarn包管理
linux·node.js·vim
清灵xmf18 小时前
npm install --legacy-peer-deps:它到底做了什么,什么时候该用?
前端·npm·node.js