记一次用Node.js部署API

54 阅读4分钟

Node.js部署API

写个篇文章的原因是当时在网上查了很久都没有找到合适的资料

1.安装与环境配置

1.1 下载Node.js

官网:nodejs.org/zh-cn/

image-20241208142218081.png

1.2 安装Node.js

一路点击下一步

1.3 验证是否成功安装Node.js

1.3.1 以管理员身份进入CMD
1.3.2 输入node -v

若出现版本号就是成功安装

image-20241208142441319.png

1.4 配置环境变量

1.4.1 在node.js的安装目录中,新建两个文件夹 node_global 和 node_cache

image-20241208142505626.png

1.4.2 配置这两个路径

1.4.2.1 以管理员身份进入CMD

image-20241208142547901.png 1.4.2.2 输入npm config set prefix "C:\Program Files\nodejs\node_global"

1.4.2.3 输入npm config set cache "C:\Program Files\nodejs\node_cache"

1.4.3 设置环境变量

1.4.3.1 打开编辑系统环境变量

image-20241208142846268.png image-20241208142852410.png 1.4.4 在【系统变量】中新建环境变量 NODE_PATH,值为: C:\Program Files\nodejs\node_global\node_modules

1.4.5 修改【用户变量】中的 path 变量,将C:\Users\xxx\AppData\Roaming\npm 修改为C:\Program Files\nodejs\node_global

1.4.6 在【系统变量】和【用户变量】中的path分别加入C:\Program Files\nodejs\node_global\node_modules

1.5 配置淘宝npm镜像源

1.5.1 以管理员身份进入CMD
1.5.2 输入以下两行命令

1.5.2.1 npm config set registry https://registry.npmmirror.com

1.5.2.2 npm config get registry

image-20241208143127395.png

2 重启你的电脑

3.安装json-server与相关依赖组件

3.1 安装json-server本体

3.1.1 以管理员身份运行CMD

3.1.2 输入npm install -g json-server

3.1.3 等待安装完成

3.1.4 输入json-server -v验证安装

3.2 安装依赖组件

3.2.1 输入npm install -g cors

3.2.2 输入npm install -g express

3.2.3 输入npm install -g body-parser

4.实现登录功能

4.1 在任意位置新建一个文件夹

4.2 配置js

const fs = require('fs');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const IP = '192.168.0.121'; // **服务器 IP** **地址**
const PORT = 3000; // **服务器端口**
app.use(cors({
 origin: '*' // 允许来自特定域的请求,
}));
app.use(bodyParser.json());
const db = JSON.parse(fs.readFileSync('db.json', 'utf-8'));
app.post('/login', (req, res) => {
 const { username, password } = req.body;
 const user = db.users.find(u => u.username === username && u.password === password);
 if (user) {
  res.json({ success: true, message: '登录成功' });
 } else {
  res.status(401).json({ success: false, message: '用户名或密码错误' });
 }
});
app.listen(PORT, IP, () => {
 console.log(`JSON Server is running on http://${IP}:${PORT}`);
});

4.3 配置数据json文件

{
  "users": [
    {
      "id": "1",
      "username": "11",
      "password": "11"
	}
]
}

4.4 Postman测试

image-20241208144654999.png

5. 实现Token加密功能

5.1 新建文件夹

5.2 配置JS文件

const express = require('express');
const app = express();
const PORT = 3000;//端口号设置
const data = require('./agw.json');//调用的数据
const checkToken = (req, res, next) => {
  const authHeader = req.headers.authorization;
  const token = authHeader && authHeader.split(' ')[1];
  if (token === 'ncyunhua') {//设置token
    next(); // 令牌正确,继续处理请求
  } else {
    res.status(401).json({ error: 'Token is error' }); // 令牌错误,返回401状态码
  }
};
app.get('/list', checkToken, (req, res) => {
  res.json(data.list);
});
app.listen(PORT, () => {
  console.log(`Server is running on http://192.168.0.121:${PORT}`);
});

