vue2.0,jsonp仿百度搜索页面,请求百度数据

看了那么多别人的东西,是觉得自己也该贡献点什么!
简单的调用百度搜索框的方法我就不说了,下面给大家详细讲一下用vue、vue-resource请求百度搜索的数据简单的仿百度首页...


访问地址:http://www.lzsfe.cn/project/baidu ,最近用Vue写了一个简单的个税计算器,喜欢的可以看看 https://www.lzsfe.cn

1 页面搭建

首先,我们先把页面写好,具体的html+css就不讲解了

注意:引用vue、vue-resource,可以下载到本地引用,也可以直接引用cndjs官网上的,当然也可以使用npm下载安装

<body>
    <div class="searchBox" id="app">
        <div class="search-wrapper">
            <input class="searchInput" type="text">
            <button>百度一下</button>
        </div>
        <ul>
            <li>这里是数据列表</li>
        </ul>
        <p>暂无数据...</p>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
</html>

2 实例化vue

简单的实例化一个vue,然后el就直接绑定到#app上面就是了,这里有个坑:不能绑定在body或者html上,否则会没效果,就绑定body里面的一个div上就好了。

data里面用到两个数据,一个searchList用来存储百度搜索请求来的数据,一个t1用来双向绑定输入框里面的内容,我们将数据也渲染到页面上,当然要通过输入值调用get方法获取百度数据,接着往下看...

<body>
    <div class="searchBox" id="app">
        <div class="search-wrapper">
            <input class="searchInput" type="text" v-model="t1" @keyup="get">
            <button>百度一下</button>
        </div>
        <ul>
            <li v-for="value in searchList">{{value}}</li>
        </ul>
        <p v-show="searchList.length == 0">暂无数据...</p>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      searchList: [
![`G]W$@HOKPLJBZ]T~K05}`G.png](http://upload-images.jianshu.io/upload_images/6756377-a56aeb2b447f2a4c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)
],
      t1: ''
    },
    methods: {
      get: function() {
        
      }
    }
  })
</script>
</html>

3 获取百度数据

通过http跨域请求百度搜索数据,再赋给之前我们data数据里面的searchList渲染到页面,这样当输入一个值的时候就会跟新下面弹出的列表了,附上效果图

这里百度请求的路径可以在百度首页f12调试,点击Network,复制请求路径然后进行删减后:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su

methods: {
      get: function() {
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域请求数据
            params: {
                wd: this.t1//输入的关键词
            },
            jsonp: 'cb'//这里是callback
        }).then((res) => {//请求成功回调,请求来的数据赋给searchList数组
            this.searchList = res.body.s
        },(res) => {//失败显示状态码
            alert(res.status)
        })
      }
    }
输入a效果图

3 实现按上下键选择搜索内容

很显然给输入框添加按上下键的事件keydown.downkeydown.up,我们现在添加一个数据now用来保存当前所选中的值,按上键now值++反之则--;再给选择项添加.active类使其背景变成灰色,当v-for循环的索引值index==当前now值就给这个列表项加上类名active(灰色背景标记)。

此处有几个需要注意的地方:
1. 按上键的时候光标会移动到输入值的前面,这是默认事件导致的,所以要在keydown.up后面加上.prevent清除默认事件
2. 上下选择的时候选中的值肯定是要赋给输入框的值的,但是每次按上下键的时候又会触发之前的keyup事件,所以这里要判断按下的键是不是上下键keyup="get($event)" ,if(ev.keyCode == 38 || ev.keyCode == 40 )return;

<body>
    <div class="searchBox" id="app">
        <div class="search-wrapper">
            <input class="searchInput" type="text" v-model="t1" @keyup="get($event)" @keydown.down="next" @keydown.up.prevent="last">>
            <button>百度一下</button>
        </div>
        <ul>
            <li v-for="(value, index) in searchList" :class="{active: index == now}">{{value}}</li>
        </ul>
        <!-- <p v-show="searchList.length == 0">暂无数据...</p> -->
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      searchList: [],//搜索弹出列表
      t1: '',//输入框里面的值
      now: -1//输入框里面的值的索引,0为列表第一项
    },
    methods: {
      get: function(evt) {
        if(evt.keyCode == 38 || evt.keyCode == 40) return
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域请求数据
            params: {
                wd: this.t1//输入的关键词
            },
            jsonp: 'cb'//这里是callback
        }).then((res) => {//请求成功回调,请求来的数据赋给searchList数组
            this.searchList = res.body.s
        },(res) => {//失败显示状态码
            alert(res.status)
        })
      },
      next: function() {//向下选择
        this.now ++
        if(this.now == this.searchList.length){//判断是否超出
          this.now = 0
        }
        this.t1 = this.searchList[this.now]
      },
      last: function() {//向上选择
        this.now --
        if(this.now < 0){
          this.now = this.searchList.length -1
        }
        this.t1 = this.searchList[this.now]
      }
    }
  })
</script>
</html>

4 最后一步 回车实现搜索

也就是判断当按下的键为enter的时候跳转到搜索页keyCode == 13,键码值(keyCode)可以百度一下。

百度搜索页面的地址也是同上,搜索之后f12—>Network—>js复制地址,删减之后变成 https://www.baidu.com/s?wd="搜索值", 再用window.open()跳转

if (evt.keyCode == 13) {
    window.open('https://wwww.baidu.com/s?wd=' + this.t1)
    this.t1 = ''
}

5 附加 鼠标点击选择跳转

li添加一个鼠标点击事件点击相应的li获取其索引index赋给now同时将对应的值赋给t1再跳转

searchLink: function(index) {//鼠标点击跳转
        this.t1 = this.searchList[index]
        this.now = index
        window.open('https://www.baidu.com/s?wd=' + this.t1)
        this.t1 = ''
      }

最后给上效果访问地址:http://www.lzsfe.cn/project/baidu ,最近用Vue写了一个简单的个税计算器,喜欢的可以看看 https://www.lzsfe.cn

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242

推荐阅读更多精彩内容