如何在React中通过页面组件将用户记录写入XML文件？

我正尝试从React页面将用户记录写入XML文件。目前有Register和UserStorage两个JS组件文件，在Register中调用onSubmit()方法时，会将表单值作为参数传入UserStorage的registerUser方法，需要编写代码在该方法中实现记录写入XML的功能。

现有文件代码 #

Src\Data\User.xml（XML Schema） #

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="users">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="user" maxOccurs="unbounded">
          <xs:complexType> 
        <xs:attribute name="Email" type="xs:string"/>           
            <xs:attribute name="Password" type="xs:string"/>
            <xs:attribute name="FirstName" type="xs:string"/>
            <xs:attribute name="LastName" type="xs:string"/>              
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

Register页面组件代码 #

import React, { useState } from "react";
import Userstorage from "../Storage/Userstorage";

const initialState = {
  firstName: "",
  lastName: "",
  mobile: "",
  email: "",
  password: "",
  role: "",
  isMember: true,
};

const Register = () => {
  const [values, setValues] = useState(initialState);

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;    
    setValues({ ...values, [name]: value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const { firstName, lastName, email, password, isMember } = values;         
    Userstorage.registerUser(values); // 将值传入Userstorage的registerUser方法
  };

UserStorage组件代码 #

const registerUser = (values) => {
  console.log(values);
  // 在此处实现将记录写入XML文件的逻辑，值从Register页面传入
};

const loginuser = () => {
  console.log("users");
};

const Userstorage = {
  registerUser,
  loginuser,
};

export default Userstorage;

注意：前端浏览器受安全限制，无法直接写入本地文件系统，以下提供两种可行实现方式：

方式一：通过后端接口写入服务器XML文件 #

如果需要将用户数据持久化到服务器的XML文件中，需搭建后端接口，前端发送请求传递数据，由后端完成文件读写操作。

示例：Node.js后端接口（Express框架） #

1. 安装依赖：

npm install express xml-js cors

2. 后端代码（server.js）：

const express = require('express');
const fs = require('fs');
const convert = require('xml-js');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

// 注意：建议单独用一个users.xml存储用户数据，而非直接操作Schema文件
const dataXmlPath = './Src/Data/users.xml';

// 初始化用户数据文件（如果不存在）
if (!fs.existsSync(dataXmlPath)) {
  const initXml = `<?xml version="1.0" encoding="UTF-8"?>
<users>
</users>`;
  fs.writeFileSync(dataXmlPath, initXml);
}

// 处理注册请求
app.post('/api/register', (req, res) => {
  const { email, password, firstName, lastName } = req.body;

  // 读取现有XML数据
  fs.readFile(dataXmlPath, 'utf8', (err, xmlData) => {
    if (err) return res.status(500).json({ error: '读取数据文件失败' });

    // XML转JSON
    const jsonData = convert.xml2json(xmlData, { compact: true, spaces: 2 });
    const usersObj = JSON.parse(jsonData);

    // 创建新用户节点
    const newUser = {
      _attributes: {
        Email: email,
        Password: password,
        FirstName: firstName,
        LastName: lastName
      }
    };

    // 添加到用户列表
    if (!usersObj.users.user) {
      usersObj.users.user = [];
    }
    usersObj.users.user.push(newUser);

    // JSON转回XML并写入文件
    const updatedXml = convert.json2xml(JSON.stringify(usersObj), { compact: true, spaces: 2 });
    fs.writeFile(dataXmlPath, updatedXml, 'utf8', (err) => {
      if (err) return res.status(500).json({ error: '写入数据文件失败' });
      res.status(200).json({ message: '注册成功' });
    });
  });
});

app.listen(3001, () => {
  console.log('服务器运行在 http://localhost:3001');
});

3. 修改UserStorage的registerUser方法：

const registerUser = async (values) => {
  try {
    const response = await fetch('http://localhost:3001/api/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    });
    const result = await response.json();
    console.log(result.message);
  } catch (err) {
    console.error('注册失败:', err);
  }
};

方式二：前端生成XML文件供用户下载 #

如果不需要持久化到服务器，仅需让用户下载包含自身信息的XML文件，可直接在前端生成并触发下载：

修改UserStorage的registerUser方法：

const registerUser = (values) => {
  // 构建XML内容
  const xmlContent = `<?xml version="1.0" encoding="UTF-8"?>
<users>
  <user 
    Email="${values.email}" 
    Password="${values.password}" 
    FirstName="${values.firstName}" 
    LastName="${values.lastName}"
  />
</users>`;

  // 创建Blob并触发下载
  const blob = new Blob([xmlContent], { type: 'application/xml' });
  const downloadUrl = URL.createObjectURL(blob);
  
  const aTag = document.createElement('a');
  aTag.href = downloadUrl;
  aTag.download = `user_${values.email}.xml`;
  document.body.appendChild(aTag);
  aTag.click();
  
  // 清理资源
  document.body.removeChild(aTag);
  URL.revokeObjectURL(downloadUrl);

  console.log('XML文件已生成并开始下载');
};

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