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

前往低代码交流专区

更多推荐