how2j.cn

步骤 1 : CRUD   
步骤 2 : 效果   
步骤 3 : 分解动作   
步骤 4 : 查询   
步骤 5 : 增加   
步骤 6 : 删除   
步骤 7 : 编辑和更新   

步骤 1 :

CRUD

CRUD 这个东西还是绕不过去的,毕竟业务上太常见了。
接下来会用 VUE.js 做一套 CRUD。 不过这个 CRUD,是仅仅前端的,并没有和服务端交互。
需要看 VUE.js 和服务端交互的CRUD教程,请点击: VUE.JS + RESTFUL + PAGEHELPER + THYMELEAF + SPRINGBOOT 前后端分离 CRUD 教程
步骤 2 :

效果

直接操作就可以看到 CRUD 的效果了
<html> <head> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> td{ border:1px solid gray; } table{ border-collapse:collapse; } div#app{ margin:20px auto; width:400px; padding:20px; } </style> </head> <body> <div id="app"> <table id="heroListTable" > <thead> <tr> <th>英雄名称</th> <th>血量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="hero in heros "> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> <td> <a href="#nowhere" @click="edit(hero)">编辑</a> <a href="#nowhere" @click="deleteHero(hero.id)">删除</a> </td> </tr> <tr> <td colspan="3"> 英雄名称: <input type="text" v-model="hero4Add.name" /> <br> 血量: <input type="number" v-model="hero4Add.hp" /> <br> <button type="button" v-on:click="add">增加</button> </td> </tr> </tbody> </table> <div id="div4Update"> 英雄名称: <input type="text" v-model="hero4Update.name" /> <br> 血量: <input type="number" v-model="hero4Update.hp" /> <input type="hidden" v-model="hero4Update.id" /> <br> <button type="button" v-on:click="update">修改</button> <button type="button" v-on:click="cancel">取消</button> </div> </div> <script type="text/javascript"> //修改区域隐藏起来先 $("#div4Update").hide(); //Model var data = { heros: [ { id: 1, name: '盖伦', hp: 318}, { id: 2, name: '提莫', hp: 320}, { id: 3, name: '安妮', hp: 419}, { id: 4, name: '死歌', hp: 325}, { id: 5, name: '米波', hp: 422}, ], hero4Add: { id: 0, name: '', hp: '0'}, hero4Update: { id: 0, name: '', hp: '0'} }; //用于记录最大id值 var maxId = 5; //计算最大值 for (var i=0;i<data.heros.length;i++){ if (data.heros[i].id > maxId) maxId= this.heros[i].id; } //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { add: function (event) { //获取最大id maxId++; //赋予新id this.hero4Add.id = maxId; if(this.hero4Add.name.length==0) this.hero4Add.name = "Hero#"+this.hero4Add.id; //把对象加入到数组 this.heros.push(this.hero4Add); //让 hero4Add 指向新的对象 this.hero4Add = { id: 0, name: '', hp: '0'} }, deleteHero: function (id) { console.log("id"+id); for (var i=0;i<this.heros.length;i++){ if (this.heros[i].id == id) { this.heros.splice(i, 1); break; } } }, edit: function (hero) { $("#heroListTable").hide(); $("#div4Update").show(); this.hero4Update = hero; }, update:function(){ //因为v-model,已经同步修改了,所以只需要进行恢复显示就行了 $("#heroListTable").show(); $("#div4Update").hide(); }, cancel:function(){ //其实就是恢复显示 $("#heroListTable").show(); $("#div4Update").hide(); } } }); </script> <div style="height:300px"></div> </body> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

分解动作

接下来,就按照查询,增加,删除,编辑和更新,由浅入深地把这个 CRUD 一点点做出来。
步骤 4 :

查询

查询很简单,和前面的 循环语句 教程内容一样,没什么区别
运行效果
<html> <head> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> td{ border:1px solid gray; } table{ border-collapse:collapse; } div#app{ margin:20px auto; width:400px; padding:20px; } </style> </head> <body> <div id="app"> <table id="heroListTable" > <thead> <tr> <th>英雄名称</th> <th>血量</th> </tr> </thead> <tbody> <tr v-for="hero in heros "> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr> </tbody> </table> </div> <script type="text/javascript"> //Model var data = { heros: [ { id: 1, name: '盖伦', hp: 318}, { id: 2, name: '提莫', hp: 320}, { id: 3, name: '安妮', hp: 419}, { id: 4, name: '死歌', hp: 325}, { id: 5, name: '米波', hp: 422}, ], hero4Add: { id: 0, name: '', hp: '0'}, hero4Update: { id: 0, name: '', hp: '0'} }; //ViewModel var vue = new Vue({ el: '#app', data: data }); </script> </body> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 5 :

