vue-图书管理-基本功能实现

最新推荐文章于 2024-02-27 19:55:53 发布

gaog2zh

最新推荐文章于 2024-02-27 19:55:53 发布

阅读量3.9k

点赞数 1

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/gaogzhen/article/details/107571535

版权

vue 专栏收录该内容

42 篇文章 8 订阅

订阅专栏

vue-图书管理-基本功能实现

文章目录

- ***后记*** ：

内容

需求：图书管理，实现基本的查询，增删改。
分析功能：
- 查询：展示图书列表
  - 图书展示在表格中
- 新增：添加新的图书
  - 表单输入图书信息，通过点击添加按钮，添加到图书列表中
- 修改：修改现有的图书信息
  - 通过点击修改，修改对应的图书信息
- 删除：删除现有的某个图书
  - 通过点击删除，删除对应的图书记录
实现

实现展示图书列表功能

代码1-1：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>02_图书管理</title>
  	<style>
  		* {
  			margin: 0;
  			padding: 0;
  		}
  		#grid {
  			width: 700px;
  			margin: 100px auto;
  			text-align: center;
  			background-color: orange;
  			box-shadow: 10px 10px 10px silver;
  		}

  		#grid .fi {
  		   margin-top: 10px; 

  		}

  		#grid table {
  			width: 100%;
  			border-collapse: collapse;
  			margin: 10px 0;
  		}

  		#grid table th, #grid table td {
  			border: 1px dashed orange;
  			height: 35px;
  			line-height: 35px;
  		}

  		#grid thead {
  			background-color: orange;
  		}

  		#grid tbody {
  			background-color: #ff99f0;
  		}

  		#grid a {
  			text-decoration: none;
  			cursor: pointer;
  		}
  		#grid a:hover {
  			color: orangered;
  		}
  		#grid input[type='text'] {
  			padding-left: 5px;
  		}
  	</style>
  </head>
  <body>
  <div id="app">

  	<div id="grid">
  		<header>图书管理</header>
  		<hr>
  		<div class="fi">
  			<span>编号：<input type="text" v-model="id"></span>
  			<span>名称：<input type="text" v-model="name"></span>
  			<button>添加</button>
  		</div>
  		<table>
  			<thead>
  				<tr>
  					<th>ID</th>
  					<th>名称</th>
  					<th>时间</th>
  					<th>操作</th>
  				</tr>
  			</thead>
  			<tbody>
  				<tr v-for="book in books" :key="book.id">
  					<td>{{ book.id }}</td>
  					<td>{{ book.name }}</td>
  					<td>{{ book.date }}</td>
  					<td>
  						<a @click.prevent>修改</a>|
  						<a @click.prevent>删除</a>
  					</td>
  				</tr>
  			</tbody>
  		</table>
  	</div>
  </div>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script src="../../node_modules/moment/moment.js"></script>
  <script>
   const app = new Vue({
  	el: '#app',
  	data: {
  		id: '',
  		name: '',
  		books: [
  			{
  				id: 1,
  				name: '三国演义',
  				date: 2525609975000
  			},
  			{
  				id: 2,
  				name: '水浒传',
  				date: 2525609975000
  			},
  			{
  				id: 3,
  				name: '西游记',
  				date: 2525609975000
  			},
  			{
  				id: 4,
  				name: '红楼梦',
  				date: 2525609975000
  			}
  		]
  	},
  	methods:{

  	}
   });
   </script>
  </body>
  </html>

效果图示1-1：

实现添加图书的功能

添加按钮绑定点击addBook功能
数组方法：array.push(element)—数组末尾添加元素

代码2-1：

  // html部分增加 其他不变了同上省略
  <button @click="addBook">添加</button>
  
  // js部分
  methods: {
  	...
  	addBook() {
  this.books.push({id: this.id, name: this.name, date: 2525609975000})
  this.id = ''
  this.name = ''
  }
  		...
  	}

效果图示2-1：

实现修改图书信息功能

点击修改，绑定updateBook(book)功能
data:添加记录要修改图书对象的变量
input显示要修改的图书信息，ID不能修改
flag来标记是添加还是修改操作，true-修改，false添加，默认false
点击添加完成修改

代码3-1：

  ...
  <a @click.prevent="updateBook(book)">修改</a>
  ...
  
  data: {
  	...
  	flag: false, // false添加，true修改
  	updatedBook: {} //表示要修改的图书对象
  	...
  }
  
  methods: {
  	addBook() {
  				if (this.flag) {
  				 // flag = true 修改操作   
  				 this.updatedBook.name = this.name
  				 this.flag = false
  				 this.updatedBook = {}
  				}else {
  					// flag = false 添加操作
  					this.books.push({id: this.id, name: this.name, date: 2525609975000})
  				}
  				this.id = ''
  				this.name = ''

  			},
  			updateBook(book) {
  				this.updatedBook = book
  				this.id = this.updatedBook.id
  				this.name = this.updatedBook.name
  				this.flag = true
  			}
  		}

