vue2.0学习笔记（第五讲）（vue-resource实现交互、基于vue制作仿百度智能提示搜索框）

一、使用vue-resource实现交互

vue当中的数据交互主要指的是与本域内的后台服务器进行ajax的数据交互和跨域的jsonp交互。我们可以使用vue-resource来实现vue当中的数据交互。vue-resource的下载地址为 https://github.com/pagekit/vu... 。我们下载完成之后，接下去把dist文件夹当中的vue-resource.min.js的文件复制到项目文件夹当中，然后再引入<script src="vue-resource.min.js"></script>。

当我们与本域内的后台服务器进行数据交互时，记得一定要把项目文件夹放在本地服务器的环境下进行运行。

1、使用get方式获取普通文本数据

ajax进行数据交互有get和post两种方式，并且不能跨域。故我们采用相对路径的方式来描述后台文本文件的位置即可。我们在index.html的同一目录下新建一个a.txt文件，内容为"hello world"。示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:''
                },
                methods:{
                    get:function(){
                        this.$http.get('a.txt').then(function(res){
                            alert(res.status);
                            this.msg = res.data;
                        },function(res){
                            alert('failed');
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <button @click="get()">按钮</button>
        <h2>{{msg}}</h2>
    </div>
</body>
</html>

我们将项目文件夹放在本地服务器的环境下进行运行，代码输出结果为，点击按钮之后，先弹出200状态码，然后在按钮下面显示hello world文本字样。在this.$http.get().then();当中的get参数写文本文件的相对路径，then当中的第一个参数代表数据请求成功执行的回调函数，第二个参数代表数据请求失败执行的回调函数。

2、使用get方式给服务器发送数据，再获取返回结果

我们一般会使用get方式来向服务器端发送一个json数据，然后再获取返回结果。比如我们在index.html的同一目录下新建一个a.php文件，其中的代码为：

<?php
    $a = $_GET['a'];
    $b = $_GET['b'];
    echo $a - $b; 
?>

则我们在主文件index.html当中写的示例代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:''
                },
                methods:{
                    get:function(){
                        this.$http.get('a.php',{params:{a:10,b:2}}).then(function(res){
                            this.msg = res.data;
                        },function(res){
                            alert('failed');
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <button @click="get()">按钮</button>
        <h2>{{msg}}</h2>
    </div>
</body>
</html>

我们将项目文件夹放在本地服务器的环境下进行运行，代码输出结果为，点击按钮之后显示结果为8。this.$http.get().then();，其中的get的第一个参数写后台文件的相对路径，第二个参数的形式为{params:json},其中json为我们要传给服务端的json数据。 then当中的第一个参数代表数据请求成功执行的回调函数，第二个参数代表数据请求失败执行的回调函数。

3、使用post方式给服务器发送数据，再获取返回结果

我们一般会使用post方式来向服务器端发送一个json数据，然后再获取返回结果。比如我们在index.html的同一目录下新建一个a.php文件，其中的代码为：

 <?php
    $a = $_POST['a'];
    $b = $_POST['b'];
    echo $a + $b; 
?>

则我们在主文件index.html当中写的示例代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:''
                },
                methods:{
                    get:function(){
                        this.$http.post('a.php',{a:2,b:3},{emulateJSON:true}).then(function(res){
                            this.msg = res.data;
                        },function(res){
                            alert('failed');
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <button @click="get()">按钮</button>
        <h2>{{msg}}</h2>
    </div>
</body>
</html>

我们将项目文件夹放在本地服务器的环境下进行运行，代码输出结果为，点击按钮之后显示结果为5。this.$http.get().then();，其中的get的第一个参数写后台文件的相对路径，第二个参数的形式为json,其中json为我们要传给服务端的json数据,第三个参数为固定的{emulateJSON:true}。 then当中的第一个参数代表数据请求成功执行的回调函数，第二个参数代表数据请求失败执行的回调函数。

4、使用jsonp方式来获取本域服务器之外的数据

jsonp使用的大致格式为this.$http.jsonp('域外的服务器地址',{params:json,jsonp:'回调函数名'});。其中json为我们在请求地址当中所加的参数对象，jsonp的属性值为接收回调函数名的参数名。
我们打开百度搜索的首页，在审查元素的面板当中选择Network项，先选择清空控制台当中的请求记录，当光标点击百度搜素框时，我们可以发现在Network面板当中多了一条js请求。我们选中该请求，点击右键，选择copy link address。结果为：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1457_19037_21084_24331_20930&req=2&sc=eb&csor=0&cb=jQuery11020992511588614434_1507968560776&_=1507968560780

由此我们可以确定提供百度智能搜索提示服务的服务器接口地址为https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su，另外我们搜索的内容通过wd的参数属性值进行传送，cb用于规定返回的回调函数名。
我们可以测试在网址导航栏当中输入网址https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=ab，获得的返回结果为ab({q:"s",p:false,s:["steam","孙政才","双世宠妃","搜狗输入法下载","搜狗输入法","顺丰快递单号查询","三国杀","苏宁易购","搜房网","上海天气"]});我们通过jsonp的方式来请求上述地址，成功返回的res.data代表ab回调函数当中的对象。我们通过res.data.s可以得到十条智能提示搜索结果的数组。下面为示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    arr:[]
                },
                methods:{
                    get:function(){
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{params:{wd:'s'},jsonp:'cb'}).then(function(res){
                            this.arr = res.data.s;
                        },function(res){
                            alert('failed');
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <button @click="get()">按钮</button>
        <ul>
            <li v-for="(value,index) in arr">{{value}}</li>
        </ul>
    </div>
</body>
</html>

由于我们使用jsonp方式来获取本域服务器之外的数据，故我们不需要将项目文件夹放在本地服务器的环下进行运行，当我们点击按钮时，显示结果为：

图片描述

二、基于vue制作仿百度智能提示搜索框

我们使用bootstrap对页面进行简单的布局，主页面如下所示：

图片描述

当我们在搜索框当中输入关键字时，即可出现与百度搜索一样的智能提示信息，如下所示：

图片描述

我们可以直接点击智能提示列表当中的某一项，从而打开对应的搜索结果的页面。也可以键入上键或下键，选择列表当中的值，当我们键入上键或下键时，搜索框当中的关键字会变为我们当前选中的那个列表的内容。我们可以点击Go按钮或者键入enter键来跳转到对应的搜索结果页面。
下面给出完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <style>
        #box{
            margin-top: 70px;
        }
        h3{
            text-align: center;
            margin-bottom: 30px;
        }
        .select{
            background-color: #D0E9C6;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    key:'',
                    arr:[],
                    now:-1
                },
                methods:{
                    get:function(ev){
                        if(ev.keyCode == 38 || ev.keyCode == 40){
                            return;
                        }
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{params:{wd:this.key},jsonp:'cb'}).then(function(res){
                        this.arr = res.data.s;
                        },function(res){
                            alert('failed');
                        });
                    },
                    enter:function(index){
                        if(arguments.length != 0){
                            this.key = this.arr[index];
                        };
                        window.open('https://www.baidu.com/s?wd='+this.key);
                        this.key = '';
                        this.arr = [];
                    },
                    changeUp:function(ev){
                        ev.preventDefault();
                        this.now--;
                        if(this.now == -2){
                            this.now = this.arr.length -1;
                        };
                        if(this.now == -1){
                            this.now = this.arr.length -1;
                        };
                        this.key = this.arr[this.now];
                    },
                    changeDown:function(){
                        this.now++;
                        if(this.now == this.arr.length){
                            this.now = 0;
                        };
                        this.key = this.arr[this.now];
                    }
                }
            });
        };
    </script>
</head>
<body>
     <div id="box">
        <h3>基于vue制作仿百度智能提示搜索框</h3>
        <div class="container">
            <div class="row">
                  <div class="col-lg-6 col-lg-offset-3">
                    <div class="input-group">
                          <input type="text" class="form-control" placeholder="Search for..." v-model="key" @keyup="get($event)" @keydown.up="changeUp($event)" @keydown.down="changeDown()" @keydown.13="enter()">
                          <span class="input-group-btn">
                            <button class="btn btn-success" type="button" @click="enter()">Go!</button>
                          </span>
                    </div>
                    <div class="list-group">
                          <a href="javascript:void(0)" class="list-group-item list-group-item-success" :class="{select:index==now}" v-for="(value,index) in arr" @click="enter(index)">{{value}}</a>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</body>
</html>

vue2.0学习笔记（第五讲）（vue-resource实现交互、基于vue制作仿百度智能提示搜索框）

一、使用vue-resource实现交互

1、使用get方式获取普通文本数据

2、使用get方式给服务器发送数据，再获取返回结果

3、使用post方式给服务器发送数据，再获取返回结果

4、使用jsonp方式来获取本域服务器之外的数据

二、基于vue制作仿百度智能提示搜索框

倩儿爱甜食

引用和评论

前端自动化构建之Gulp的使用（学习笔记）

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue.js-方法与事件

Vue使用mixins

startViewTransition的简单示例