是否可以PUT/PATCH位于vite+react项目的public文件夹中的json文件？

Question

我尝试使用公共文件夹中的 json 文件作为模拟数据库，我可以使用 get 方法获取 json 文件，但无法更新它。这是有效的获取方法：

axios.get('./userData.json')
     .then((response) => {
          if (response.status !== 200) {
              throw new Error('Network response was not ok');
          }
          return response.data;
          })
      .then((data) => {
          console.log(data);
      })

我尝试使用 put、post 和 patch 但没有成功。我可能不应该使用节点，因为我被要求“将新用户数据保存到资产文件夹中的 JSON 文件中”。

Answer 1

据我所知，仅通过在客户端使用

axios

是不可能的。 Vite 项目中的公共文件夹适用于直接提供服务的

static

资产，无需构建工具进行任何处理。公共文件夹被复制到构建输出目录的根目录，并且不会被 Vite 的构建管道处理。

或者，这可以通过客户端和服务器端组件一起来实现。

参考服务器端代码更新公用文件夹：

    const express = require('express');
    const fs = require('fs').promises;
    const app = express();
    const PORT = 3000;
    
    app.use(express.json());
    
    
    app.put('/updateUserData', async (req, res) => { // Controller Endpoint to handle PUT request to update userData.json
      try {
        
        let userData = await fs.readFile('./public/userData.json', 'utf-8'); // Read existing JSON file
        userData = JSON.parse(userData);        
        
        userData = { ...userData, ...req.body }; // Update data Assuming req.body contains the updated user data
    
        
        await fs.writeFile('./public/userData.json', JSON.stringify(userData, null, 2)); // Write updated data back to JSON file
    
        res.status(200).send('User data updated successfully');
       } catch (error) {
        console.error(error);
        res.status(500).send('Internal server error');
      }
    });
    
    app.listen(PORT, () => {
      console.log(`Server is running on http://localhost:${PORT}`);
    });

其各自的客户端如下：

import axios from 'axios';


const updateUser = async (newUserData) => { // Function to update user data
  try {
    await axios.put('/updateUserData', newUserData);
    console.log('User data updated successfully');
    } catch (error) {
    console.error('Error updating user data:', error);
  }
};