效果图示3-1点击修改：
效果图示3-2修改：
效果图示3-3点击添加：

完成删除功能

删除绑定点击deleteBook(book.id)功能

代码4-1：

  ...
  <a @click.prevent="deleteBook(book.id)">删除</a>
  ...
  deleteBook(id) {
  			this.books = this.books.filter(book => {
  				return book.id !== id
  			})
  }
  ...

效果图示4-1点击前：
效果图示4-2点击后：

完整代码

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>02_图书管理</title>

 	<style>
 		* {
 			margin: 0;
 			padding: 0;
 		}
 		#grid {
 			width: 700px;
 			margin: 100px auto;
 			text-align: center;
 			background-color: orange;
 			box-shadow: 10px 10px 10px silver;
 		}

 		#grid .fi {
 		   margin-top: 10px; 

 		}

 		#grid table {
 			width: 100%;
 			border-collapse: collapse;
 			margin: 10px 0;
 		}

 		#grid table th, #grid table td {
 			border: 1px dashed orange;
 			height: 35px;
 			line-height: 35px;
 		}

 		#grid thead {
 			background-color: orange;
 		}

 		#grid tbody {
 			background-color: #ff99f0;
 		}

 		#grid a {
 			text-decoration: none;
 			cursor: pointer;
 		}
 		#grid a:hover {
 			color: orangered;
 		}
 		#grid input[type='text'] {
 			padding-left: 5px;
 		}
 	</style>
 </head>
 <body>
 <div id="app">

 	<div id="grid">
 		<header>图书管理</header>
 		<hr>
 		<div class="fi">
 			<span>编号：<input type="text" v-model="id" :disabled="flag"></span>
 			<span>名称：<input type="text" v-model="name"></span>
 			<button @click="addBook">添加</button>
 		</div>
 		<table>
 			<thead>
 				<tr>
 					<th>ID</th>
 					<th>名称</th>
 					<th>时间</th>
 					<th>操作</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr v-for="book in books" :key="book.id">
 					<td>{{ book.id }}</td>
 					<td>{{ book.name }}</td>
 					<td>{{ book.date }</td>
 					<td>
 						<a @click.prevent="updateBook(book)">修改</a>|
 						<a @click.prevent="deleteBook(book.id)">删除</a>
 					</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>
 </div>
 <script src="../../node_modules/vue/dist/vue.js"></script>
 <script>
 //    const moment = require('../assets/js/moment.js')
 	Vue.filter('dateFormat', function (value, args) {
 		return moment(value).format(args || 'YYYY/MM/DD hh:mm:ss')
 	})
 	const app = new Vue({
 		el: '#app',
 		data: {
 			id: '',
 			name: '',
 			flag:  false,
 			updatedBook: {}, // 被修改的图书对象
 			books: [
 				{
 					id: 1,
 					name: '三国演义',
 					date: 2525609975000
 				},
 				{
 					id: 2,
 					name: '水浒传',
 					date: 2525609975000
 				},
 				{
 					id: 3,
 					name: '西游记',
 					date: 2525609975000
 				},
 				{
 					id: 4,
 					name: '红楼梦',
 					date: 2525609975000
 				}
 			]
 		},
 		methods:{
 			addBook() {
 				if (this.flag) {
 				// flag = true 修改操作   
 				this.updatedBook.name = this.name
 				this.flag = false
 				this.updatedBook = {}
 				}else {
 					// flag = false 添加操作
 					this.books.push({id: this.id, name: this.name, date: 2525609975000})
 				}
 				this.id = ''
 				this.name = ''

 			},
 			updateBook(book) {
 				this.updatedBook = book
 				this.id = this.updatedBook.id
 				this.name = this.updatedBook.name
 				this.flag = true
 			},
 			deleteBook(id) {
 				this.books = this.books.filter(book => {
 					return book.id !== id
 				})
 			}
 		}
 	});
  </script>
 </body>
 </html>

tips :

js 导入，通过npm安装的本地js，地址修改为自己的

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-图书管理-基本功能实现

vue-图书管理-基本功能实现目录文章目录***后记*** ：内容需求：图书管理，实现基本的查询，增删改。分析功能：查询：展示图书列表图书展示在表格中新增：添加新的图书表单输入图书信息，通过点击添加按钮，添加到图书列表中修改：修改现有的图书信息通过点击修改，修改对应的图书信息删除：删除现有的某个图书通过点击删除，删除对应的图书记录实现实现展示图书列表功能代码1-1： <!DOCTYPE html>
复制链接

扫一扫