Vue全家桶笔记04(黑马vue)--图书管理系统

最新推荐文章于 2024-06-12 10:54:06 发布
最新推荐文章于 2024-06-12 10:54:06 发布
阅读量1.4k 收藏 15
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/110504652
版权
1、数组方法

1、变异方法
变异方法会修改原有数据

  • push()：添加元素
  • pop()：删除元素
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
<body>
	<div id="app">
		<input type="text" v-model="pname" />
		<li :key='index' v-for="(item,index) in lists">{{item}}</li>
		<button @click="addin">添加</button>
		<button @click="delp">删除</button>
			
	</div>
	<script type="text/javascript">
		
		var vm=new Vue({
			el:"#app",
			data:{
				lists:['zhangsan','lisi','wanger'],
				pname:''
			},
			methods:{
				addin:function(){
					this.lists.push(this.pname)
				},
				delp:function(){
					this.lists.pop(this.pname)
				}
			}
			
		})

	</script>
</body>

2、替换数组
替换数组会生成新的数组

  • filter()
  • concat()
  • slice()
<body>
	<div id="app">
		<input type="text" v-model="pname" />
		<li :key='index' v-for="(item,index) in lists">{{item}}</li>
		<button @click="addin">添加</button>
		<button @click="delp">删除</button>
		<button @click="change">替换</button>
	</div>
	<script type="text/javascript">
		
		var vm=new Vue({
			el:"#app",
			data:{
				lists:['zhangsan','lisi','wanger'],
				pname:''
			},
			methods:{
				addin:function(){
					this.lists.push(this.pname)
				},
				delp:function(){
					this.lists.pop(this.pname)
				},
				change:function(){
					this.lists=this.lists.slice(0,2)
				}
			}
			
		})

	</script>
</body>
2、数组响应式变化（修改响应式数据）
  • Vue.set（vm.items，indexOfItem，newValue）
  • vm.$set(vm.items,indexOfItem,newValue)
    ①参数1表示要处理的数组名称
    ②参数2表示要处理的数组的索引
    ③参数3表示要处理的数组的值
<body>
		<div id="app">
			<li v-for="(item,index) in lists">{{item}}</li>

		</div>
		<script type="text/javascript">
			
			var vm=new Vue({
				el:"#app",
				data:{
					lists:['zhangsan','lisi','wanger']
				}
				
			});
			//vm.lists[1]='yuebuqun';//这个不能在页面中直接修改
			//Vue.set(vm.lists,1,'munianci');//响应式修改数据，这个可以在页面中直接修改
			vm.$set(vm.lists,1,'renyingying')//通过vm对象响应式修改数据，这个可以在页面中直接修改
		</script>
	</body>

数据为对象时，可以使用类似的方法

<body>
	<div id="app">
		<li v-for="(item,index) in lists">{{item}}</li>
		<div>{{info.name}}</div>
		<div>{{info.age}}</div>
		<div>{{info.gender}}</div>
		
	</div>
	<script type="text/javascript">
		
		var vm=new Vue({
			el:"#app",
			data:{
				lists:['zhangsan','lisi','wanger'],
				info:{
					name:'lisi',
					age:12		
				}
			}
			
		});
		//vm.lists[1]='yuebuqun';//这个不能在页面中直接修改
		//Vue.set(vm.lists,1,'munianci');//响应式修改数据，这个可以在页面中直接修改
		vm.$set(vm.lists,1,'renyingying')//通过vm对象响应式修改数据，这个可以在页面中直接修改
		//vm.info.gender='male';//这个不能在页面中直接修改
		//Vue.set(vm.info,'gender','female');//通过vm对象响应式修改数据，这个可以在页面中直接修改
		vm.$set(vm.info,'gender','female');//通过vm对象响应式修改数据，这个可以在页面中直接修改
	</script>
</body>
3、图书管理系统–图书列表

实现静态列表效果
基于数据实现模板效果
处理每行的操作按钮
在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table{ border: 1px solid gray; border-collapse: collapse;}
			.grid td{ padding: 5px; text-align: center;}
			.grid tr{line-height: 35px; width: 400px; } 
			.grid th{background-color: orange;padding: 5px;}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="grid">
				<table border="1">
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td><a href="" @click.prevent="modifyCell">修改</a><span>|</span><a href="" @click.prevent="deleteCell">删除</a></span></td>
						</tr>

					</tbody>
				</table>
			</div>
			
		</div>
		<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:''
					}]
				},
				methods:{
					modifyCell:function(){
						
					},
					deleteCell:function(){
						
					}
				}
				
			})
		</script>
	</body>
	
