[Vue.js] 基础 -- 综合案例 -- 图书管理
2024-05-31 19:28:38
综合案例 – 图书管理
补充知识(数组相关API)
变异方法(修改原有数据)
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
替换数组(生成新的数组)
- filter()
- concat()
- slice()
修改响应式数据
Vue.set(vm.items, indexOfltem, newValue)
vm.$set(vm.items, indexOfltem, newValue)
- 参数一表示要处理的数组名称
- 参数二表示要处理的数组的索引
- 参数三表示要处理的数组的值
实现效果
实现步骤
图示列表
- 实现静态列表效果
- 基于数据实现模板效果
- 处理每行的操作按钮
html
<!--利用数组的特性,把数组的内容显示到页面中去-->
<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>
js
<script type="text/javascript">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>
添加图书
- 实现表单的静态效果
- 添加图书表单域数据绑定
- 添加按钮事件绑定
- 实现添加业务逻辑
html
<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>
</div>
js
methods: {handle: function(){// 添加图书var book = {};book.id = this.id;book.name = this.name;book.date = '';this.books.push(book);// 清空表单this.id = '';this.name = '';}
}
修改图书
- 修改信息填充到表单
- 修改后重新提交表单
- 重用添加和修改的方法
html
<!--保证在修改数据时编号不能被改变-->
<input type="text" id="id" v-model='id' :disabled="flag">
<!--利用每一个唯一编号id,寻找到要修改的那一栏,把参数带过去-->
<td><a href="" @click.prevent='toEdit(item.id)'>修改</a>
</td>
<!--提交按钮要绑定事件-->
<button @click='handle'>提交</button>
js
<script type="text/javascript">var vm = new Vue({el: '#app',data: {//保障在不修改时能够添加编号idflag: false,},methods: {handle: function(){if(this.flag) {// 编辑图书// 就是根据当前的ID去更新数组中对应的数据this.books.some((item) => {if(item.id == this.id) {item.name = this.name;// 完成更新操作之后，需要终止循环return true;}});this.flag = false;}else{// 添加图书var book = {};book.id = this.id;book.name = this.name;book.date = '';this.books.push(book);// 清空表单this.id = '';this.name = '';}// 清空表单this.id = '';this.name = '';},toEdit: function(id){// 禁止修改IDthis.flag = true;console.log(id)// 根据ID查询出要编辑的数据var book = this.books.filter(function(item){return item.id == id;});console.log(book)// 把获取到的信息填充到表单this.id = book[0].id;this.name = book[0].name;}}});
</script>删除图书
- 删除按钮绑定事件处理方法
- 实现删除业务逻辑
html
<!--利用每一个唯一编号id,寻找到要删除的那一栏,把参数带过去-->
<td><a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
js
- 方法一
- 利用id从数组中查找到元素的索引,然后通过索引来删除数组的元素
<script type="text/javascript">methods:{//根据id从数组中查找元素的索引var index = this.books.findIndex(function(item){return item.id == id;});// 根据索引删除数组元素this.books.splice(index, 1);}
</script>
- 方法二
- 通过filter方法进行删除
<script type="text/javascript">methods:{this.books = this.books.filter(function(item){return item.id != id;});}
</script>
常用特性应用场景
- 过滤器（格式化日期)
html
<!--在date的后面调用过滤器-->
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
js
Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份"d": date.getDate(), //日"h": date.getHours(), //小时"m": date.getMinutes(), //分"s": date.getSeconds(), //秒"q": Math.floor((date.getMonth() + 3) / 3), //季度"S": date.getMilliseconds() //毫秒};format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);
})
- 自定义指令(获取表单焦点)
html
<!--表单获取焦点-->
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
js
Vue.directive('focus', {inserted: function (el) {el.focus();}
});
- 计算属性（(统计图书数量)
html
<div class="total"><span>图书总数：</span><!--通过计算属性获取到的--><span>{{total}}</span>
</div>
css
.grid .total {height: 30px;line-height: 30px;background-color: #F3DCAB;border-top: 1px solid #C2D89A;
}
js
computed: {total: function(){// 计算图书的总数return this.books.length;}
},
- 侦听器(验证图书存在性)
html
<button @click='handle' :disabled="submitFlag">提交</button>
js
watch: {name: function(val) {// 验证图书名称是否已经存在var flag = this.books.some(function(item){return item.name == val;});if(flag) {// 图书名称存在this.submitFlag = true;}else{// 图书名称不存在this.submitFlag = false;}}
},
- 生命周期(图书数据处理)
js
mounted: function(){// 该生命周期钩子函数被触发的时候，模板已经可以使用// 一般此时用于获取后台数据，然后把数据填充到模板var data = [{id: 1,name: '三国演义',date: 1604302722823},{id: 2,name: '水浒传',date: 1604302722823},{id: 3,name: '红楼梦',date: 1604302722823},{id: 4,name: '西游记',date: 1604302722823}];this.books = data;
}
代码
html
<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" v-focus><label for="name">名称：</label><input type="text" id="name" v-model='name'><button @click='handle' :disabled="submitFlag">提交</button></div></div></div><div class="total"><span>图书总数：</span><span>{{total}}</span></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 | format('yyyy-MM-dd hh:mm:ss')}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent='deleteBook(item.id)'>删除</a></td></tr></tbody></table></div>
</div>
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: 10px;border: 1px dashed #F3DCAB;height: 35px;line-height: 35px;
}
.grid th {background-color: #F3DCAB;
}
.grid .book {padding-bottom: 10px;padding-top: 5px;background-color: #F3DCAB;
}
.grid .total {height: 30px;line-height: 30px;background-color: #F3DCAB;border-top: 1px solid #C2D89A;
}
js
<script type="text/javascript">/*图书管理-添加图书*/Vue.directive('focus', {inserted: function (el) {el.focus();}});Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份"d": date.getDate(), //日"h": date.getHours(), //小时"m": date.getMinutes(), //分"s": date.getSeconds(), //秒"q": Math.floor((date.getMonth() + 3) / 3), //季度"S": date.getMilliseconds() //毫秒};format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);})var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {handle: function(){if(this.flag) {// 编辑图书// 就是根据当前的ID去更新数组中对应的数据this.books.some((item) => {if(item.id == this.id) {item.name = this.name;// 完成更新操作之后，需要终止循环return true;}});this.flag = false;}else{// 添加图书var book = {};book.id = this.id;book.name = this.name;book.date = 2525609975000;this.books.push(book);// 清空表单this.id = '';this.name = '';}// 清空表单this.id = '';this.name = '';},toEdit: function(id){// 禁止修改IDthis.flag = true;console.log(id)// 根据ID查询出要编辑的数据var book = this.books.filter(function(item){return item.id == id;});console.log(book)// 把获取到的信息填充到表单this.id = book[0].id;this.name = book[0].name;},deleteBook: function(id){// 删除图书// 根据id从数组中查找元素的索引// var index = this.books.findIndex(function(item){// return item.id == id;// });// 根据索引删除数组元素// this.books.splice(index, 1);// -------------------------// 方法二：通过filter方法进行删除this.books = this.books.filter(function(item){return item.id != id;});}},computed: {total: function(){// 计算图书的总数return this.books.length;}},watch: {name: function(val) {// 验证图书名称是否已经存在var flag = this.books.some(function(item){return item.name == val;});if(flag) {// 图书名称存在this.submitFlag = true;}else{// 图书名称不存在this.submitFlag = false;}}},mounted: function(){// 该生命周期钩子函数被触发的时候，模板已经可以使用// 一般此时用于获取后台数据，然后把数据填充到模板var data = [{id: 1,name: '三国演义',date: 1604302722823},{id: 2,name: '水浒传',date: 1604302722823},{id: 3,name: '红楼梦',date: 1604302722823},{id: 4,name: '西游记',date: 1604302722823}];this.books = data;}});
</script>
[Vue.js] 基础 -- 综合案例 -- 图书管理相关推荐
- 前端学习（1222）:综合案例图书管理1
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- # vue.js 之 对vue.js基础理解
vue.js 之 对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
- vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...
- [Vue.js] 基础 -- 案例之Tab选项卡
实现效果 实现步骤 实现静态UI效果 用传统的方式实现标签结构和样式 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 声明式编程 模板的结构和最终显 ...
- Web框架——Flask系列之综合案例——图书管理系统（十）
一.知识点: 表单创建 数据库操作 一对多关系演练 二.实现步骤: 创建数据库配置信息,定义模型类 创建数据库表,添加测试数据 编写html页面,展示数据 添加数据 删除书籍,删除作者 三.创建数据库 ...
- Vue前后端交互实现图书管理功能
源码链接:https://pan.baidu.com/s/1MzN9Jcrz-OLv7GVklK7UXQ 提取码:36qe 初始化项目: npm init -y 安装相应的第三方模块: npm ins ...
- vue.js 基础学习 11天 -- 转载 某培训机构 学习资料 （转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
- vue js基础语法
什么是vue vue是目前前端主流的js框架,它和库的区别在于: 库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中 ...
最新文章
- python字符串转浮点数
- OS存储器管理(一)
- vim 的寄存器/剪贴板
- 科目三电子路考操作流程
- php旅行社网站源码在线支付,PHP各大支付平台在线支付集成源码
- phpcmsV9重装 - 踩坑篇
- Centos5.11 使用yum源
- 网络编程中使用float型数据要注意
- 响应式和自适应的区别
- 使用管道和rm命令遇到的问题
- Dalamud：FFXIV插件框架和API-源码
- JDownloader 2 for Mac(百度云无限速下载工具)内附安装教程，需要 macOS 11.x系统
- Poco::TCPServer框架解析
- PS3模拟器RPCS3无法识别PS3手柄 且无振动的解决办法
- Gym安装Atari环境（Windows，Linux适用）
- N-Tiers开发方式(如何使用VB.NET撰写COM+组件)
- 有农夫、猎人、挑夫、船夫每天都要走过一段索道
- 【tensorflow学习之路】如何使用gpu进行运算
- 玩转现代家居风格 高冷却处处透着温馨
- 微信小程序--自定义组件（超详细 从新建到使用）