正文
用vue.js实现增删改，vue删除或新增更新数据
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vueadmin 增删改查（五）
此篇幅比较长，涉及到的小知识点也比较多，一定要耐心看完，记住学东西没有耐心可不行！！！
一、添加和修改
注：添加和编辑用到了同一个组件，也就是此篇文章你能学会如何封装组件及引用组件；第二能学会async和await；第三父向子传递数据props和子向父传递数据$emit()；
1.添加数据
（1）请求地址：/article/category利用post传递数据
（2）编写api：注意add的url地址用的 反单引号，可以在url后面进行组合数据，这个知识点在编辑和删除你会看到详细的解释。
（3）编写方法
首先新建一个组件，里面的代码同样是从elementUI中复制过来的表单，下面会根据详细步骤解析elementUI标签中属性的意思。
在category/index.vue中进行引用，注意组件要首字母大写，不是必须的，但是最好规范一些。
引用完毕之后进行修改edit.vue组件：解析：:title动态绑定的title名称；:visible.sync布尔类型，控制模态框的显示与否；:before-close是一个方法，关闭模态框；:rules表单验证；ref=相当于id=；:model表单的数据；prop=关闭模态框时清除数据要用到，这个在elementUI中有解释，自己去看文档；v-model绑定的具体数值；:label绑定的数据，要做默认选中效果；@click执行的方法
由于是父组件向子组件传递数据，所以在子组件中要用props进行接收，然后在上面进行动态绑定；注意：所有接受的变量要定义type和default，声明类型和默认值；此处小知识点，子组件向父组件传递值用$emit();
表单验证：在子组件中返回rules，也就是开头:rules="rules"；注意：这里的rules是个object，里面需要验证的字段是个array，数组中每个value都是object，详细的验证方法在elementUI中有体现，自己去看。
此处定义的handleClose、onSubmit、submit方法；注意：在submit中有编辑和添加方法，用的同一个，所以有if判断；this.$refs['form'].resetFields()相当于jquey中$('#form').resetFields()清空数据；async、await和promise区别，自己去百度，这里只说明async和await是es6新语法，相当于api.add(this.formData).then((res) = {//TODO})；这里可能有同学会有疑问，this.closeForm()这个方法在哪？他是父组件传递过来的Funciton，在下文中会解释到。
开始操作父组件index.vue，在data中返回edit对象，然后把里面的值绑定到 组件标签中；解析：title就是title；visible是否显示模态框；formData传递过去的数据，由于是添加功能，所以formData是空的，编辑就需要传递了；closeForm传递一个方法，用来关闭模态框
到这里，添加功能就已经实现了，仔细去看我上面的截图，一定要注意我说的点，如果你比着写发现不对，一定要仔细对比。当对比不出来的时候，留言告诉我。
2.修改数据
（1）请求地址：/article/category/{id} 查询数据用get，这里的请求类型用的是restful请求方式，restful包含：get、post、put、patch、delete；/article/category 修改数据用put
（2）编写api：由于修改需要先查到数据，然后再进行传递和渲染，所以在api中有一个查询数据方法，也就是getById()
（3）编写方法
在index.vue父组件中编辑方法为handleEdit()，同样这里用到了async和await，然后先请求到了当前id返回的值，然后传递到edit.vue子组件中。
这里的if判断，判断传递过来的formData的id值是否为空，有值说明是编辑，无值说明是添加。if判断就在这里进行的体现价值，因为我们添加和编辑用的同一个组件，所以if显得至关重要。
仔细去看代码，去理解我的思路，为什么某些地方是这样写而不是那样写，一定要注意。哪里有看不明白的一定要留言进行讨论，我看到会第一时间回复。最终的效果：
二、删除
（1）请求地址：/article/category/{id} 删除用的是delete请求类型
（2）编写api：再强调一遍，url用的反单引号
（3）编写方法：因为删除用不到子组件了，所以删除都在index.vue中进行的
这里用到了elementUI中的$confirm方法，去文档中复制使用即可，方法的话就不再详细解释了，前面几篇文章已经解释过了。api.delete(id).then((res) = {//TODO})
最终效果：点击删除，显示提示，传递id进行删除。
相关问答
Q1: mockjs的增删改查（vue）
参考文章： vue中使用mockjs实现增删改查
安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。
在src目录中，建立一个mock的文件夹。在mock目录下，建一个index.js和一些其他的js文件（下文是user.js）
)
这是一个带分页的mock数据，可以实现增删改查的功能。
mockjs从数组中随机选择n项组成新数组？
生成随机函数的方法：
Q2: Vue实现数据增删改查
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta http-equiv="X-UA-Compatible" content="IE=edge"
meta name="viewport" content="width=device-width, initial-scale=1.0"
title增删改查/title
script src="./vue2.6.14.js"/script
style
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #eee;
padding: 2px 10px;
}
.box {
position: absolute;
width: 320px;
height: 200px;
border: 1px solid #ccc;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.box .close {
width: 20px;
height: 20px;
background-color: pink;
text-align: center;
line-height: 20px;
border-radius: 50%;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
}
.edit {
margin-top: 30px;
margin-left: 30px;
}
/style
/head
body
div id="app"
button v-on:click="showBox=true"添加/button
table
thead
tr
th编号/th
th姓名/th
th性别/th
th年龄/th
th操作/th
/tr
/thead
tbody
tr v-for="(item,index) in user" :key="index"
td{{item.no}}/td
td{{item.name}}/td
td{{item.sex}}/td
td{{item.age}}/td
td
button v-on:click="getOne(index)"修改/button
button v-on:click="del(index)"删除/button
/td
/tr
/tbody
/table
div v-show="showBox" class="box"
div v-on:click="close" class="close"X/div
table class="edit"
tr
td编号：/td
tdinput type="text" v-model="no"/td
/tr
tr
td姓名：/td
tdinput type="text" v-model="name"/td
/tr
tr
td性别：/td
tdinput type="text" v-model="sex"/td
/tr
tr
td年龄：/td
tdinput type="text" v-model="age"/td
/tr
tr
td/td
td
!-- isAdd返回true，显示添加按钮，否则显示修改按钮 --
button v-if="isAdd" v-on:click="add()"添加/button
button v-else v-on:click="update()"修改/button
button v-on:click="cancel()"取消/button
/td
/tr
/table
/div
/div
script
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {
isAdd: true,
showBox: false,
user: [],
no: '',
name: '',
sex: '',
age: '',
// 用于备份修改时，数组中对应的下标
updateIndex: 0,
},
methods: {
add() {
let stu = {
no: this.no,
name: this.name,
sex: this.sex,
age: this.age,
}
this.user.push(stu)
},
cancel() {
this.no = '',
this.name = '',
this.sex = '',
this.age = '',
this.showBox = false;
},
getOne(index) {
// 备份当前需要修改的学生对象，在数组中的下标
this.updateIndex = index;
// 根据数组下标，获取指定对象，赋值给stu2
let stu2 = this.user[index];
// 将该用户对象身上的四个属性的值传给当前vue实例身上的四个属性
this.no = stu2.no;
this.name = stu2.name;
this.age = stu2.age;
this.sex = stu2.sex;
// 显示编辑框
this.showBox = true;
// 表示此时做的是修改操作
this.isAdd = false;
},
// 修改用户信息
update() {
// 获取数组中对应下标的学生对象
let stu3 = this.user[this.updateIndex];
stu3.no = this.no;
stu3.name = this.name;
stu3.age = this.age;
stu3.sex = this.sex;
},
// 删除学生
del(index) {
if (confirm('确定删除吗？')) {
this.user.splice(index, 1)
}
},
// 关闭编辑窗口的方法
close() {
// 隐藏编辑窗口
this.showBox = false;
// 显示添加按钮，隐藏修改按钮
this.isAdd = true;
// 清空数据
this.clear();
}
}
})
/script
/body
/html
a
Q3: Vue 笔记11.24 使用Vue实现增删改查效果、Vue的生命周期
课堂学习：使用Vue实现增删改查 Vue的生命周期 Vue制作轮播图
不大好说 建议直接去敲 或者 看例子
以下写几个需要注意的地方：
这是一个把student对象添加到students对象数组中的方法（用了两种写法 就是先后展开的顺序不同而已 方法是同一种 一个先展开 一个后展开而已 后一种更好理解）
我们声明了 stu 接收this.student的各项属性和值
然后再把stu添加到students的后面，这里注意要用 “...” 把stu展开
let stu = {...this.student} 展开后的student 就是 { no:''xxx,name:'xxx',age:0,sex:'xxx' }
这样就相当于声明了一个新的对象 let stu = { no:''xxx,name:'xxx',age:0,sex:'xxx' }
如果不展开 就是 stu = student 两个对象相等 对象相等就是储存地址相同 这样如果修改stu的值或者student的值 都会影响到另一方的属性值
删除的方法是根据下标来截取 对象数组 students 把和 删除按钮 同一下标的对象从数组中截取掉
这个方法要传入下标 index 因为之前使用了列表渲染 v-for 所以绑定方法时可以直接传 index进去 即 @click=‘delStudent（index）’
这里的两个方法第一个是在点击 修改按钮 时 把列表里的值 赋值 给弹出的编辑框
因为列表中的数据都是通过列表渲染 v-for 从对象数组 students 中得到的 所以可以通过某一项属性把这一行列表所对应的对象 从 students 中找出来
这里要传入一个属性 我们使用的是 学号 no 属性
声明了 stu 来接收 用数组的高阶函数 find 来把 students 中 no 属性值与列表中 no 属性值相同的对象找出来 赋值给 stu
然后把stu展开 再令 this.student = {...stu} 重新定义了对象 student
又因为 对象 student 的各个属性和编辑框的各个表单双向绑定 所以就完成了把列表里的值 赋值 给弹出的编辑框
第二个方法是在编辑框内点击修改按钮 使列表中的数据变化
同样是通过学号 no 来从students 中找到相对应的 对象
这边不用传入 no 作为参数 是因为 通过 修改按钮 打开编辑框后 student 对象各个属性已经有相应的值 可以直接拿来用
用stu 来接收找到的相同 no 属性值的对象后
用 student 中各个属性的值 重新定义 stu 接收的这个对象的各个属性的值
这样就影响到了 对象数组 students 中某一个相应的对象 也就是我们通过 no 找到的那个对象
（1）.模板
el:'#app',指定挂载的容器
指定模板（如果有模板，vue会渲染整个模板；如果没有模板，vue会将el里面的所有内容当成模板使用）
template 就是模板 有的话Vue就会渲染这个模板 没有就渲染el里面所有内容
template:'divh2{{name}}/h2h2{{age}}/h2/div',
（2）.手动挂载
通过vue实例的$mount方法，手动挂载容器 （这里需要 let vm = new Vue ({})）
公共el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面
$mount方法的好处是，可以自行选择挂载的时机。
vm.$mount('#app')
比如可以把这放到定时器里面
setTimeout(() = {
vm.$mount('#app')
}, 1000);
beforeCreate(){}： 创建之前（数据初始化之前）
Vue实例已经创建完成，但是Vue实例未初始化完成（在这个函数里 打印 this 可以得到Vue 但是如果打印data里的属性就是undefined）
这个生命周期函数，基本上不用，除非要设置Vue实例的内容
created(){}： 创建之后（数据初始化完成）
在beforeCreate的基础上，Vue实例完成初始化（通俗来说就是Vue中data里的属性可以打印出来了）
这个生命周期函数，通常用于初始化Vue管理的数据，比如：发生ajax请求会放在这里。
beforeMount(){}： 挂载之前(模板已经成功渲染，但是还没有将内容挂载到页面中)
差值表达式还无法使用 {{name}} 显示出来还是{{name}}
个生命周期函数，基本上不用
mounted(){}： 挂载完成(模板已经成功渲染，并且已经将模板内容挂载到了页面)
{{name}}会显示在data中的值了
这个生命周期函数，通常用于对DOM的重新改动
beforeUpdata(){}： 修改之前(数据已经改了，只是还没有重新挂载页面)
Vue中的data里的值已经改变了 但是因为没有挂载所以页面中还是原来的数据
updated(){}： 修改完成(数据已经改了，页面也已经重新挂载)
这个就很好理解了 data中的数据和页面中的都改了
beforeDestroy(){}： 销毁之前
beforeDestroy() {
console.log('-----------------beforeDestroy------------------');
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = '王五'
},
destroyed(){}： 销毁完成
这个生命周期函数，几乎不用
// 通过vue实例的$mount方法，手动挂载容器
// 公共el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面
// $mount方法的好处是，可以自行选择挂载的时机。
vm.$mount('#app')
在destroyed和beforeDestroy中 修改数据无效。
Q4: SpringBoot-Vue实现增删改查及分页小DEMO
主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo，实现增删改查、分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程。
PS：假设以上的的工具你都安装好啦，写CRUD小DEMO时进坑了，这篇blog参考一下，仅供参考，仅供参考😤，，如有不足请不吝赐教。
1、File-New-Project...
2、选择 Spring Initializr ，然后选择默认的 url 点击next
1、更新pom.xml如下：
2、新建 demo\src\main\java\com\example\demo\entity\User.java
3、更新demo\src\main\resources\application.properties
4、新建demo\src\main\java\com\example\demo\mapper\UserMapper.java
5、新建demo\src\main\resources\mapper\UserMapper.xml
6、新建demo\src\main\java\com\example\demo\service\UserService.java
7、新建demo\src\main\java\com\example\demo\controller\UserCtrl.java
9、后端就写完了，整体结构如下：
1、win+R-cmd-进入项目目录依次执行命令： vue init webpack projectName 、 cd projectName 、 npm install 、 npm run dev 如图所示：
1、在项目根目录安装axios执行命令 npm install axios ，安装element ui 执行命令 npm i element-ui -S
2、更新vue01\src\App.vue
3、更新vue01\src\main.js
4、更新vue01\src\components\HelloWorld.vue
方式一：
在 vue01\config\index.js 文件中配置 proxyTable{} ，如下：
方式二：
在vue-cli项目根目录执行命令 npm run build ，编译完成后将dist/static文件夹copy至springboot项目的 src/main/resources/static 目录下然后直接启动springboot项目就OK了。
大材小用，✍这篇博客の源码在 我的GitHub 上。
Q5: vue-实现对数组的增删改查
使用vue实现对数组的增删改查
1、css
2、html
3、vue
data的两种形式：
① 对象形式 data：{ } ： 直接在里面写数据
② 方法形式 data(){ }：由方法返回对象
关于用vue.js实现增删改和vue删除或新增更新数据的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
