网页开发Express,Web主机和vps的区别,广州vps主机,vps数据,免备案云主机服务器

🗣 Wd提问: 网页开发Express

🤖 Ai回答:
我们来系统地学习一下如何使用 Express 进行网页开发。

Express 是一个基于 Node.js 平台的极简、灵活的 Web 应用开发框架。它提供了强大的功能来构建单页、多页和混合的 Web 应用程序。可以说，它是 Node.js 生态中最流行的 Web 框架。

1、核心概念

在开始写代码之前，先理解几个核心概念：

* 中间件：这是 Express 的核心。中间件是一个函数，它可以访问请求对象 (`req`)、响应对象 (`res`) 和应用程序的请求-响应循环中的下一个中间件函数 (`next`)。它用于执行任何代码、修改请求和响应对象、结束请求-响应循环，或者调用堆栈中的下一个中间件。
* 路由：决定了应用如何响应客户端对特定端点的请求。这个端点是一个 URI（或路径）以及特定的 HTTP 请求方法（如 GET、POST）。
* 请求和响应对象：
* `req`：包含来自客户端请求的信息（如查询字符串、参数、请求体、HTTP 头等）。
* `res`：用于向客户端发送响应。

2、入门：创建一个简单的 Express 应用

步骤 1：初始化项目并安装 Express

首先，确保你已安装 Node.js。然后创建一个新的项目目录并初始化。

bash
创建项目目录并进入
mkdir my-express-app
cd my-express-app

初始化 package.json 文件（一路回车即可）
npm init -y

安装 Express
npm install express

步骤 2：创建主应用文件

创建一个名为 `app.js` 的文件。

javascript
// 1、导入 express 模块
const express = require('express');

// 2、创建一个 Express 应用实例
const app = express();

// 3、定义端口号
const port = 3000;

// 4、定义一个简单的路由
// 当用户以 GET 方法访问根路径 '/' 时，执行这个回调函数
app.get('/', (req, res) = {
res.send('Hello World from Express!');
});

// 5、启动服务器，监听指定端口
app.listen(port, () = {
console.log(`Express app listening at http://localhost:${port}`);
});

步骤 3：运行应用

在终端中运行：

bash
node app.js

打开浏览器，访问 `http://localhost:3000`，你将看到 Hello World from Express!。

3、核心功能详解

3.1 路由

路由定义了应用程序的端点如何响应客户端请求。

javascript
// 响应 GET 请求到 /about
app.get('/about', (req, res) = {
res.send('<h1关于我们</h1<p这是一个关于我们的页面。</p');
});

// 响应 POST 请求到 /login
app.post('/login', (req, res) = {
// 处理登录逻辑...
res.send('登录成功！');
});

// 支持所有 HTTP 方法
app.all('/secret', (req, res, next) = {
console.log('访问了 /secret，无论用什么方法');
next(); // 将控制权传递给下一个处理程序
});

3.2 中间件

Express 应用本质上是一系列中间件函数的调用。

使用内置中间件：

javascript
// 用于解析 application/json 格式的请求体
app.use(express.json());

// 用于解析 application/x-www-form-urlencoded 格式的请求体（来自表单提交）
app.use(express.urlencoded({ extended: true }));

// 托管静态文件（如 CSS, JS, 图片）
// 现在可以直接通过 http://localhost:3000/static/style.css 访问 public 目录下的文件
app.use('/static', express.static('public'));

创建自定义中间件：

javascript
// 一个简单的日志中间件
app.use((req, res, next) = {
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
next(); // 必须调用 next() 才能将请求传递给下一个中间件或路由
});

// 一个验证令牌的中间件
const authMiddleware = (req, res, next) = {
const token = req.headers['authorization'];
if (token === 'my-secret-token') {
next();
} else {
res.status(401).send('未经授权的访问');
}
};

// 将中间件应用于特定路由
app.get('/admin', authMiddleware, (req, res) = {
res.send('欢迎来到管理后台！');
});

3.3 处理请求和响应

获取请求数据：

javascript
app.get('/users/:userId/books/:bookId', (req, res) = {
// 路由参数
console.log(req.params); // { userId: '123', bookId: '456' }

// 查询字符串 (?name=John&age=30)
console.log(req.query); // { name: 'John', age: '30' }

// 请求头
console.log(req.headers);

res.send(`用户 ${req.params.userId} 的书籍 ${req.params.bookId}`);
});

app.post('/submit', (req, res) = {
// 请求体 (需要 express.json() 或 express.urlencoded() 中间件)
console.log(req.body);
res.json({ message: '数据接收成功', receivedData: req.body });
});

发送响应：

javascript
app.get('/demo', (req, res) = {
// 发送文本
// res.send('Plain Text');

// 发送 JSON
// res.json({ message: 'Hello JSON' });

// 发送文件
// res.sendFile(__dirname + '/public/index.html');

// 设置状态码并发送内容
// res.status(404).send('页面未找到');

// 设置响应头
res.set('Content-Type', 'text/html');
res.send('<p一些 HTML</p');
});

4、模板引擎

Express 可以集成多种模板引擎（如 EJS, Pug, Handlebars）来渲染动态 HTML。

以 EJS 为例：

1、安装 EJS:
bash
npm install ejs

2、配置 Express 使用 EJS:
javascript
app.set('view engine', 'ejs'); // 设置模板引擎
app.set('views', './views'); // 设置模板文件存放的目录

3、创建视图文件 `views/index.ejs`:
html
<!DOCTYPE html
<html
<head
<title<%= title %</title
</head
<body
<h1Welcome to <%= title %</h1
<p当前用户是: <%= user.name %</p
<ul
<% items.forEach(item = { %
<li<%= item %</li
<% }); %
</ul
</body
</html

4、在路由中渲染模板:
javascript
app.get('/ejs', (req, res) = {
res.render('index', {
title: '我的 Express 应用',
user: { name: 'Alice' },
items: ['苹果', '香蕉', '橘子']
});
});

访问 `http://localhost:3000/ejs` 将看到渲染后的动态页面。

5、一个完整的示例：简单的 CRUD API

这个例子展示了一个管理待办事项的简单 API。

javascript
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json()); // 解析 JSON 请求体

let todos = [
{ id: 1, task: '学习 Express', completed: false },
{ id: 2, task: '构建一个 API', completed: true }
];

// GET /todos 获取所有待办事项
app.get('/todos', (req, res) = {
res.json(todos);
});

// GET /todos/:id 根据 ID 获取单个待办事项
app.get('/todos/:id', (req, res) = {
const id = parseInt(req.params.id);
const todo = todos.find(t = t.id === id);
if (!todo) {
return res.status(404).json({ error: '待办事项未找到' });
}
res.json(todo);
});

// POST /todos 创建新的待办事项
app.post('/todos', (req, res) = {
const newTodo = {
id: todos.length + 1,
task: req.body.task,
completed: req.body.completed false
};
todos.push(newTodo);
res.status(201).json(newTodo);
});

// PUT /todos/:id 更新待办事项
app.put('/todos/:id', (req, res) = {
const id = parseInt(req.params.id);
const todoIndex = todos.findIndex(t = t.id === id);
if (todoIndex === -1) {
return res.status(404).json({ error: '待办事项未找到' });
}
todos[todoIndex]

Ai作答

📣 商家广告：