JSON文件数据的增删改查

本文将指导你如何进行JSON文件的数据操作,包括创建JSON文件以及执行增、删、改、查等基本操作。步骤清晰,代码已注释,可根据需求选择使用。

第一步:创建json文件

[
    {
        "id": 1,
        "bookname": "西游记",
        "author": "吴承恩",
        "publisher": "北京出版社"
    },
    {
        "id": 3,
        "bookname": "红楼梦",
        "author": "曹雪芹",
        "publisher": "上海出版社"
    },
    {
        "id": 6,
        "bookname": "三国演义",
        "author": "罗贯中",
        "publisher": "清华出版社"
    },
    {
        "id": 8,
        "bookname": "斗破苍穹",
        "author": "土豆",
        "publisher": "仙侠出版社"
    },
    {
        "bookname": "朝花夕拾",
        "author": "鲁迅",
        "publisher": "北京出版社",
        "id": 10
    },
    {
        "bookname": "朝花夕拾",
        "author": "鲁迅",
        "publisher": "北京出版社",
        "id": 11
    }
]

第二步:开始增删改查

// 对JSON文件中的数据,进行增删改查操作。

// 拼接 db.json 文件的路径
let { join } = require('path');
let filename = join(__dirname, 'db.json'); // 得到db.json的绝对路径

let { readFile, writeFile } = requ
### 实现 VueJSON 数据文件增删改查Vue 项目中处理 JSON 数据文件增删改查操作可以通过多种方式来完成。通常情况下,这些操作涉及前端逻辑以及可能存在的后端服务接口调用。 #### 定义数据结构与初始状态 为了便于管理和维护,在应用启动时应当先定义好要使用的数据模型[^1]。对于本地存储的数据而言,可以直接利用 JavaScript 对象表示法(JSON),并将其作为组件的状态保存起来: ```javascript // src/components/ExampleComponent.vue export default { data() { return { items: [ {"id": "0", "name": "Item One"}, {"id": "1", "name": "Item Two"} ] } }, } ``` 上述代码片段展示了如何初始化 `items` 数组,其中包含了两个预设项。这一步骤有助于构建应用程序的基础数据集。 #### 添加新记录 当需要向现有列表添加新的条目时,可以创建相应的方法来进行这项工作。下面是一个简单例子说明怎样通过按钮点击事件触发新增行为: ```html <!-- HTML模板 --> <button @click="addItem">Add Item</button> <input v-model="newItemName"/> ``` ```javascript methods: { addItem(){ let newItem = {'id': this.items.length.toString(), 'name':this.newItemName}; this.items.push(newItem); this.saveData(); // 将更改持久化到外部JSON文件或其他形式的长期储存介质上 }, saveData(){ /* ... */ } }, data(){ return{ newItemName:'' }; } ``` 这里实现了 `addItem()` 方法用来接收输入框内的值,并把它加入到当前显示的集合里去;同时清空输入框以便于下一次录入。值得注意的是,每当做出任何变更之后都应该考虑同步更新远程服务器上的副本或是其他类型的永久性存档位置。 #### 修改已有记录 针对已存在对象的信息编辑同样重要。假设每个 item 都有一个唯一的 ID 属性,则可以根据此键找到目标实例进而实施更正动作: ```html <ul> <li v-for="(item,index) of items" :key="index"> {{item.name}} <input type="text" v-if="editIndex===index" v-model="editedItemName"/> <span v-else>{{item.name}}</span> <button @click="startEdit(index)">Edit</button> <button v-if="editIndex===index"@click="confirmEdit(item.id)">Confirm</button> </li> </ul> ``` ```javascript data(){ return{ editIndex:-1, editedItemName:'', }; }, methods:{ startEdit(idx){ this.editIndex=idx; this.editedItemName=this.items[idx].name; }, confirmEdit(id){ this.items.find(i=>i.id==id).name=this.editedItemName; this.editIndex=-1; this.saveData(); } } ``` 这段脚本允许用户选择特定元素进入可编辑模式,修改名称后再确认提交改动。一旦完成了所有的调整过程,记得再次执行保存函数以确保最新版本被妥善保管下来。 #### 删除指定记录 最后就是移除不再需要的对象了。考虑到用户体验方面的要求,最好能给出提示询问是否真的想要这么做: ```html <li v-for="(item, index) in items" :key="index">{{item.name}}<button @click="deleteItem(item.id)">Delete</button></li> ``` ```javascript methods: { deleteItem(itemId){ if(confirm('Are you sure to delete?')){ this.items.splice(this.items.findIndex(x => x.id === itemId), 1); this.saveData(); } } } ``` 以上便是关于在一个基于 Vue 的 Web 应用程序内对 JSON 格式的文档执行 CRUD(即Create、Read、Update 和 Delete)命令的基本介绍。当然实际开发过程中还可能会涉及到更多细节和技术选型考量因素,比如采用 Vuex 来集中管理全局共享资源或者借助 Axios 发起 HTTP 请求访问 RESTful API 接口等等[^4]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值