如何将前端JavaScript数据传递到Node.js并提交POST请求

1. 前端代码调整 #

你当前的前端代码仅在POST请求中提交了user对象，按照需求需要补充提交allUsers数组和单独的username字段，修改verified函数里的POST请求部分即可：

// 原有axios.post代码
// axios.post("dbid", {
//   user: user
// })
// 修改为以下内容
axios.post("你的Node.js后端接口地址（示例：http://localhost:3000/submit-user）", {
  user: user,
  allUsers: allUsers,
  username: user.username
})

注意：原代码里的dbid是占位值，你需要替换为实际的后端接口地址，前面拉取用户列表的GET请求地址也需要同步替换为对应的后端接口。

2. Node.js后端实现（以Express框架为例） #

Express是Node.js生态最常用的Web框架，你可以按以下步骤搭建接收请求的服务：

第一步：初始化项目安装依赖 #

在空文件夹下执行命令：

npm init -y
npm install express cors body-parser

第二步：编写服务端代码（server.js） #

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const app = express()
const port = 3000

// 配置跨域和请求体解析
app.use(cors())
app.use(bodyParser.json())

// 处理拉取用户列表的GET请求，对应前端axios.get("dbid")
app.get('/dbid', (req, res) => {
  // 此处替换为你从数据库查询所有用户的逻辑，返回查询结果即可
  // 示例返回假数据
  const mockUsers = [
    {user: {username: 'test1@test.com'}},
    {user: {username: 'test2@test.com'}}
  ]
  res.json(mockUsers)
})

// 处理提交用户的POST请求
app.post('/submit-user', (req, res) => {
  // 从请求体中获取前端传过来的三个字段
  const { user, allUsers, username } = req.body
  // 此处可以编写你的业务逻辑：比如存到数据库、发送验证邮件等
  console.log('收到的用户对象：', user)
  console.log('收到的所有用户数组：', allUsers)
  console.log('收到的用户名：', username)
  // 返回响应给前端
  res.json({code: 200, msg: '提交成功'})
})

app.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`)
})

第三步：启动服务 #

执行命令启动后端：

node server.js

注意事项 #

• 前端的校验逻辑（密码长度、用户名是否存在）建议在后端再做一遍，前端校验容易被绕过，避免非法数据入库
• 密码不要明文传输和存储，建议前端传输时用加密算法处理，后端存储也用加盐哈希的方式保存
• 如果后端部署到线上，需要将前端请求的接口地址替换为线上服务的实际域名

内容的提问来源于stack exchange，提问作者fafafaafa