项目前导 学习笔记
一、图书管理系统(当然是假的,没有与数据库进行交互)
给大家介绍一个 web 页面样式的网站,直接复制它的代码可以更方便的开发。
Bootstrap 官网:https://www.bootcss.com/
该案例用到的样式:https://v3.bootcss.com/components/#navbar-forms
大致长这样:
1.1、整体的结构
-
网站所给的代码有样式的需要引入一下,可以看一下介绍 https://v3.bootcss.com/getting-started/
-
这里我们用最简单的,在
head
里加:
<head>
...
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<!-- bootstrap 中居中样式 -->
<div class="container">
<h1>图书管理系统</h1>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<label>书名:</label>
<input type="text" class="form-control" placeholder="请输入图书名字">
</div>
<div class="form-group">
<label>作者:</label>
<input type="text" class="form-control" placeholder="请输入图书作者">
</div>
<div class="form-group">
<label>价格:</label>
<input type="text" class="form-control" placeholder="请输入图书价格">
</div>
<div class="form-group">
<label>搜索:</label>
<input type="text" class="form-control" placeholder="请输入搜索内容">
</div>
<button type="button" class="btn btn-default">添加</button>
</form>
<!-- bootstrap 带表格的面板样式 -->
<table class="table">
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-for="(book, index) in books">
<td>{{index}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<td>{{book.atime}}</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#app",
data: {
books:[
{"name":"Python",author:"龟叔",price:89,atime:new Date()},
{"name":"Java",author:"xxx",price:79,atime:new Date()},
],
}
});
</script>
1.2、实现添加功能
-
第一阶段
-
使用新数组
adding_book
存储添加的值 -
使用
v-model
双向绑定 -
创建
add
方法进行添加
-
<div id="app">
...
<div class="form-group">
<label>书名:</label>
<input type="text" class="form-control" v-model="adding_book.name" placeholder="请输入图书名字">
</div>
...
<button type="button" class="btn btn-default" @click="add">添加</button>
...
</div>
<script>
...
data: {
books: [
{"name":"Python",author:"龟叔",price:89,atime:new Date()},
{"name":"Java",author:"xxx",price:79,atime:new Date()},
],
adding_book: {
name: "",
author: "",
price: 0,
atime: new Date()
},
},
methods: {
add(){
this.books.push(this.adding_book);
}
}
...
</script>
但是有问题,因为是双向绑定,所以点击添加后修改输入框的值,之前添加的记录数值也会跟着改变。
-
改进
-
使用
JSON.stringify
转成字符串 -
使用
JSON.parse
转成 JS 认识的代码 -
重新赋值实现添加完成后清空输入框,也可以用 JS 清空输入框中的 value 值
-
<script>
...
add(){
// this.books.push(this.adding_book)
// 改进
var book = JSON.parse(JSON.stringify(this.adding_book))
this.books.push(book)
// 添加完成后清空输入框
this.adding_book = {
name: "",
author: "",
price: 0,
atime: new Date()
}
},
...
</script>
1.3、实现删除功能
<div id="app">
...
<td><button class="btn btn-danger" @click="del(index)">删除</button></td>
...
</div>
<script>
...
data: { ... },
methods: {
add(){ ... },
del(index){
this.books.splice(index, 1)
}
}
...
</script>
1.4、实现搜索功能
-
第一阶段
-
使用计算属性
computed
-
用于循环的数值由固定的
books
改为动态变化的新数组books_result
-
使用数值里的过滤方法
filter
-
<div id="app">
...
<div class="form-group">
<label>搜索:</label>
<input type="text" class="form-control" v-model="keywords" placeholder="请输入搜索内容">
</div>
...
</div>
<script>
...
data: {
...
keywords: ""
},
methods: { ... },
computed: {
books_result(){
if(this.keywords){
// console.log(this.keywords)
// 数组里面的过滤方法
// item 就是 books 当中的每一条数据
var newbooks = this.books.filter( function(item){
if(item.name.indexOf(this.keywords)>=0){
// 返回 true, 返回当前的 item 数据
return true
}else{
return false
}
})
return newbooks
}
else{
return this.books
}
}
}
...
</script>
有问题,搜索结果均为空。
-
Debug
-
使用
console.log()
或其他方法逐步排查 -
找到问题并解决
-
<script>
...
computed: {
books_result(){
kw = this.keywords
if(kw){
var newbooks = this.books.filter( function(item){
// console.log(item.name.indexOf(this.keywords))
// 发现返回的不是输入的值, 找到问题所在
// 这里的 this 指当前函数, 所以不能访问到上面定义的 keywords
// 在开始从为 keywords 定义一个变量存储起来
<!-- if(item.name.indexOf(this.keywords)>=0){ -->
if(item.name.indexOf(kw)>=0){
return true
}else{
return false
}
})
return newbooks
}
else{
return this.books
}
}
}
...
</script>
那么,这个仿真的图书管理系统就完成了。