Vue学习（二十六）——综合案例：图书管理（一）

科技2022-08-20 136

一、图书列表的展示功能1、实现静态列表效果2、基于数据实现模板效果3、处理每行的操作按钮二。添加图书1、实现表单的静态效果2、添加图书表单域数据绑定3、添加按钮事件绑定4、实现添加业务逻辑三、修改图书1、修改信息填充到表单① 、JS中的Array.filter()方法 2、修改后重新提交表单3、重用添加和修改的方法②、JS中的Array.some()方法③、Js中的箭头函数

接下来我们结合之前我们所学到的知识，完成一个图书管理的案例，大致如下，完成对图书的増、删、改操作：

一、图书列表的展示功能

1、实现静态列表效果

静态列表效果不过多赘述，使用提供的一个模板

2、基于数据实现模板效果

这里我们用v-for、差值表达式等基于数据实现模板效果

3、处理每行的操作按钮

行里面的操作按钮我们使用a标签来完成，不过，这里的a标签不进行跳转，所以我们使用事件修饰符.prevent 取消默认事件。

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: orange; } </style> </head> <body> <div id="app"> <div class="grid"> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <a href="" @click.prevent>修改</a> <span>|</span> <a href="" @click.prevent>删除</a> </td> </tr> </tbody> </table> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 图书管理-图书列表展示功能注意事项：<a href="" @click.prevent>修改</a> 事件绑定时，可以只添加修饰符，而不绑定事件函数 */ var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: '' },{ id: 2, name: '水浒传', date: '' },{ id: 3, name: '红楼梦', date: '' },{ id: 4, name: '西游记', date: '' }] } }); </script> </body> </html>

效果如下：

二。添加图书

这里实现的效果如下：添加一个表单，点击提交的时候新增图书。

1、实现表单的静态效果

效果如下：

2、添加图书表单域数据绑定

不再赘述

3、添加按钮事件绑定

4、实现添加业务逻辑

此步骤完成后具体代码如下：

效果如下：

三、修改图书

修改图书的业务是，当我们点击修改按钮后，会把当前图书的信息填充到上面的两个输入框中，然后我们修改内容，流程如下：

1、修改信息填充到表单

这里需要使用到js中数组的一些方法，记录如下：

① 、JS中的Array.filter()方法

如果在JS中我们想要对一个数组进行筛选，筛选出符合规则的元素应该怎么做？挨个循环数组，用if语句判断，符合规则的push到一个新数组？不用这么麻烦，这一切可以用Array.filter()函数。