</html>

效果：
在这里插入图片描述

4、图书管理系统–添加图书
  • 实现表单的静态效果
  • 添加图书表单域数据绑定
  • 添加按钮事件绑定
  • 实现添加业务逻辑
    在这里插入图片描述
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table{ border: 1px solid gray; border-collapse: collapse;}
			.grid td{ padding: 5px; text-align: center;}
			.grid tr{line-height: 35px; width: 400px; } 
			.grid th{background-color: orange;padding: 5px;}
			.book{ background-color: orange; height: 40px; line-height: 40px;}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</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="submitBook">提交</button>
						</div>
					</div>
				</div><br/>
				<table border="1">
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td><a href="" @click.prevent="modifyCell">修改</a><span>|</span><a href="" @click.prevent="deleteCell">删除</a></span></td>
						</tr>

					</tbody>
				</table>
			</div>
			
		</div>
		<script type="text/javascript">
			
			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:{
					modifyCell:function(){
						
					},
					deleteCell:function(){
						
					},
					submitBook:function(){
						var book={};
						book.id=this.id;
						book.name=this.name;
						book.date='';
						this.books.push(book);
						//清空表单
						this.id='';
						this.date='';
						
					},
				}
				
			})
		</script>
	</body>
	
</html>

在这里插入图片描述