增加

接着就是增加功能
1. 准备输入框

<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量:
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>

输入组件都和 hero4Add 对象通过 v-model 进行了双向绑定。
增加按钮也监听了 add 函数

2. maxId

//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}

准备了 maxId,作为自增长键,初始值取当前数据的最大id.

3. add函数

methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
}
}
运行效果
<html> <head> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> td{ border:1px solid gray; } table{ border-collapse:collapse; } div#app{ margin:20px auto; width:400px; padding:20px; } </style> </head> <body> <div id="app"> <table id="heroListTable" > <thead> <tr> <th>英雄名称</th> <th>血量</th> </tr> </thead> <tbody> <tr v-for="hero in heros "> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr> <tr> <td colspan="3"> 英雄名称: <input type="text" v-model="hero4Add.name" /> <br> 血量: <input type="number" v-model="hero4Add.hp" /> <br> <button type="button" v-on:click="add">增加</button> </td> </tr> </tbody> </table> </div> <script type="text/javascript"> //Model var data = { heros: [ { id: 1, name: '盖伦', hp: 318}, { id: 2, name: '提莫', hp: 320}, { id: 3, name: '安妮', hp: 419}, { id: 4, name: '死歌', hp: 325}, { id: 5, name: '米波', hp: 422}, ], hero4Add: { id: 0, name: '', hp: '0'}, hero4Update: { id: 0, name: '', hp: '0'} }; //用于记录最大id值 var maxId = 5; //计算最大值 for (var i=0;i<data.heros.length;i++){ if (data.heros[i].id > maxId) maxId= this.heros[i].id; } //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { add: function (event) { //获取最大id maxId++; //赋予新id this.hero4Add.id = maxId; if(this.hero4Add.name.length==0) this.hero4Add.name = "Hero#"+this.hero4Add.id; //把对象加入到数组 this.heros.push(this.hero4Add); //让 hero4Add 指向新的对象 this.hero4Add = { id: 0, name: '', hp: '0'} } } }); </script> </body> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 6 :

删除

1. 增加删除的链接

<td>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>

2. 增加 deleteHero 函数,逻辑很简单,就是遍历所有的hero对象,如果id相同,就删掉。

deleteHero: function (id) {
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}

注: 方法名是 deleteHero 而不是 delete, 因为 delete 是关键字。。。 这个坑
运行效果
<html> <head> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> td{ border:1px solid gray; } table{ border-collapse:collapse; } div#app{ margin:20px auto; width:400px; padding:20px; } </style> </head> <body> <div id="app"> <table id="heroListTable" > <thead> <tr> <th>英雄名称</th> <th>血量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="hero in heros "> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> <td> <a href="#nowhere" @click="deleteHero(hero.id)">删除</a> </td> </tr> <tr> <td colspan="3"> 英雄名称: <input type="text" v-model="hero4Add.name" /> <br> 血量: <input type="number" v-model="hero4Add.hp" /> <br> <button type="button" v-on:click="add">增加</button> </td> </tr> </tbody> </table> </div> <script type="text/javascript"> //Model var data = { heros: [ { id: 1, name: '盖伦', hp: 318}, { id: 2, name: '提莫', hp: 320}, { id: 3, name: '安妮', hp: 419}, { id: 4, name: '死歌', hp: 325}, { id: 5, name: '米波', hp: 422}, ], hero4Add: { id: 0, name: '', hp: '0'}, hero4Update: { id: 0, name: '', hp: '0'} }; //用于记录最大id值 var maxId = 5; //计算最大值 for (var i=0;i<data.heros.length;i++){ if (data.heros[i].id > maxId) maxId= this.heros[i].id; } //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { add: function (event) { //获取最大id maxId++; //赋予新id this.hero4Add.id = maxId; if(this.hero4Add.name.length==0) this.hero4Add.name = "Hero#"+this.hero4Add.id; //把对象加入到数组 this.heros.push(this.hero4Add); //让 hero4Add 指向新的对象 this.hero4Add = { id: 0, name: '', hp: '0'} }, deleteHero: function (id) { console.log("id"+id); for (var i=0;i<this.heros.length;i++){ if (this.heros[i].id == id) { this.heros.splice(i, 1); break; } } } } }); </script> </body> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 7 :

