vue 图书管理系统 入门
图书管理系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 100%;
height: 2000px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
.table th{
background-color: #DEB887;
}
.table th, td {
width: 130px;
height: 30px;
border: 1px burlywood dotted;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="#" @click.prevent>修改</a>
<span>|</span>
<a href="#" @click.prevent>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
books:[{
id:1,
name:'三国演义',
data:''
},{
id:2,
name:'水浒传',
data:''
},{
id:3,
name:'红楼梦',
data:''
},{
id:4,
name:'西游记',
data:''
}
]
}
})
</script>
</body>
</html>
添加图书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 100%;
height: 2000px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
.table th{
background-color: #DEB887;
}
.table th, td {
width: 130px;
height: 30px;
border: 1px burlywood dotted;
text-align: center;
}
.grid .book{
display: flex;
flex-direction: row;
background-color: #DEB887;
border-bottom: 1px solid seagreen;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<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="handle">提交</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="#" @click.prevent>修改</a>
<span>|</span>
<a href="#" @click.prevent>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
books:[{
id:1,
name:'三国演义',
data:''
},{
id:2,
name:'水浒传',
data:''
},{
id:3,
name:'红楼梦',
data:''
},{
id:4,
name:'西游记',
data:''
}
]
},
methods:{
handle:function(){
//添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.data = '';
this.books.push(book);
//清空表单
this.id= '';
this.name= '';
}
}
})
</script>
</body>
</html>
修改： 将需要修改的数据填充到表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 100%;
height: 2000px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
.table th{
background-color: #DEB887;
}
.table th, td {
width: 130px;
height: 30px;
border: 1px burlywood dotted;
text-align: center;
}
.grid .book{
display: flex;
flex-direction: row;
background-color: #DEB887;
border-bottom: 1px solid seagreen;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<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="handle">提交</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="#" @click.prevent="toEdit(item.id)">修改</a>
<span>|</span>
<a href="#" @click.prevent="deleteBook(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
books:[{
id:1,
name:'三国演义',
data:''
},{
id:2,
name:'水浒传',
data:''
},{
id:3,
name:'红楼梦',
data:''
},{
id:4,
name:'西游记',
data:''
}
]
},
methods:{
handle:function(){
//添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.data = '';
this.books.push(book);
//清空表单
this.id= '';
this.name= '';
},
toEdit:function(id){
//根据 id 查询出要编辑的数据
var book = this.books.filter(function(item){
return item.id == id;
});
console.log(book);
//把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
}
}
})
</script>
</body>
</html>
修改第二部：修改后重新提交表单，但是不允许修改id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 100%;
height: 2000px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
.table th{
background-color: #DEB887;
}
.table th, td {
width: 130px;
height: 30px;
border: 1px burlywood dotted;
text-align: center;
}
.grid .book{
display: flex;
flex-direction: row;
background-color: #DEB887;
border-bottom: 1px solid seagreen;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<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' disabled="true">提交</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="#" @click.prevent="toEdit(item.id)">修改</a>
<span>|</span>
<a href="#" @click.prevent="deleteBook(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag:false,
id:'',
name:'',
books:[{
id:1,
name:'三国演义',
data:''
},{
id:2,
name:'水浒传',
data:''
},{
id:3,
name:'红楼梦',
data:''
},{
id:4,
name:'西游记',
data:''
}
]
},
methods:{
handle:function(){
if(this.flag){
//编辑操作
//就是根据当前的id更新数组中对应数据
//箭头函数中的this是父级定义域handle的this
this.books.some((item)=>{
if(item.id == this.id){
item.name = this.name;
//完成更新操作后,需要终止循环
return true;
}
});
this.flag = false;
}else{
//添加
//添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.data = '';
this.books.push(book);
//清空表单
this.id= '';
this.name= '';
}
this.id= '';
this.name= '';
},
toEdit:function(id){
//禁止修改id
this.flag = true;
//根据 id 查询出要编辑的数据
var book = this.books.filter(function(item){
return item.id == id;
});
console.log(book);
//把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
}
}
})
</script>
</body>
</html>
删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 100%;
height: 2000px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
.table th{
background-color: #DEB887;
}
.table th, td {
width: 130px;
height: 30px;
border: 1px burlywood dotted;
text-align: center;
}
.grid .book{
display: flex;
flex-direction: row;
background-color: #DEB887;
border-bottom: 1px solid seagreen;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<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>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="#" @click.prevent="toEdit(item.id)">修改</a>
<span>|</span>
<a href="#" @click.prevent="deleteBook(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag:false,
id:'',
name:'',
books:[{
id:1,
name:'三国演义',
data:''
},{
id:2,
name:'水浒传',
data:''
},{
id:3,
name:'红楼梦',
data:''
},{
id:4,
name:'西游记',
data:''
}
]
},
methods:{
handle:function(){
if(this.flag){
//编辑操作
//就是根据当前的id更新数组中对应数据
//箭头函数中的this是父级定义域handle的this
this.books.some((item)=>{
if(item.id == this.id){
item.name = this.name;
//完成更新操作后,需要终止循环
return true;
}
});
this.flag = false;
}else{
//添加
//添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.data = '';
this.books.push(book);
//清空表单
this.id= '';
this.name= '';
}
this.id= '';
this.name= '';
},
toEdit:function(id){
//禁止修改id
this.flag = true;
//根据 id 查询出要编辑的数据
var book = this.books.filter(function(item){
return item.id == id;
});
console.log(book);
//把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
},
deleteBook:function(id){
//删除图书
//根据id从数组中查找元素的索引
var index = this.books.findIndex(function(item){
return item.id == id;
});
//根据索引删除数组元素
this.books.splice(index,1);
},
}
})
</script>
</body>
</html>
过滤器（格式化日期) 自定义指令(获取表单焦点) 计算属性(统计图书数量) 侦听器（验证图书存在性） 生命周期（图书数据处理）
Vue.filter('upper',function(val){
return val.charAt(0).toUpperCase() + val.slice(1)
});
Vue.filter('lower',function(val){
return val.charAt(0).toLowerCase() + val.slice(1)
})
Vue.filter('format',function(value,arg){
if(arg == 'yyyy-MM-dd'){
var ret = '';
ret +=value.getFullYear()+ '-' + (value.getMonth() + 1) + '-' + value.getDate();
return ret;
}
})
computed:{
total:function(){
//计算图书的总数
return this.books.length;
}
}
watch:{
name:function(val){
//验证图书名称是否存在
var flag = this.books.some(function(item){
return item.name == val;
});
if(flag){
//图书名称存在
this.submitFlag = true;
}else{
this.submitFlag = false;
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 100%;
height: 2000px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
.table th{
background-color: #DEB887;
}
.table th, td {
width: 130px;
height: 30px;
border: 1px burlywood dotted;
text-align: center;
}
.grid .book{
display: flex;
flex-direction: row;
background-color: #DEB887;
border-bottom: 1px solid seagreen;
padding: 5px;
}
.total{
height: 30px;
line-height: 30px;
background-color: #DEB887;
border-top: 1px solid seagreen ;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<h1>图书管理系统</h1>
<div class="book">
<div>
<label for="id">
编号
</label>
<input type="text" id="id" v-model="id" :disabled="flag" v-focus />
<label for="name">
名称
</label>
<input type="text" id="name" v-model="name" />
<button @click="handle" :disabled="submitFlag">提交</button>
</div>
</div>
</div>
<div class="total">
<span>图书总数：</span>
<span>{{total}}</span>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="#" @click.prevent="toEdit(item.id)">修改</a>
<span>|</span>
<a href="#" @click.prevent="deleteBook(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
var vm = new Vue({
el: '#app',
data: {
submitFlag:false,
flag: false,
id: '',
name: '',
books: [{
id: 1,
name: '三国演义',
data: '2525609975000'
}, {
id: 2,
name: '水浒传',
data: '2525609975000'
}, {
id: 3,
name: '红楼梦',
data: '2525609975000'
}, {
id: 4,
name: '西游记',
data: '2525609975000'
}]
},
methods: {
handle: function() {
if (this.flag) {
//编辑操作
//就是根据当前的id更新数组中对应数据
//箭头函数中的this是父级定义域handle的this
this.books.some((item) => {
if (item.id == this.id) {
item.name = this.name;
//完成更新操作后,需要终止循环
return true;
}
});
this.flag = false;
} else {
//添加
//添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.data = '';
this.books.push(book);
//清空表单
this.id = '';
this.name = '';
}
this.id = '';
this.name = '';
},
toEdit: function(id) {
//禁止修改id
this.flag = true;
//根据 id 查询出要编辑的数据
var book = this.books.filter(function(item) {
return item.id == id;
});
console.log(book);
//把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
},
deleteBook: function(id) {
//删除图书
//根据id从数组中查找元素的索引
var index = this.books.findIndex(function(item) {
return item.id == id;
});
//根据索引删除数组元素
this.books.splice(index, 1);
}
},
computed:{
total:function(){
//计算图书的总数
return this.books.length;
}
},
watch:{
name:function(val){
//验证图书名称是否存在
var flag = this.books.some(function(item){
return item.name == val;
});
if(flag){
//图书名称存在
this.submitFlag = true;
}else{
this.submitFlag = false;
}
}
}
});
</script>
</body>
</html>
