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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2023-09-13 站长的取消无效
旧时亭台阁




点击编辑,修改后,再点击取消,发现数据还是被更改了。 修复后的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
        div#app {
            margin: 20px auto;
            width: 400px;
            padding: 20px;
        }
        table {
            border-collapse: collapse;
        }
        td {
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <table v-if="!showUpdate">
            <thead>
                <tr>
                    <th>英雄名称</th>
                    <th>血量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="hero in heroes">
                    <td>{{ hero.name }}</td>
                    <td>{{ hero.hp }}</td>
                    <td>
                        <a href="javascript:void(0);" @click="deleteHero(hero.id);">删除</a>
                        <a href="javascript:void(0);" @click="edit(hero);">编辑</a>
                    </td>
                </tr>

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

        <div v-if="showUpdate">
            <input type="hidden" v-model="hero4Update.id" />

            英雄名称:<input type="text" v-model="hero4Update.name" /><br/>
            血量:<input type="number" v-model="hero4Update.hp" /><br/>

            <button @click="update">更新</button>
            <button @click="cancel">取消</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            heroes: [
                { 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},
            ],
            maxId: 5,
            showUpdate: false,
            hero4Add: {
                id: 0, name: '', hp: '0'
            },
            hero4Update: {
                id: 0, name: '', hp: '0'
            },
            hero4UpdateBak: {}
        },
        methods: {
            add: function (event) {
                this.hero4Add.id = ++this.maxId;
                if (0 === this.hero4Add.name.length) {
                    this.hero4Add.name = 'Hero#' + this.hero4Add.id;
                }
                this.heroes.push(this.hero4Add);
                this.hero4Add = { id: '0', name: '', hp: '0' };
            },
            deleteHero: function (id) {
                this.heroes = this.heroes.filter(o => o.id !== id);
            },
            edit: function (hero) {
                this.hero4Update = Object.assign({}, hero);
                this.showUpdate = true;
            },
            update: function () {
                let hero = this.heroes.filter(o => o.id === this.hero4Update.id)[0];
                Object.assign(hero, this.hero4Update);
                this.showUpdate = false;
            },
            cancel: function () {
                this.showUpdate = false;
            }
        }
    })
</script>
</html>

							





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





2021-12-23 对站长代码做了优化
小原




使用了vue+axios,数据单独分开放 更新跳转也做了优先 对增删改做了优化 运行前请在style中添加样式 .active{ display: none; }
<div id="app">
        <table id="heroListTable">
            <thead>
                <tr>
                    <th>英雄名称</th>
                    <th>血量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody :class="num==0 ? 'active' : '' " >
                <tr v-for="(hero,index) in heros">
                    <td>{{hero.name}}</td>
                    <td>{{hero.hp}}</td>
                    <td>
                        <a href="#nowhere" @click="edit(index)">编辑</a>
                        <a href="#nowhere" @click="deleteHero(index)">删除</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" @click="add">增加</button> 
                     </td>                  
                </tr>         
            </tbody>
            <tbody :class="num==1 ? 'active' : '' " >
                <tr>
                    <td><input type="text" v-model='hero4Update.name'></td>
                    <td><input type="text" v-model='hero4Update.hp'></td>
                    <td>
                        <a href="#nowhere" @click="toEdit">修改</a>
                        <a href="#nowhere" @click="editExit">取消</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                //英雄列表
                heros: [],
                //是否显示列表,0不显示
                num:1,
                //添加英雄
                hero4Add: { id: 0, name: '', hp: 0},
                //更新英雄
                hero4Update: { id: 0, name: '', hp: 0}
            },
            created() { //钩子函数
                this.getData()
            },
            methods: {
                toEdit(){  //修改英雄
                    //获得id
                    let id = this.hero4Update.id;
                    //id-1就是该英雄的位置
                    this.heros[id-1] =  this.hero4Update ;
                    //跳回列表
                    this.editExit();
                },
                editExit(){  
                //切换成列表
                this.num = 1;
                this.hero4Update = {}
                },
                edit(index){  //回显修改
                    //切换成更新
                    this.num = 0;
                    this.hero4Update = this.heros[index];
                },
                deleteHero(index){//删除英雄
                   //根据下标删除
                    if(confirm("是否确认删除?")){
                        this.heros.splice(index,1)
                    }
                },
                add(){  //添加数据
                    //获得当前数组
                   let m = this.heros;
                   //新元素id = 最后一个元素的id+1
                   this.hero4Add.id = (m[m.length-1].id)+1;
                   //添加到数组最后
                    this.heros.push(this.hero4Add)
                    //输入框清空
                    this.hero4Add = {}
                },
                getData() {
                    //获取数据,数据单独分开放
                    axios.get('data.json')
                        .then(response => {
                            //指向本地数据
                            this.heros = response.data.heros
                        })
                        .catch(error => {
                            console.log(error)
                        })
                }
            }
        });
    </script>

							


1 个答案

小原
答案时间:2021-12-23
以下是数据部分 data.json



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





2021-07-05 vue.js 不是可以取代 jQuery吗,这个demo的做法其实没有完全体现vue的强大之处把,还是用到了很多 jQuery 的知识
2020-07-16 我真是笨死了,删除那块整了快三个小时,硬是不知道自己错哪了
2020-04-03 打卡 2020年4月3日22:32:22


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 8 条以前的提问,请 点击查看

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

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

上传截图