5、图书管理系统–修改图书
  • 1、修改信息填充到列表
  • 2、修改后重新提交表单
  • 3、重用添加和修改的方法
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table{ border: 1px solid gray; border-collapse: collapse;}
			.grid td{ padding: 5px; text-align: center;border: 1px solid gray;}
			.grid tr{line-height: 35px; width: 400px; } 
			.grid th{background-color: orange;padding: 5px;border: 1px solid gray;}
			.book{ background-color: orange; height: 40px; line-height: 40px;}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</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>
				</div><br/>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td><a href="" @click.prevent="modifyCell(item.id)">修改</a><span>|</span><a href="" @click.prevent="deleteCell">删除</a></span></td>
						</tr>

					</tbody>
				</table>
			</div>
			
		</div>
		<script type="text/javascript">
			
			var vm=new Vue({
				el:"#app",
				data:{
					id:'',
					name:'',
					flag:true,
					books:[{
						id:1,
						name:'三国演义',
						date:''
					},
					{
						id:2,
						name:'水浒传',
						date:''
					},
					{
						id:3,
						name:'红楼梦',
						date:''
					},
					{
						id:4,
						name:'西游记',
						date:''
					}]
				},
				methods:{
					modifyCell:function(id){
						//先禁止修改id
						this.flag='false';
						//根据id来获得要编辑的数据,filter是筛选数组的方法，返回被筛选的结果(数组)
						var book=this.books.filter(function(item){//这里的item就是数组books中的每一个元素，实际上遍历了books数组
							return item.id==id
						});
						console.log(book);
						//把获取到的信息填入到表单
						this.id=book[0].id;
						this.name=book[0].name;
						
					},
					deleteCell:function(){
						
					},
					handle:function(){
						if(this.flag=='true'){
							//修改操作
							//根据当前的id去更新数组中对应的数据
							//按照参数给定的方法对比books各元素（遍历）
							this.books.some((item)=>{//箭头函数指定义这个函数的父级函数的作用域
								if(item.id==this.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.date='';
						
						
						
					}
				}
				
			})
		</script>
	</body>
	
</html>

以上代码有些小瑕疵

6、图书管理系统–删除图书
  • 删除按钮绑定事件处理方法
  • 实现删除业务逻辑
    第1种方法
deleteCell:function(id){
						//删除图书
						//根据id从数组中查找元素的索引
						var index=this.books.findIndex(function(item){
							return item.id==id;
						});
						//根据索引删除对象
						this.books.splice(index,1);
						
					},

第2种方法

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table{ border: 1px solid gray; border-collapse: collapse;}
			.grid td{ padding: 5px; text-align: center;border: 1px solid gray;}
			.grid tr{line-height: 35px; width: 400px; } 
			.grid th{background-color: orange;padding: 5px;border: 1px solid gray;}
			.book{ background-color: orange; height: 40px; line-height: 40px;}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</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>
				</div><br/>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td>
								<a href="" @click.prevent="modifyCell(item.id)">修改</a>
								<span>|</span>
								<a href="" @click.prevent="deleteCell(item.id)">删除</a>
							</td>
						</tr>

					</tbody>
				</table>
			</div>
			
		</div>
		<script type="text/javascript">
			
			var vm=new Vue({
				el:"#app",
				data:{
					id:'',
					name:'',
					flag:true,
					books:[{
						id:1,
						name:'三国演义',
						date:''
					},
					{
						id:2,
						name:'水浒传',
						date:''
					},
					{
						id:3,
						name:'红楼梦',
						date:''
					},
					{
						id:4,
						name:'西游记',
						date:''
					}]
				},
				methods:{
					modifyCell:function(id){
						//先禁止修改id
						this.flag=true;
						//根据id来获得要编辑的数据,filter是筛选数组的方法，返回被筛选的结果(数组)
						var book=this.books.filter(function(item){//这里的item就是数组books中的每一个元素，实际上遍历了books数组
							return item.id==id
						});
						//把获取到的信息填入到表单
						this.id=book[0].id;
						this.name=book[0].name;
						
					},
					deleteCell:function(id){
						//删除图书
						/*
						//根据id从数组中查找元素的索引
						var index=this.books.findIndex(function(item){
							return item.id==id;
						});
						//根据索引删除对象
						this.books.splice(index,1);
						*/
					   //第二种方法
					   this.books=this.books.filter(function(item){
						   return item.id!=id;
					   });
					},
					handle:function(item){
						if(this.flag=='true'){
							//修改操作
							//根据当前的id去更新数组中对应的数据
							//按照参数给定的方法对比books各元素（遍历）
							this.books.some((item)=>{//箭头函数指定义这个函数的父级函数的作用域
								if(item.id==this.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.flag=false;
							
						}
						//清空表单
						this.id='';
						this.name='';
						
						
						
					}
				}
				
			})
		</script>
	</body>
	
</html>
7、常用特性应用场景
  • 过滤器-----格式化日期
  • 自定义指令-----获取表单焦点
  • 计算属性（统计图书数量）
  • 侦听器（验证图书存在性）
  • 生命周期（图书数据处理）
心湖中的石子
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
图书商城管理系统
08-07
这是javaweb的一个实训项目，图书商城管理系统，主要完成图书的发布和购买。
图书管理系统.rar
03-27
简单适合初学者学习的图书管理系统，内有数据库语句，项目用myeclipse,适合毕设，课程。基本的CRUD功能都有。
期末考试还缺项目吗？黑马的图书借阅管理系统很香
m0_53318344的博客
11-24 2804
提示：视频观看地址bibi视频项目展示提示：管理员全部功能, 用户部分功能！！记得三连 支持支持博主。
ssm基于Vue的线上书籍查阅系统设计与实现+vue
最新发布
平安喜乐
06-12 1093
传统的管理模式，时间越久管理的内容越多，也需要更多的人来对数据进行整理，并且数据的汇总查询方面效率也是极其的低下，并且数据安全方面永远不会保证安全性能。结合数据内容管理的种种缺点，在互联网时代都可以得到有效的补充。结合先进的互联网技术，开发符合需求的软件，让数据内容管理不管是从录入的及时性，查看的及时性还是汇总分析的及时性，都能让正确率达到最高，管理更加的科学和便捷。本次开发的线上书籍查阅系统实现了书籍管理,书籍留言管理,书籍借阅记录管理,留言板管理,用户管理等功能。
云借阅图书管理系统
菜鸟-宇的个人博客
05-11 2392
云借阅图书管理系统
Vue.js 全家桶零基础入门到进阶项目实战图书出版啦
xuzhaoxing2012的博客
10-15 602
本书以读者的视角，从工程实用角度出发，针对目前Vue及其周边生态最新版技术，通过实例精讲的形式，由易到难、由浅入深、由小实例到综合项目一步步讲解实操及分析。循序渐进、环环相扣、通俗易懂，全书共分4篇：入门准备实操篇、基础核心案例篇、中级进阶实战篇、综合进阶项目篇。实例丰富、配套有源代码。助力轻松学透Vue，成为Vue前端资深开发工程师。 作者：徐照兴，党员，硕士，教授。2020年取得首届江西省普通本科高校金牌教授。主要研究领域为计算机应用技术教学、Web数据库应用程序开发、智能信息系统开发。 ..
06 day5-Vue.js黑马全家桶笔记-webpack
01-08
webpack的基本使用2.1 列表隔行变色兼容性问题2.2 安装webpack2.3 设置webpack的打包入口/出口2.4 设置webpack的自动打包2.5 配置html-webpack-plugin2.6 webpack中的加载器（三) Vue单文件组件（1）Vue单文件组件...
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
vue笔记黑马
04-08
vue所有笔记--黑马
基于Vue的信息管理系统
06-20
插件：vue-preview (vue图片预览组件 ) vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作） 插件viewerjs GitHub地址：https://github.com/fengyuanchen/viewerjs 加入全局方式的loading： ...
基于Vue实现图书管理功能
08-29
主要为大家详细介绍了基于Vue实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某智Java图书管理系统，视频，代码+笔记+资料
04-03
某智Java图书管理系统，视频，代码+笔记+资料，欢迎Java学习小伙伴们
JavaEE_MVC图书馆管理系统
01-03
基于javaEE与MVC模式，图书馆管理系统，数据库为sql2000，有数据库备份文件，服务器为tomcat，用连接池连接方式。（有简要的小文档）
JavaEE-SpringMVC-云借阅图书管理系统（包含源码、数据库sql文件、报告）
06-24
云借阅图书管理系统：全部源码打包。含有数据库sql文件，简单报告书介绍，通过课设验收。 架构： 持久对象层（持久层或持久化层）：该层由若干持久化类（实体类）组成。 数据访问层（DAO层）：该层由若干DAO接口和MyBatis映射文件组成。DAO接口的名称统一以Mapper结尾，且MyBatis的映射文件名称要与接口的名称相同。 业务逻辑层（Service层）：该层由若干Service接口和实现类组成。逻辑层主要用于实现系统的业务逻辑。 Web表现层：该层主要包括Spring MVC中的Controller类和JSP页面。 总结： 云借阅图书管理系统主要实现了两大功能模块：用户登录模块和图书管理模块，用户登录模块主要用于实现用户的登录与注销；图书管理模块主要用于管理图书，如新书推荐、图书借阅等。 注意：本项目使用IDEA中的Maven仓库功能，下载后需要修改IDEA中的Maven本地仓库地址，然后进行重新加载。
阅读更多：一个基于Vue2全家桶和追书神器api开发的读书WebApp
02-06
前言 初学vue.js，官网的文档写的很清楚，看着不难。俗话说：光说不练假把式。程序猿学个新东西还是要敲出来看看效果比较好。最开始是想搞一个音乐类的，毕竟天天都会听歌，但发现搞音乐类的太多了，我再搞个多没意思。考虑了一下，还是搞个看书的吧，这个还是很少有人搞的。找了找最终效果因为api数据的限制，参考了起点中文网app，起点中文网web端，以及追书神器web端，再加上自己的一些想法搞出来的。项目中的小图标使用的是 。 技术栈 vue2 + vuex + vue-路由器+ webpack + ES6 + axios + sass 原始地址 访问地址 （pc端请用chrome手机模式预览） 扫描
java黑马程序员4-1图书购买系统案例代码
qq_40274516的博客
04-04 5303
java黑马程序员4-1图书购买系统案例代码
粉丝福利，送 10 本 Vue 技术栈的书籍啦~
pingan8787
07-18 1253
前端自习课联合中国水利水电出版社智博分社为大家送上 10 本 Vue 技术栈书籍，祝大家好运！冲呀~《Vue.js从入门到企业级实战》前端工程师是目前最流行的职位，可与大数据、人工智能、云计算等火爆职位相媲美。前端 工程师入门简单，适合大众人群（初中以上学历），学习人群广泛，工资高、就业好。前端开发技术包括HTML5、CSS3、JavaScript、Node，Vue.js...
【JAVA程序设计】（C00008）基于ssm的图书（借阅）管理系统
mataodehtml的博客
09-03 953
管理员：1.图书管理2.借书和还书操作3.书籍推荐4.读者增删改查5.借阅记录查询6.修改密码。读者：1.查询图书 2.个人借阅记录查询 3.个人信息修改4.修改密码。项目框架：ssm+jsp+bootstrap等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值