vue：图书管理系统的实现以及vue的补充(五)

最新推荐文章于 2024-03-29 01:43:10 发布

慢羊羊6379.*?

最新推荐文章于 2024-03-29 01:43:10 发布

阅读量740

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_49088841/article/details/108746066

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、图书管理系统

需求：
①图书添加功能
②图书删除功能
③图书搜索功能
在这里插入图片描述
实现：在搜索中输入关键字，会将结果显示在table表单中，点击添加可以将图书信息添加到table表单中，点击删除，可以从表单中删除数据
详细代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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">
    <script src="./vue.js"></script>
</head>
<body>
    <div id ='app' class="container">
        <form class="form-inline">
            <h1>图书管理系统</h1>
            <div class="form-group">
                <label >书名：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入书名" v-model='add_book.name'>
            </div>
            <div class="form-group">
                <label >作者：</label>
                <input type="email" class="form-control" id="author" placeholder="请输入作者" v-model='add_book.author'>
            </div>
            <div class="form-group">
                <label >价格：</label>
                <input type="email" class="form-control" id="price" placeholder="请输入价格" v-model='add_book.price'>
                <button type="submit" class="btn btn-success" @click.prevent='add'>添加</button>
            </div>
            <div class="form-group">
                <label >搜索：</label>
                <input type="text" class="form-control" id="search" v-model='keyword' placeholder="请输入想要搜索的关键字">
            </div>
            <!-- 阻止往服务器中提交.prevent自定义添加 -->
            
        </form>     
            <table class="table">
                <tr>
                    <td>序号</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for='every,index in book_result'>
                    <td>{{index+1}}</td>
                    <td>{{every.name}}</td>
                    <td>{{every.author}}</td>
                    <td>{{every.price}}</td>
                    <td>{{every.atime}}</td>
                    <td><button class="btn btn-danger" @click='del(index)'>删除</button></td>
                </tr>
            </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{books:[
                {'name':'vue学习','author':'尤先生','price':99,'atime':new Date()},
                {'name':'python学习','author':'龟叔','price':69,'atime':new Date()},
            ],
            add_book:{
                name:'',
                author:'',
                price:''      
            },
            keyword:''
            },
            methods:{
                add(){
                    //这样做的话只能添加一本，因为是双向绑定所以一改全部都改了，所以不能这样添加
                    // this.books.push(this.add_book)
                    //var book = this.add_book这样也不行相当于赋值
                    //先将添加的数据转化为字符串，在转化成字典，相当于重新转化了一次
                    var book = JSON.parse(JSON.stringify(this.add_book)) 
                    book.atime = new Date()
                    this.books.push(book)
                    this.add_book={
                                    name:'',
                                    author:'',
                                    price:''      
                                }
                    },
                del(index){
                    this.books.splice(index,1)
                }
                    },
            computed:{
                book_result(){
                    if(this.keyword){
                        // 或者用var that=this将that改为this
                        kw = this.keyword
                        var newbook = this.books.filter(function(item){
                            // if(item.name.indexOf(this.keyword)>=0)在方法里面this指向的就不是vue中的对象了
                            if(item.name.indexOf(kw)>=0)
                            {
                                return true
                            }
                            else{return false}
                        })
                        return newbook
                    }
                    else{return this.books}
                }
            }
                    
        })
    </script>
</body>
</html>

2、vue过滤器

定义： 过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。
使用： 在双花括号和v-bind表达式中使用 (后者从2.1.0+开始支持)。过滤器添加在JavaScript表达式的尾部，由“管道”符号指示，过滤器允许自己定义，下述只是两种使用方法

<!-- 在双花括号中 -->
{{ message|capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId|formatId"></div>

replace在js中只能替换一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{message|strip|upper}}
        <br>
        {{message|vstrip(",")}}
    </div>
    <script>
          Vue.filter('strip',function(value){
            // console.log(value)
            return value.replace(' ','-')
        })
        Vue.filter('vstrip',function(value,str){
            return value.replace(' ',str)
        })
        Vue.filter('upper',function(value){
            return value.replace('h','H')
        })
        new Vue({
            el:'#app',
            data:{
                message:'hello world'
            },
            methods:{
                
            }
        })   
    </script>
</body>
</html>

3、vue中的网络应用

3.1get请求和post请求的区别

①POST和GET都是向服务器提交数据，从服务器获取数据的两种基本方法，最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
②GET产生一个TCP数据包而POST产生两个TCP数据包(firefox浏览器除外)。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
③对参数的数据类型，GET只接受ASCII字符，而POST没有限制。GET请求在URL中传送的参数是有长度限制的，而POST则没有。GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

3.2发送get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click='getjoke'>获取笑话</button>
        <p>{{joke}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                joke:''
            },
            methods:{
                getjoke(){
                    var that=this
                    axios.get('https://autumnfish.cn/api/joke/list?num=3')
            .then(
            // 请求成功之后的结果
            function(response){
                console.log(response)
                that.joke=response.data.jokes
            },
            // 请求失败返回后的结果
            function(err){
                console.log(err)
            })
                    }
                }
        })       
    </script>
</body>
</html>

3.3发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
            },
            methods:{            
            }
        })
        // 请求参数通过对象方式写入
        axios.post('https://autumnfish.cn/api/user/reg',{username:'beiyue'})
        .then(
            // 成功的结果
            function(response)
            {console.log(response)},
            //失败的结果
            function(err)
            {console.log(err)})
    </script>
</body>
</html>