利用Vue框架实现简单的图书管理系统(添加/删除/查询)
完整代码如下：(代码中附有相关解释说明，方便解读）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>图书管理系统</title>
</head>
<body>
<div id='app'>
<div class="container">
<h1>图书管理系统</h1>
<form class="form-inline">
<div class="form-group">
<label for="name">名称：</label>
<input type="text" class="form-control" id="name" placeholder="请输入图书名称" v-model="add_book.name">
</div>
<div class="form-group">
<label for="author">作者：</label>
<input type="text" class="form-control" id="author" placeholder="请输入作者" v-model="add_book.author">
</div>
<div class="form-group">
<label for="price">价格：</label>
<input type="number" class="form-control" id="price" placeholder="请输入价格" v-model="add_book.price">
</div>
<button type="submit" class="btn btn-primary" @click.prevent="add">添加</button>
</form>
<form class="form-inline">
<div class="form-group">
<label for="keywords">搜索关键字：</label>
<input type="text" class="form-control" id="keywords" placeholder="请输入关键字" v-model="keywords">
</div>
</form>
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>作者</th>
<th>价格</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books_result">
<td>{{index+1}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<td>{{book.atime|timeFormat}}</td>
<td><button class="btn btn-danger" @click="del(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
books: [
{ "name": "三国演义", "author": "罗贯中", "price": 98, "atime": new Date() },
{ "name": "水浒传", "author": "施耐庵", "price": 100, "atime": new Date() }
],
add_book: {
name: '',
author: '',
price: 0,
},
keywords: "",
},
// 查询图书信息 采用计算属性computed来实现（思路：如果输入的关键字为空，就显示原有的所有图书记录，否则就显示包含关键字的一条或多条记录）
computed: {
books_result() {
var _this = this;
if (this.keywords) {
//this的作用域到此结束，无法穿透进入filter函数,所以需要用一个变量（比如_this）来保存this的指向。
// 下面的参数item指的是其中一条图书的搜索记录
let newBooks = this.books.filter(function (item) {
if (item.name.indexOf(_this.keywords) >= 0) {
//找到输入的关键词对应的书名的索引，存在则>=0,不存在则返回-1
return true
} else {
return false
}
})
return newBooks
} else {
return this.books //没有关键词就显示所有的数据
}
}
},
methods: {
// 添加图书记录
add() {
// let book = this.add_book
//JSON.stringify() 方法用于将js对象转换为 JSON 字符串，JSON.parse()方法用于将一个 JSON 字符串转换为js对象。
let book = JSON.parse(JSON.stringify(this.add_book));
book.atime = new Date();//获取当前时间
this.books.push(book);
},
// 删除指定的图书记录
del(index) {
this.books.splice(index, 1)
}
},
// 过滤器filters就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。
// 下面是通过过滤器（名字为timeFormat）将我们获取到的当前日期时间进行一定的处理变成我们希望的格式。
filters: {
timeFormat: function (value) {
value = new Date(value);
let year = value.getFullYear();
let month = value.getMonth() + 1;
let day = value.getDate();
let hour = value.getHours();
let minutes = value.getMinutes();
return `${year}-${month}-${day} ${hour}:${minutes}`
}
}
})
</script>
</body>
</html>
实现的效果图如下：
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
