1. 安装Node.js、npm、express

1
2
3
sudo apt install nodejs
sudo apt install npm
npm install express --save

2. 创建项目目录

1
2
3
mkdir nodejs
cd nodejs
npm init -y

3. 编写服务器代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// server.js
const express = require('express');
const app = express();
const PORT = 3000;

// 设置跨域访问
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});

// 定义一个简单的 API 路由
app.get('/webapi_dpGet', (req, res) => {
const value = Math.floor(Math.random() * 100); // 随机生成一个 0-100 的整数
res.json({ value });
});

// 启动服务器并监听指定端口
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

代码解释

这个代码是用 Node.js 和 Express 框架编写的一个简单的服务器程序。下面逐行解析这段代码的功能:

  1. 引入依赖库
1
2
const express = require('express');
const app = express();
  • express 是一个常用的 Node.js 框架,用于创建 Web 服务器。
  • app 是 Express 实例,代表整个 Web 应用,接下来我们会使用 app 来配置路由、设置中间件等。
  1. 定义端口
1
const PORT = 3000;
  • PORT 变量设置服务器监听的端口号为 3000
  • 这意味着服务器启动后可以通过 http://localhost:3000 进行访问。
  1. 设置跨域访问 (CORS)
1
2
3
4
5
6
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
  • app.use 是 Express 中间件,用于配置 HTTP 请求的预处理逻辑。
  • 该中间件的作用是配置 CORS(跨域资源共享),允许客户端从不同的域名访问该服务器提供的资源。
  • 具体配置项如下:
    • Access-Control-Allow-Origin: '*':允许所有域名(*)访问本服务器。
    • Access-Control-Allow-Methods: 'GET, POST, PUT, DELETE':允许客户端使用 GETPOSTPUTDELETE 等 HTTP 方法。
    • Access-Control-Allow-Headers: 'Content-Type':允许客户端请求头中包含 Content-Type 字段(用于指定请求数据类型)。
  • next():表示当前中间件执行完毕,继续处理后续的中间件或路由。
  1. 定义路由和处理逻辑
1
2
3
4
app.get('/webapi_dpGet', (req, res) => {
const value = Math.floor(Math.random() * 100); // 随机生成一个 0-100 的整数
res.json({ value });
});
  • app.get('/webapi_dpGet', (req, res) => { ... }) 定义了一个 GET 请求的路由。
    • 路由路径为 /webapi_dpGet
    • 当客户端访问 http://localhost:3000/webapi_dpGet 时,服务器会执行该路由中的回调函数。
  • Math.floor(Math.random() * 100):生成一个 0 到 100 之间的随机整数。
  • res.json({ value }):将生成的整数封装成 JSON 格式并返回给客户端。
    • 返回的内容形如 { value: 42 },其中 value 的值是随机生成的整数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 对于json可以传入多个数据

/*
后端
*/
app.get('/webapi_dpGet', (req, res) => {
const value = Math.floor(Math.random() * 100); // 随机生成一个 0-100 的整数
const name = "jasonqian";
res.json({ value, name });
});


/*
前端
*/
function fetchDataAndUpdateChart() {
fetch("http://47.108.233.225:3000/webapi_dpGet")
.then(response => response.json())
.then(data => {
if (data && data.value !== undefined) {
gaugeOptionUser.series[0].data[0].value = data.value;
userChart.setOption(gaugeOptionUser, true);
}
console.log(data.name); // 可以使用data.name将jasonqian打印出来
})
.catch(error => console.error('Error fetching data:', error));
}

setInterval(fetchDataAndUpdateChart, 4000);

  1. 启动服务器并监听端口
1
2
3
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
  • app.listen(PORT, callback):启动服务器并监听指定端口(3000)。
    • 当服务器启动成功后,会在控制台打印 Server is running on http://localhost:3000 这条信息。
  1. 代码整体作用
  • 这个服务器是一个简单的 API 服务。
  • 它监听 3000 端口,并提供一个 /webapi_dpGet 路由,用于客户端获取一个随机生成的整数。
  • 由于启用了跨域访问设置,该服务器可以被任何域名(*)访问,非常适合用来进行前后端分离项目的简单数据测试。

示例请求
启动该服务器后,可以通过以下方式进行测试:

  • 在浏览器中输入 http://localhost:3000/webapi_dpGet,会看到如下类似的 JSON 响应:
    1
    { "value": 42 }
  • 这个响应中的 value 是一个 0 到 100 之间的随机整数。每次刷新页面或重新请求该 API,都会得到不同的随机值。

4. 启动服务器

1
node server.js

看见输出

1
Server is running on http://localhost:3000

表示成功