开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
上一篇文章介绍了json-server的排序查询，分页查询以及筛选查询这三个功能，接下来将介绍json-server在实战中的应用
json-server在实战中的应用
- 使用json-server创建好了数据之后我们需要使用axios发送请求获取数据将数据渲染到页面上并且实现增删改查等功能
- 创建好vue项目后引入element-plus，饿了么组件库官网：element-plus.gitee.io/zh-CN/guide… ， 我们需要使用到el-button,el-input,el-table等组件来实现功能。
- 首先页面的样式如下所示：
有基本的增删改查等功能，全部都是使用json-server实现的
- 我们需要有四个按钮，分别是新增，更新，搜索，清空搜索，这个按钮的代码如下图所示：
每一个按钮都有各自的功能，分别发送get,post,patch,delete等请求来修改json-server中的数据
- 然后是四个input框，来获取用户输入的数据并且反馈给后台进行功能的执行操作，使用v-model来实现双向绑定，获取用户的输入数据
<el-input v-model="id" placeholder="请输入id" />
<el-input v-model="name" placeholder="请输入姓名" />
<el-input v-model="address" placeholder="请输入地址" />
<el-input v-model="phone" placeholder="请输入手机号" />
- 最后是el-table组件，用来获取json数据并且展示到页面上去，然后每一行都有一个删除按钮，table表格组件链接：element-plus.gitee.io/zh-CN/compo… ，
- 具体的表格代码如下所示：