var book =this.books.filter(function (item) { return this.item = id; } filter方法可以遍历数组；Array.filter() 函数接受一个函数为参数，方法函数有形参，形参指的是数组中每个元素；filter方法中函数有返回值，return后面是过滤的条件，最终元素将放在一个新数组中返回。

这一步完成后代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th, td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: #F3DCAB; } .grid .book { padding-bottom: 10px; padding-top: 5px; background-color: #F3DCAB; } </style> </head> <body> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号： </label> <input type="text" id="id" v-model='id'> <label for="name"> 名称： </label> <input type="text" id="name" v-model='name'> <button @click='handle'>提交</button> </div> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <a href="" @click.prevent="edit(item.id)">修改</a> <span>|</span> <a href="" @click.prevent>删除</a> </td> </tr> </tbody> </table> </div> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 图书管理-图书列表展示功能注意事项：<a href="" @click.prevent>修改</a> 事件绑定时，可以只添加修饰符，而不绑定事件函数 */ var vm = new Vue({ el: '#app', data: { id: "", name: "", books: [{ id: 1, name: '三国演义', date: '' }, { id: 2, name: '水浒传', date: '' }, { id: 3, name: '红楼梦', date: '' }, { id: 4, name: '西游记', date: '' }] }, methods: { handle: function () { // 添加图书 // 业务逻辑：获取表单中的id和name，封装成一个对象，将对象添加到数组中。 var book = {}; book.id = this.id; book.name = this.name; book.date = ""; // 表单内容为空时不允许添加 if (book.id != "" && book.name != "") { this.books.push(book); } // 添加完成后清空表单 this.id = ""; this.name = ""; }, edit:function (id) { // 需要修改的数据的id可以传过来，下面要做的就是根据id查询出其他要编辑的数据 var book =this.books.filter(function (item) { return item.id == id; }); // 将获取到的元素填充到表单 this.id =id; this.name = book[0].name; } } }); </script> </body> </html>

效果如下：

2、修改后重新提交表单

我们修改完成之后可以再次提交，但是这个编号是不允许修改的，因为修改后在提交id发生变化，通过id获取不到对应的内容了。编号作为我们的唯一标识，在修改时我们要将编号禁用掉。通过disabled这个属性可以实现。

3、重用添加和修改的方法

这里注意到，我们修改后点击提交和直接添加其实共用了一个事件函数，这里我们可以做一个分支来判断，刚好之前的标志flag起到了作用，当flag=false时就是添加，当flag=true时就是修改操作。

这里需要使用到js中数组的一些方法，记录如下：

②、JS中的Array.some()方法

this.books.some(function (item) { if (item.id == this.id) { item.name = this.name; return true; } }) some方法可以遍历数组，在数组中找是否有符合条件的元素；’Array.some() 函数接受一个函数为参数，方法函数有形参，形参指的是数组中每个元素；如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；若查找出符合条件的元素，一般都要终止查找，节省性能。

③、Js中的箭头函数

参考下面的文章：浅析 Javascript 中 this 的指向 ( 箭头函数 )

至此，编辑功能完成，代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th, td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: #F3DCAB; } .grid .book { padding-bottom: 10px; padding-top: 5px; background-color: #F3DCAB; } </style> </head> <body> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号： </label> <input type="text" id="id" v-model='id' :disabled="flag"> <label for="name"> 名称： </label> <input type="text" id="name" v-model='name'> <button @click='handle'>提交</button> </div> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <a href="" @click.prevent="edit(item.id)">修改</a> <span>|</span> <a href="" @click.prevent>删除</a> </td> </tr> </tbody> </table> </div> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 图书管理-图书列表展示功能注意事项：<a href="" @click.prevent>修改</a> 事件绑定时，可以只添加修饰符，而不绑定事件函数 */ var vm = new Vue({ el: '#app', data: { flag:false, id: "", name: "", books: [{ id: 1, name: '三国演义', date: '' }, { id: 2, name: '水浒传', date: '' }, { id: 3, name: '红楼梦', date: '' }, { id: 4, name: '西游记', date: '' }] }, methods: { handle: function () { // 分支，这里是修改操作 // 业务逻辑：根据当前的id去更新对应的数据 if(this.flag) { // 这里需要注意，如果我们想要使用这个this的话，因为我们使用的是普通的js方法，所以这里的this实际指的是window， // 我们需要把这个方法修改为箭头函数，因为箭头函数中的this值的是定义这个函数的父级作用域的this，这里的父级作用域 // 就是handle函数的作用域，也会是vue实例本身，这样我们就可以获得想要的参数了。 this.books.some((item) =>{ if (item.id == this.id) { item.name = this.name; // 完成更新操作之后，需要终止循环 return true; } }); // 修改成功后，disabled放开 this.flag = false; } else { // 添加图书 // 业务逻辑：获取表单中的id和name，封装成一个对象，将对象添加到数组中。 var book = {}; book.id = this.id; book.name = this.name; book.date = ""; // 表单内容为空时不允许添加 if (book.id != "" && book.name != "") { this.books.push(book); } // 添加完成后清空表单 this.id = ""; this.name = ""; } // 不管是添加还是修改，最终我们都将表单置空 this.id =""; this.name=""; }, edit:function (id) { // 禁止修改id,此处注意使用v-bind动态绑定数据 this.flag = true; // 需要修改的数据的id可以传过来，下面要做的就是根据id查询出其他要编辑的数据 var book =this.books.filter(function (item) { return item.id == id; }); // 将获取到的元素填充到表单 this.id =id; this.name = book[0].name; } } }); </script> </body> </html>

Processed: 0.009, SQL: 9

Vue学习（二十六）——综合案例：图书管理（一）

目录

一、图书列表的展示功能

1、实现静态列表效果

2、基于数据实现模板效果

3、处理每行的操作按钮

二。添加图书

1、实现表单的静态效果

2、添加图书表单域数据绑定

3、添加按钮事件绑定

4、实现添加业务逻辑

三、修改图书

1、修改信息填充到表单

① 、JS中的Array.filter()方法

2、修改后重新提交表单

3、重用添加和修改的方法

②、JS中的Array.some()方法

③、Js中的箭头函数