Vue 案例练习

最新推荐文章于 2024-07-23 17:22:52 发布

白菜执笔人

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量1.3k

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/qq_43621629/article/details/105111747

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

项目前导学习笔记

一、图书管理系统（当然是假的，没有与数据库进行交互）

给大家介绍一个 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>

那么，这个仿真的图书管理系统就完成了。

白菜执笔人

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
Vue 案例练习

项目前导学习笔记一、图书管理系统（当然是假的，没有与数据库进行交互）        给大家介绍一个 web 页面样式的网站，直接复制它的代码可以更方便的开发。        Bootstrap 官网：https://www.bootcss.com/        该...
复制链接

扫一扫

专栏目录