5.3 HTML测试(JS部分)

var token = 'ncyunhua';// 定义 Token
function checkToken() {
  $.ajax({
    url: 'http://192.168.0.121:3000/list', // json-server 的 URL
    type: 'GET',
    beforeSend: function(xhr) {
      xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    },
    success: function(data) {
		console.log(data)
      $('#result').text('Token 正确,数据获取成功: ' + JSON.stringify(data.data));
    },
    error: function(xhr) {
      if (xhr.status === 401) {
        $('#result').text('Token 错误或未提供');
      } else if (xhr.status === 403) {
        $('#result').text('Token 错误,无权限访问');
      } else {
        $('#result').text('发生错误: ' + xhr.status);
      }
    }
  });
}
$(document).ready(function() {
  checkToken();
});

5.4 Postman测试

5.4.1 无Token

image-20241208144737463.png

5.4.2 有Token

image-20241208144749367.png

6.实现POST输入数据并自动刷新缓存文件

6.1 配置JS文件

// 监视 data.json 文件变化
fs.watch(DATA_FILE, (eventType, filename) => {
  if (eventType === 'change') {
    console.log(`File ${filename} has been changed. Reloading data...`);
    data = readDataFile(); // 更新 data 变量而不是重新声明
  }
});

6.2 HTML测试(JS部分)

const token = 'ncyunhua';
$(document).ready(function() {
  $('#dataForm').on('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    const data = {
      contact: $('#contact').val(),
      content: $('#content').val(),
      nickName: $('#nickName').val()
    };
    $.ajax({
      type: 'POST',
      url: 'http://192.168.0.121:8000/alarm',
      contentType: 'application/json',
      headers: {
        'Authorization': 'Bearer ' + token
      },
      data: JSON.stringify(data),
      success: function(response) {
        // 请求成功,处理响应数据
        console.log('Data sent successfully:', response);
      },
      error: function(xhr, status, error) {
        // 请求失败,处理错误
        console.error('Data send failed:', error);
      }
    });
  });

6.3 Postman测试

image-20241208144808136.png

6.4 CMD返回信息

image-20241221101013152.png

8.实现注册功能

8.1 配置JS文件

// 注册路由
app.post('/register', checkToken, (req, res) => {
	const {
		username,
		password
	} = req.body;
	// 验证用户名必须是数字+字母的组合
	const usernameRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/;
	if (!usernameRegex.test(username)) {
		return res.status(400).json({
			code: 400,
			success: false,
			message: '用户名必须是数字和字母的组合'
		});
	}
	// 验证密码要求数字+至少一个大写字母和一个小写字母
	const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/;
	if (!passwordRegex.test(password)) {
		return res.status(400).json({
			code: 400,
			success: false,
			message: '密码必须包含至少一个数字、一个大写字母和一个小写字母'
		});
	}
	// 检查用户名是否已存在
	const userExists = data.users.some(u => u.username === username);
	if (userExists) {
		return res.status(400).json({
			code: 400,
			success: false,
			message: '用户名已存在'
		});
	}
	// 创建新用户
	const newUser = {
		id: data.users.length + 1,
		username,
		password
	};
	// 将新用户添加到数据
	data.users.push(newUser);
	// 将更新后的数据写回文件
	fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2), 'utf-8');
	// 注册成功
	res.json({
		code: 200,
		success: true,
		message: '注册成功'
	});
});

8.2 Postman测试

4.png

补充.疑难解答

1.1 端口被占用

1.1.1 已有命令行窗口占用

直接关掉即可

1.1.2 未知东西占用

1.1.2.1 以管理员身份打开命令行

image-20241221100352359.png image-20241221100352359转存失败,建议直接上传图片文件

1.1.2.2 输入netstat -ano | findstr "占用的被占用的端口"以查找占用程序的pid

1.1.2.3 输入taskkill -f -t /pid "占用端口的程序的pid"结束占用程序