Vue3中JSON数据转换、生成及文件读写技术问题求助

Let's walk through your issues one by one and fix them with practical solutions:

1. Fixing the Loop to Get Post Instance Titles #

Your current loop is targeting the Post class itself instead of the postList array. The Post.name property is just the string "Post", so looping over its length iterates through each character of that string—hence the "P o s t" output.

To correctly access each post's title, loop over the postList array instead:

// Option 1: Traditional for loop
for (let i = 0; i < app.postList.length; i++) {
  console.log(app.postList[i].title); // Logs "Monke", "Queen", etc.
}

// Option 2: Cleaner forEach loop
app.postList.forEach(post => {
  console.log(post.title);
});

2. Converting postList to Your Desired JSON Format #

You need to map each Post instance to a new object where the title key is renamed to name, then convert the array to a JSON string with JSON.stringify:

// Transform the postList array
const formattedPosts = app.postList.map(post => ({
  name: post.title,
  link: post.link,
  img: post.img,
  rank: post.rank
}));

// Convert to pretty-printed JSON
const postsJson = JSON.stringify(formattedPosts, null, 2);
console.log(postsJson);

This will output exactly the JSON structure you requested.

3. JSON File Read/Write Operations #

The implementation depends on whether you're working in a Node.js environment (like an Electron app or backend script) or a browser-side Vue 3 app:

Case 1: Node.js Environment

Use Node's built-in fs module for file operations. Make sure to use valid file paths (add the .json extension and use path to avoid relative path issues):

const fs = require('fs');
const path = require('path');

// Write JSON to a file
const writePostsToFile = () => {
  const formattedPosts = app.postList.map(post => ({
    name: post.title,
    link: post.link,
    img: post.img,
    rank: post.rank
  }));
  const postsJson = JSON.stringify(formattedPosts, null, 2);
  
  // Write to "players.json" in the current directory
  fs.writeFileSync(path.join(__dirname, 'players.json'), postsJson, 'utf8');
  console.log('JSON file saved successfully!');
};

// Read JSON from a file
const readPostsFromFile = () => {
  try {
    const fileContent = fs.readFileSync(path.join(__dirname, 'players.json'), 'utf8');
    const savedPosts = JSON.parse(fileContent);
    
    // Convert saved data back to Post instances (optional)
    app.postList = savedPosts.map(post => new Post(post.name, post.link, post.img, post.rank));
    console.log('JSON file loaded successfully!');
  } catch (err) {
    console.error('Error reading file:', err.message);
  }
};

// Example usage
writePostsToFile();
readPostsFromFile();

Case 2: Browser-Side Vue 3 App

Browsers don't allow direct file system access, so you'll need user interaction to read/write files:

<template>
  <div>
    <!-- Button to select and read a JSON file -->
    <input type="file" accept=".json" @change="handleFileRead">
    
    <!-- Button to download the post list as JSON -->
    <button @click="handleFileDownload" class="mt-2">Download Posts JSON</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Replicate your postList in Vue 3's Composition API
const postList = ref([
  { title: "Monke", link: "test.html", img: "head.png", rank: "Admin" },
  { title: "Queen", link: "test.html", img: "head.png", rank: "Admin" },
  // ... rest of your posts
]);

// Read a local JSON file selected by the user
const handleFileRead = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const savedPosts = JSON.parse(e.target.result);
      // Map saved data back to match your postList structure
      postList.value = savedPosts.map(post => ({
        title: post.name,
        link: post.link,
        img: post.img,
        rank: post.rank
      }));
      alert('Posts loaded successfully!');
    } catch (err) {
      alert('Invalid JSON file!');
    }
  };
  reader.readAsText(file);
};

// Download the post list as a JSON file
const handleFileDownload = () => {
  const formattedPosts = postList.value.map(post => ({
    name: post.title,
    link: post.link,
    img: post.img,
    rank: post.rank
  }));
  const postsJson = JSON.stringify(formattedPosts, null, 2);
  const blob = new Blob([postsJson], { type: 'application/json' });
  const downloadUrl = URL.createObjectURL(blob);
  
  // Create a temporary download link
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'players.json';
  link.click();
  
  // Clean up memory
  URL.revokeObjectURL(downloadUrl);
};
</script>

Quick Note for Vue 3 #

Your original code uses Vue 2's Options API syntax. For Vue 3, it's recommended to use the Composition API (like the example above) for better scalability, but your existing code will still work if you include the Vue 3 UMD build.

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