页面加载时连接MongoDB及向script.js传递db变量的实现问题

核心误区先澄清 #

首先要纠正一个错误思路：运行在Node.js环境的app.js是服务端代码，不会在用户浏览器中执行；前端的script.js是运行在用户本地浏览器的客户端代码，两者属于完全隔离的运行环境，绝对不能直接把服务端的db变量传给前端使用，直接在前端操作MongoDB会完全泄露数据库权限，引发严重的安全问题，所有数据库操作都必须放在服务端完成。

问题1：页面加载完成的事件监听 #

前端监听页面加载完成可以直接在script.js中使用原生事件实现，有两种常用方案：

• 监听DOMContentLoaded事件：DOM结构加载完成就触发，不需要等待样式、图片等外部资源加载完成，性能更好，适合大多数场景

document.addEventListener('DOMContentLoaded', () => {
  // 此处写页面加载完成后要执行的逻辑
})

• 监听load事件：页面所有资源（样式、图片、字体等）全部加载完成后触发，适合需要依赖资源加载完成的场景

window.addEventListener('load', () => {
  // 此处写执行逻辑
})

问题2：前端表单数据写入MongoDB的实现流程 #

你需要在服务端开发HTTP接口，前端通过请求调用接口，服务端收到请求后复用已建立的数据库连接完成写入操作，完整流程如下：

第一步：服务端（app.js）开发接口&初始化数据库连接 #

不要在每次请求时重新连接数据库，在服务启动时完成一次连接即可，以常用的Express框架为例：

const express = require('express')
const mongoose = require('mongoose') // 也可以使用原生mongodb驱动
const cors = require('cors') // 处理跨域请求，需要先执行npm i cors安装
const app = express()

// 注册中间件
app.use(cors())
app.use(express.json()) // 解析JSON格式的请求体
app.use(express.urlencoded({ extended: true })) // 解析表单格式的请求体

// 服务启动时初始化数据库连接
let db
mongoose.connect('你的MongoDB连接字符串', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(conn => {
    db = conn.db
    console.log('MongoDB连接成功')
  })
  .catch(err => console.error('MongoDB连接失败', err))

// 开发表单数据提交接口
app.post('/api/form/submit', async (req, res) => {
  try {
    // 获取前端传入的表单数据
    const formData = req.body
    // 写入数据库集合
    const insertResult = await db.collection('你要写入的集合名称').insertOne(formData)
    // 返回成功响应
    res.status(200).json({ success: true, id: insertResult.insertedId })
  } catch (err) {
    res.status(500).json({ success: false, msg: '数据写入失败' })
  }
})

// 启动服务，监听3000端口
app.listen(3000, () => console.log('服务已启动，访问地址：http://localhost:3000'))

第二步：前端（script.js）调用接口提交数据 #

页面加载完成后绑定表单提交事件，收集数据后发送请求到服务端接口：

document.addEventListener('DOMContentLoaded', () => {
  const targetForm = document.querySelector('#你的表单DOM的ID')
  // 监听表单提交事件
  targetForm.addEventListener('submit', async (e) => {
    // 阻止表单默认跳转行为
    e.preventDefault()
    // 收集表单数据
    const formData = new FormData(targetForm)
    const submitData = Object.fromEntries(formData.entries())
    // 发送请求到服务端
    try {
      const resp = await fetch('http://localhost:3000/api/form/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(submitData)
      })
      const result = await resp.json()
      if (result.success) {
        alert('提交成功')
        targetForm.reset()
      } else {
        alert('提交失败：' + result.msg)
      }
    } catch (err) {
      alert('请求异常：' + err.message)
    }
  })
})

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