how2j.cn

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

CRUD 这个东西还是绕不过去的,毕竟业务上太常见了。
接下来会用 VUE.js 做一套 CRUD。 不过这个 CRUD,是仅仅前端的,并没有和服务端交互。
需要看 VUE.js 和服务端交互的CRUD教程,请点击: VUE.JS + RESTFUL + PAGEHELPER + THYMELEAF + SPRINGBOOT 前后端分离 CRUD 教程
直接操作就可以看到 CRUD 的效果了
<html> <head> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
接下来,就按照查询,增加,删除,编辑和更新,由浅入深地把这个 CRUD 一点点做出来。
查询很简单,和前面的 循环语句 教程内容一样,没什么区别
运行效果
<html> <head> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
接着就是增加功能
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="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
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="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
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="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <script src="https://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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2019-12-17 关于取消按钮无效
hx1176406648




因为输入框元素与data数据域中hero4Update绑定,而编辑点击事件中又将hero4Update指向当前修改对象hero,所以一旦修改输入框中数据原数据hero就改了。因此我在取消函数中将值恢复成编辑前的数据。
<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="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(hero4UpdateOldValue)">取消</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},
            hero4UpdateOldValue: {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;
                this.hero4UpdateOldValue.name = hero.name;
                this.hero4UpdateOldValue.hp = hero.hp;
            },
            update:function(){
                //因为v-model,已经同步修改了,所以只需要进行恢复显示就行了
                $("#heroListTable").show();
                $("#div4Update").hide();          
            },
            cancel:function(hero4UpdateOldValue){
				this.hero4Update.name = hero4UpdateOldValue.name;
				this.hero4Update.hp = hero4UpdateOldValue.hp;
                $("#heroListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-12-09 让 hero4Add 指向新的对象,这句话有什么作用呢
绝世好剑

//让 hero4Add 指向新的对象 this.hero4Add = { id: 0, name: '', hp: '0'}







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-11-30 为什么一直都是默认界面的,怎么运行自己的界面
2019-11-17 js中this指针的疑惑
2019-08-28 编辑时双向数据绑定问题
2019-06-10 站长,为什么不用组件开发呢?
2019-05-08 关于input里的type=“hidden”
2018-12-11 因为数据被双向绑定了,点击取消依旧被编辑
2018-08-24 编辑时双向数据绑定




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-Vue.js-crud 的提问

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

上传截图