编辑和更新

1. 增加链接

<a href="#nowhere" @click="edit(hero)">编辑</a>

2. 增加用于编辑的 div

<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量:
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>

</div>

3. 增加相关函数

edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model,已经同步修改了,所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
运行效果
<html> <head> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> td{ border:1px solid gray; } table{ border-collapse:collapse; } div#app{ margin:20px auto; width:400px; padding:20px; } </style> </head> <body> <div id="app"> <table id="heroListTable" > <thead> <tr> <th>英雄名称</th> <th>血量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="hero in heros "> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> <td> <a href="#nowhere" @click="edit(hero)">编辑</a> <a href="#nowhere" @click="deleteHero(hero.id)">删除</a> </td> </tr> <tr> <td colspan="3"> 英雄名称: <input type="text" v-model="hero4Add.name" /> <br> 血量: <input type="number" v-model="hero4Add.hp" /> <br> <button type="button" v-on:click="add">增加</button> </td> </tr> </tbody> </table> <div id="div4Update"> 英雄名称: <input type="text" v-model="hero4Update.name" /> <br> 血量: <input type="number" v-model="hero4Update.hp" /> <input type="hidden" v-model="hero4Update.id" /> <br> <button type="button" v-on:click="update">修改</button> <button type="button" v-on:click="cancel">取消</button> </div> </div> <script type="text/javascript"> //修改区域隐藏起来先 $("#div4Update").hide(); //Model var data = { heros: [ { id: 1, name: '盖伦', hp: 318}, { id: 2, name: '提莫', hp: 320}, { id: 3, name: '安妮', hp: 419}, { id: 4, name: '死歌', hp: 325}, { id: 5, name: '米波', hp: 422}, ], hero4Add: { id: 0, name: '', hp: '0'}, hero4Update: { id: 0, name: '', hp: '0'} }; //用于记录最大id值 var maxId = 5; //计算最大值 for (var i=0;i<data.heros.length;i++){ if (data.heros[i].id > maxId) maxId= this.heros[i].id; } //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { add: function (event) { //获取最大id maxId++; //赋予新id this.hero4Add.id = maxId; if(this.hero4Add.name.length==0) this.hero4Add.name = "Hero#"+this.hero4Add.id; //把对象加入到数组 this.heros.push(this.hero4Add); //让 hero4Add 指向新的对象 this.hero4Add = { id: 0, name: '', hp: '0'} }, deleteHero: function (id) { console.log("id"+id); for (var i=0;i<this.heros.length;i++){ if (this.heros[i].id == id) { this.heros.splice(i, 1); break; } } }, edit: function (hero) { $("#heroListTable").hide(); $("#div4Update").show(); this.hero4Update = hero; }, update:function(){ //因为v-model,已经同步修改了,所以只需要进行恢复显示就行了 $("#heroListTable").show(); $("#div4Update").hide(); }, cancel:function(){ //其实就是恢复显示 $("#heroListTable").show(); $("#div4Update").hide(); } } }); </script> <div style="height:300px"></div> </body> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-08-24 编辑时双向数据绑定
OffTheWall
在编辑的div,也就是div4Update中,输入框input使用v-model双向数据绑定的是hero4Update对象,这里为什么会使原本的数据改变?渲染时用的不是heros里面的数据吗?也没用hero4Update对象渲染呀。站长这里不太理解




3 个答案

大嘴猴 答案时间:2018-08-30
这个修改和取消是假的,把我给整惨了。 还有附件的代码没啥用啊
for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId)
                maxId=  this.heros[i].id;
        }

OffTheWall 答案时间:2018-08-26
我理解的是页面渲染用v-for循环的heros里面的数据,不知道为啥会用hero4Update对象来渲染,这里不太懂

jingzhe 答案时间:2018-08-26
这里用了数据的双向绑定,你改变了hero4Update的数据,自然页面上就会渲染出你改变好的数据了,这是vue一大特性,说的不知道对不对,但是大概就是这么个意思




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到








提问之前请登陆
关于 前端部分-Vue.js-crud 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图