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
| 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(); });
app.get('/webapi_dpGet', (req, res) => { const value = Math.floor(Math.random() * 100); res.json({ value }); });
app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });
|
代码解释
这个代码是用 Node.js 和 Express 框架编写的一个简单的服务器程序。下面逐行解析这段代码的功能:
- 引入依赖库
1 2
| const express = require('express'); const app = express();
|
express
是一个常用的 Node.js 框架,用于创建 Web 服务器。
app
是 Express 实例,代表整个 Web 应用,接下来我们会使用 app
来配置路由、设置中间件等。
- 定义端口
PORT
变量设置服务器监听的端口号为 3000
。
- 这意味着服务器启动后可以通过
http://localhost:3000
进行访问。
- 设置跨域访问 (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'
:允许客户端使用 GET
、POST
、PUT
、DELETE
等 HTTP 方法。
Access-Control-Allow-Headers: 'Content-Type'
:允许客户端请求头中包含 Content-Type
字段(用于指定请求数据类型)。
next()
:表示当前中间件执行完毕,继续处理后续的中间件或路由。
- 定义路由和处理逻辑
1 2 3 4
| app.get('/webapi_dpGet', (req, res) => { const value = Math.floor(Math.random() * 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
|
app.get('/webapi_dpGet', (req, res) => { const value = Math.floor(Math.random() * 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); }) .catch(error => console.error('Error fetching data:', error)); }
setInterval(fetchDataAndUpdateChart, 4000);
|
- 启动服务器并监听端口
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
这条信息。
- 代码整体作用
- 这个服务器是一个简单的 API 服务。
- 它监听
3000
端口,并提供一个 /webapi_dpGet
路由,用于客户端获取一个随机生成的整数。
- 由于启用了跨域访问设置,该服务器可以被任何域名(
*
)访问,非常适合用来进行前后端分离项目的简单数据测试。
示例请求
启动该服务器后,可以通过以下方式进行测试:
- 在浏览器中输入
http://localhost:3000/webapi_dpGet
,会看到如下类似的 JSON 响应:
- 这个响应中的
value
是一个 0 到 100 之间的随机整数。每次刷新页面或重新请求该 API,都会得到不同的随机值。
4. 启动服务器
看见输出
1
| Server is running on http:
|
表示成功