随着前端技术的不断发展，前后端分离的架构方式也越来越受到开发者的青睐。其中，用 Express.js 搭建 Node.js 服务器实现前后端分离是一种非常流行的方式。本文将详细介绍这种方式的实现方法，包括以下内容：
- 前后端分离的概念及优势
- Express.js 框架的介绍
- 用 Express.js 搭建 Node.js 服务器的步骤
- 实现前后端分离的示例代码
1. 前后端分离的概念及优势
前后端分离是指将前端和后端的开发分离成两个独立的部分，前端负责 UI 展示和用户交互，后端负责数据处理和业务逻辑。这种架构方式的优势主要有以下几点：
- 前端与后端开发可以并行进行，提高了开发效率。
- 前端和后端的职责清晰，减少了代码的耦合性。
- 前端和后端可以使用不同的技术栈，选择最适合自己的开发工具和语言。
2. Express.js 框架的介绍
Express.js 是一个基于 Node.js 平台的 Web 应用开发框架，它可以帮助开发者快速地搭建 Web 服务器和 API。Express.js 框架提供了很多常用的功能，如路由、中间件、模板引擎等，非常适合用于搭建前后端分离的服务器。
3. 用 Express.js 搭建 Node.js 服务器的步骤
下面是用 Express.js 搭建 Node.js 服务器的步骤：
- 安装 Node.js 和 Express.js
在开始之前，需要先安装 Node.js 和 Express.js，可以通过以下命令进行安装：
npm install node npm install express
- 创建 Express.js 项目
在命令行中执行以下命令，创建一个名为 "myapp" 的 Express.js 项目：
npx express-generator --view=ejs myapp
这个命令会创建一个名为 "myapp" 的文件夹，里面包含了一个 Express.js 项目的基本结构和文件。
- 安装依赖
在 "myapp" 文件夹中执行以下命令，安装项目所需的依赖：
cd myapp npm install
- 启动服务器
在 "myapp" 文件夹中执行以下命令，启动服务器：
npm start
- 访问服务器
在浏览器中输入 "http://localhost:3000/"，即可访问服务器的默认页面。
4. 实现前后端分离的示例代码
下面是一个简单的示例代码，用于演示如何用 Express.js 搭建 Node.js 服务器实现前后端分离。
后端代码
// javascriptcn.com 代码示例
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// 设置处理请求体的中间件
app.use(bodyParser.json());
// 设置路由
app.get('/api/hello', (req, res) => {
res.send('Hello world!');
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000.');
});前端代码
// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>前后端分离示例</title>
</head>
<body>
<h1 id="hello"></h1>
<script>
// 发送 AJAX 请求
fetch('/api/hello')
.then(response => response.json())
.then(data => {
// 更新页面内容
document.getElementById('hello').textContent = data;
});
</script>
</body>
</html>在这个示例中，后端代码通过设置路由 "/api/hello"，来处理前端发送的 AJAX 请求。前端代码通过 fetch 函数发送 AJAX 请求，获取后端返回的数据，并将数据更新到页面上。
这个示例虽然很简单，但是已经演示了如何用 Express.js 搭建 Node.js 服务器实现前后端分离的基本方法。
总结
本文详细介绍了用 Express.js 搭建 Node.js 服务器实现前后端分离的方式，包括了前后端分离的概念及优势、Express.js 框架的介绍、用 Express.js 搭建 Node.js 服务器的步骤和实现前后端分离的示例代码。希望本文能够对正在学习前端开发的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65510154d2f5e1655dad5903