nodejs学习

1. 安装Node.js、npm、express

sudo apt install nodejs
sudo apt install npm
npm install express --save

2. 创建项目目录

mkdir nodejs
cd nodejs
npm init -y

3. 编写服务器代码

// 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. 引入依赖库

const express = require('express');
const app = express();

• express 是一个常用的 Node.js 框架，用于创建 Web 服务器。
• app 是 Express 实例，代表整个 Web 应用，接下来我们会使用 app 来配置路由、设置中间件等。

2. 定义端口

const PORT = 3000;

• PORT 变量设置服务器监听的端口号为 3000。
• 这意味着服务器启动后可以通过 http://localhost:3000 进行访问。

3. 设置跨域访问 (CORS)

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()：表示当前中间件执行完毕，继续处理后续的中间件或路由。

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 的值是随机生成的整数。

// 对于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);

5. 启动服务器并监听端口

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

• app.listen(PORT, callback)：启动服务器并监听指定端口（3000）。
  • 当服务器启动成功后，会在控制台打印 Server is running on http://localhost:3000 这条信息。

6. 代码整体作用

• 这个服务器是一个简单的 API 服务。
• 它监听 3000 端口，并提供一个 /webapi_dpGet 路由，用于客户端获取一个随机生成的整数。
• 由于启用了跨域访问设置，该服务器可以被任何域名（*）访问，非常适合用来进行前后端分离项目的简单数据测试。

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

• 在浏览器中输入 http://localhost:3000/webapi_dpGet，会看到如下类似的 JSON 响应：

  { "value": 42 }

• 这个响应中的 value 是一个 0 到 100 之间的随机整数。每次刷新页面或重新请求该 API，都会得到不同的随机值。

4. 启动服务器

node server.js

看见输出

Server is running on http://localhost:3000

表示成功