在现代 Web 开发中，随着前端技术的飞速发展，越来越多的应用程序采用了前端和后端分离的架构。采用此种架构的一个主要好处就是，能够更好的适应不同的操作系统和设备。但同时，也对后端开发的要求提高了，需要能够提供更加丰富和高效的 API 接口。本文将介绍如何使用 Express.js 开发前端和后端分离的单页应用。
什么是单页应用？
单页应用是一种流行的 Web 应用程序架构，其最主要的特点是只有一个 HTML 页面，并且使用 JavaScript 和 AJAX 技术实现动态加载内容。一般情况下，单页应用可以实现网站功能的全部或部分，并有着更加流畅的用户体验。
相对于传统的多页面应用程序，单页应用有如下优势：
- 减少了服务器请求次数，减轻了服务器的负担。
- 用户可以更加流畅和快速地访问到内容。
- 支持无刷新加载数据和页面。
为什么使用 Express.js？
Express.js 是一款基于 Node.js 平台的 Web 应用框架，提供了许多编写 Web 应用所需的基础功能，如路由、请求处理、视图渲染等。由于其轻量化、灵活、高效的特点，被广泛应用于开发各种类型的 Web 应用程序。其中，Express.js 的路由功能尤其重要，可以方便地实现前端和后端 API 接口的管理。
开发流程
准备工作
- 安装 Node.js
- 创建一个空项目，使用 npm 初始化，并在项目中安装 Express.js。
npm init npm install express --save
构建应用程序
使用 Express.js 构建应用程序的第一步是创建一个服务器实例：
const express = require('express');
const app = express();路由设置
设置路由非常重要，可以处理不同请求和页面的访问。使用 Express.js 可以非常方便地设置和管理路由，示例代码如下：
// javascriptcn.com 代码示例
// 设置一个路由，响应 GET 请求
app.get('/hello', function(req, res) {
res.send('Hello World!');
});
// 设置一个路由，响应 POST 请求
app.post('/submit', function(req, res) {
res.send('Data submitted successfully!');
});统一处理错误
在开发 Web 应用程序过程中，错误处理非常重要，可以提高 Web 应用程序的稳定性和安全性。使用 Express.js 可以方便地统一处理错误，示例代码如下：
// 统一处理错误
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send('Something broke!');
});启动应用程序
使用 Express.js 启动 Web 应用程序非常容易，只需要设置好监听端口，示例代码如下：
// 启动应用程序，监听端口
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});前端和后端分离的单页应用
了解了 Express.js 的基本使用方法之后，我们来看看如何使用 Express.js 构建前端和后端分离的单页应用。具体步骤如下：
前端实现
使用 Vue.js 实现一个简单的前端页面，实现 Todo List 功能。示例代码如下：
// javascriptcn.com 代码示例
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model="newTodo" placeholder="输入新任务">
<button v-on:click="addTodo">添加任务</button>
<ul>
<li v-for="todo in todos">
{{ todo }}
<button v-on:click="removeTodo">删除</button>
</li>
</ul>
</div>// javascriptcn.com 代码示例
new Vue({
el: '#app',
data: {
message: 'Todo List',
newTodo: '',
todos: []
},
methods: {
addTodo: function() {
this.todos.push(this.newTodo);
this.newTodo = '';
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
});后端实现
使用 Express.js 实现后端 API 接口，处理前端的增删改查请求。示例代码如下：
// javascriptcn.com 代码示例
// 添加任务的 API 接口
app.post('/api/addTodo', function(req, res) {
const todo = req.body.todo;
todos.push(todo);
res.send({ code: 0, message: '任务添加成功!' });
});
// 删除任务的 API 接口
app.post('/api/removeTodo', function(req, res) {
const index = req.body.index;
todos.splice(index, 1);
res.send({ code: 0, message: '任务删除成功!' });
});
// 查询任务列表的 API 接口
app.get('/api/todos', function(req, res) {
res.send({ code: 0, data: todos });
});实现文件结构
将前端和后端代码分别放置在 public 和 server 目录下，示例代码如下：
// javascriptcn.com 代码示例
- public
- index.html
- js
- vue.js
- app.js
- css
- style.css
- server
- server.js构建应用程序
创建一个 Express.js 应用程序，设置路由和错误处理。示例代码如下：
// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const todos = [];
// 设置静态文件目录
app.use(express.static('public'));
// 解析 POST 请求体
app.use(bodyParser.json());
// 添加任务的 API 接口
app.post('/api/addTodo', function(req, res) {
const todo = req.body.todo;
todos.push(todo);
res.send({ code: 0, message: '任务添加成功!' });
});
// 删除任务的 API 接口
app.post('/api/removeTodo', function(req, res) {
const index = req.body.index;
todos.splice(index, 1);
res.send({ code: 0, message: '任务删除成功!' });
});
// 查询任务列表的 API 接口
app.get('/api/todos', function(req, res) {
res.send({ code: 0, data: todos });
});
// 统一处理错误
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send('Something broke!');
});
// 启动应用程序，监听端口
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});运行应用程序
启动应用程序，使用浏览器访问 http://localhost:3000 即可。在前端页面添加任务和删除任务，会向后端发送增删 API 请求，并通过查询 API 获取任务列表进行展示。
总结
本文详细介绍了如何使用 Express.js 构建前端和后端分离的单页应用。在实际开发中，开发人员可以根据自己的业务需求和技术水平进行相应的改进和优化，以达到更好的用户体验和应用程序性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65445ef87d4982a6ebe3fe99