如何在vue js中编写，更新本地JSON文件

Question

我曾尝试使用文件系统（fs 模块），但不知道如何使用该 FS 模块。谁能用适当的例子解释一下。

我正在用 vue js 做一个例子。

创建组件
已添加 json 文件
将记录作为 props 传递给组件
在另一个组件上听那个道具
并呈现学生列表并执行删除记录

接下来我想使用 emit 传递更新列表 & 更新 JSON 以及

这段代码工作正常只是我想在删除记录后更新本地json文件。

StudentRegistration.vue


<template>
    <div class="container">
        <div class="row"> 
            <template v-if="students.length">
                <!-- {{student.length}} -->
                <studentCard class="student__parent" v-for="student in students" :key="student.id" :student="student" @studentRemoveId="studentRemoveId"/>
            </template>
            <template v-else>
                <div class="not__available">
                    Data not available
                </div>
            </template>
        </div>
    </div>
</template>

<script>

import studentCard from './studentCard.vue'
import studentData from '../data/StudentData.json'


export default {
    name: 'StudentRegi',
    components:{
        studentCard
    },
    data() {
        return {
            students: studentData,
            
        }
    },
    methods: {
        studentRemoveId(studid){
            this.students = this.students.filter( item => {
                console.log('hey there ::=> ', item);
                return item.id !== studid.id
            });            

        }
    },
    
}
</script>

studentCard.vue

<template>
    <div>
        <span class="student__remove" @click="removeStudent(student)">X</span>
        <div class="student__inner">
            <div class="student__image">
                <img :src="student.avatar" alt="">
            </div>
            <div class="student__name student-detail">
                <div>Name</div>
                <div>{{student.fname}} {{student.lname}}</div>
            </div>
            <div class="student__age student-detail">
                <div>Age</div>
                <div>{{student.age}}</div>
            </div>
            <div class="studet_email student-detail">
                <div>Email</div>
                <div>{{student.email}}</div>
            </div>
            <div class="student__phone student-detail">
                <div>Phone</div>
                <div>{{student.phone}}</div>
            </div>
        </div> 
        
    </div>
</template>

<script>

export default {
    name:'StudentCard',
    props:['student'],
    methods: {
        removeStudent(studid){
            this.$emit('studentRemoveId', studid);
        }

    },

}
</script>

data.json

[
    {
        "id": 1,
        "fname": "Atul",
        "lname": "Bhavsar",
        "age": "10 Years",
        "email": "atul@gmail.com",
        "phone": "9685958698",
        "avatar": "https://i.postimg.cc/d3ykpLs8/stud1.jpg"
    },
    {
        "id": 7,
        "fname": "Foram",
        "lname": "Dobariya",
        "age": "20 Years",
        "email": "sanju@gmail.com",
        "phone": "9856985698",
        "avatar": "https://i.postimg.cc/QtWp5XBn/stud7.jpg"
    },
]

Answer 1

嘿，经过一些搜索，我找到了一个解决方案，所以在这里分享它可能会帮助那些卡在这个问题上的人，

正如我在上面的代码中显示的那样，我只是想在可以编写 json 文件的地方添加代码。所以我对代码做了一些修改，如下所示。

在CMD中添加命令： json-server --watch './src/data/studentData.json' --port 3001

然后它将提供本地 link，您可以从那里打开 json 数据资源 http://localhost:3001/studente

见下图：

StudentRegistration.vue

此代码应位于 StudentRegistration.vue 组件的脚本标记中

在此文件中添加了以下代码，在方法中添加了代码并创建了创建方法

export default {
    name: 'StudentRegi',
    components:{
        studentCard
    },
    data() {
        return {
            studentsGetData: []
            // studentsGetData: studentData,
        }
    },
    methods: {
        studentRemoveId(studid){

            fetch(`http://localhost:3001/studente/${studid.id}`, 
            {
                method: 'DELETE', 
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                console.log('res ::=> ', resp.data);
                resp.data;
            }).catch(error => {
                console.log(error);
            });
                
           
            this.studentsGetData = this.studentsGetData.filter( item => {
                return item.id !== studid.id
            });            
            
        }
    },
    async created(){
        await fetch('http://localhost:3001/studente')
        .then(res => res.json())
        .then(data => { 
            console.log('data ::=> ', data);
            this.studentsGetData = data
        } )
        .catch(err => console.log(err.message))
    }
}

现在运行你的项目

如何在vue js中编写，更新本地JSON文件

How to write, update local JSON file in vue js

javascript

json

vue.js

filesystems