HTML编写的百度页面搜索不了,不用写后台代码，vue教你写百度搜索

前言

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。以上是对vue官方的解释，通俗地说，vue就是一个比较容易上手，小巧的mvvm(Model-View-ViewModel的简写)框架，和angular类似，指令以v-xxx，一片html代码配合上json，再new出来vue实例。

官网:http://cn.vuejs.org/

手册： http://cn.vuejs.org/api/

百度搜索效果展示

无数据时

baiduSearch_1.png

有数据时

baiduSearch_2.png

部分代码演示

1.引入vue，这里加上了bootsrap前端框架写前端页面

baiduSearchCode_1.png

2.html代码绑定页面

baiduSearchCode_2.png

3.new一个实例，js绑定页面

new Vue({

el:"body",

data:{ myData:[], tl:'', now:-1//从头搜索 },

methods:{

get:function(ev){

//判断如果按上下键搜索，则不访问百度接口数据，只显示下拉列表数据

if(ev.keyCode==38||ev.keyCode==40)return;

//按enter键进入相应词汇百度搜索页面

if(ev.keyCode==13){

window.open('https://www.baidu.com/s?wd='+this.tl);

this.tl=''; }

//调用访问百度接口数据 this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.tl },{ jsonp:'cb'

}).then(function(res){

this.myData = res.data.s;

},function(res){ });

},changeDown:function(){

//判断如果循环超出了整个下拉列表，则从头开始循环

this.now++;

if(this.now==this.myData.length)this.now=-1;

this.tl=this.myData[this.now];

},changeUp:function(){

//判断如果循环超出了整个下拉列表，则从尾开始循环

this.now--;

if(this.now==-2)this.now=this.myData.length-1;

this.tl=this.myData[this.now];

},clickBaiDu:function(){

//点击“百度一下”进入相应词汇百度搜索页面

window.open('https://www.baidu.com/s?wd='+this.tl);} }

});

实现思路总结

1.编写一个百度搜索静态页面

2.初始化一个vue实例，将下拉列表置空

3.截取百度服务器接口，用jsonp的交互方式从接口中获取数据

4.循环下拉列表并将获取到的数据放入下拉列表中

5.用keydown.down事件实现按键盘下键选中下拉列表当前值并赋予其灰色背景样式

6.用keydown.up事件实现按键盘上键选中下拉列表当前值并赋予其灰色背景样式

7.当按键盘上下键选中下拉列表值时，将选中下拉列表值赋予搜索框。判断如果按上下键搜索，则不访问百度接口数据，搜索框只显示下拉列表数据

8.按enter键进入相应词汇百度搜索页面

9.点击“百度一下”进入相应词汇百度搜索页面

百度云盘链接

相信小伙伴们看完可能还会有不懂的地方，没关系，我把源代码分享出来供大家学习和讨论，http://pan.baidu.com/s/1mipB7AC 密码：95o1