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

文章目录



内容

  • 需求：图书管理，实现基本的查询，增删改。

  • 分析功能：

    • 查询：展示图书列表
      • 图书展示在表格中
    • 新增：添加新的图书
      • 表单输入图书信息，通过点击添加按钮，添加到图书列表中
    • 修改：修改现有的图书信息
      • 通过点击修改，修改对应的图书信息
    • 删除：删除现有的某个图书
      • 通过点击删除，删除对应的图书记录

  • 实现

  1. 实现展示图书列表功能

    • 代码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：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SM0popoI-1595603734854)(./images/2020-07-23_list-books.png)]

  2. 实现添加图书的功能

    • 添加按钮绑定点击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：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zQq4Ufy5-1595603734856)(./images/2020-07-23_add-book.png)]

  3. 实现修改图书信息功能

    • 点击修改，绑定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点击修改：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ttakg53e-1595603734858)(./images/2020-07-23_update-book-click.png)]

    • 效果图示3-2修改：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r4m58UIL-1595603734860)(./images/2020-07-23_update-book-update.png)]

    • 效果图示3-3点击添加：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zBzc1Rq6-1595603734861)(./images/2020-07-23_update-book-ok.png)]

  4. 完成删除功能

    • 删除绑定点击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点击前：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgclokFL-1595603734863)(./images/2020-07-23_delete-before.png)]

    • 效果图示4-2点击后：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dHBKBBf-1595603734863)(./images/2020-07-23_delete-after.png)]

  5. 完整代码

     <!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 :

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

后记 ：

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

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

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue