这两天由于学习需要，需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口，不会没关系，发挥我们强大的学习能力，都不是事，学习了半天基本也就可以初级上手了，写篇随笔记录下来，方便以后回顾。当然童鞋们有更好的意见的请留言，一起学习进步。

　　本次demo实现的是简单的百度搜索页面，用到了vue和百度接口，采用了单页实现，没有使用vue-cli。最初，要用vue实现接口功能我很懵，就去找资料查阅，网上的资料乱七八糟，bug满篇。最后自己借鉴“前人”的经验，在修改了所有bug，又完善了一些用户体验后，一个简单的百度搜索界面出来了。今天废话有点多。可能是开学一个月了有点烦躁。话不多说，开门见山！

　　vue实例的建立挂载这里不多讲，可以去官网看文档。首先看<body>最终布局：下图

　　

最外层的<div>作为根元素挂载vue实例，不能有兄弟标签。第二个<div>标签作为输入、点击的div，里面包含一个<input>、<button>.

input双向绑定了“t1”作为关键词输入，接着绑定了三个监听事件，get函数是获取接口以及返回数据、判断键盘事件的重要函数，keydown.down和up是解决我们输入关键词后得到了一连串的相关搜索数据显示在屏幕上的时候，需要用到上下键去选择我们需要的信息，并且带有简单的动画效果，即上下键选中哪个关键词，该词条就会显示为灰色以示提醒。button按钮添加了handleClick事件，虽然有点鸡肋（谁会去点击搜索呢，都是直接enter键），但button总不能啥都不干吧？输入关键词后，百度api为我们找的了一系列相近词条，得到这些词条，再把她们显示在搜框下部，这里用循环<li>来实现，并且动态绑定li的CSS样式。在给li添加了点击事件，用鼠标点击时，直接跳转百度该词条。接着上图：

　　

　　data里面提前配置了需要用到的数据，searchList保存api返回的相近词条、t1 为输入的关键词、now用作li的动态样式，确定哪一个词是当前选中的词条、index初始的Li索引值，用作鼠标点击下拉的某个词条时，可以明确得到该词条。继续上图：

　　

重点是 $http.jsonp()方法，完美解决了跨域请求数据。不过本章篇幅有限，不多讲，可以自己看文档理解。触发get后，进行一个异步回调，回调的结果，若成功，请求来的数据赋给searchList数组保存，失败则报错。（res.body.s是数据接口中的一个数组）。再判断键盘事件，点击的是enter（键盘码13），打开百度窗口并带上关键词“t1”，若键盘事件是Backspace（键盘码8），直接将now赋值-1，这个我最后修改bug时添加的，因为当关键词不符合我们预期，用户进行回删时，下拉相近词条已经变化，但我们的灰色选中条却没变化，导致input输入框中的内容与灰色选中条内容不符，故回删时，重新初始now的值为-1，配合下图的 now++，当now+1变为0时，刚好对应searchList数组中的第一条数据。看图：

　　

原理大同小异，上下键的选择就是控制了now的值，然后把seachList[now]的值在赋给关键词“t1”，达到选中框和input中的关键词一致的效果。searchLink函数从<li>那里带回来了当前li元素的index，利用index得到关键词，进行接口调用，（接口可以在百度->f12->network中找到），最后button事件，handleClick和input以及li没直接关联，所以也最简单，直接拿到“t1”就可以了。

　作者博客：https://home.cnblogs.com/u/fanghl/

　码字不易，相互理解，本着分享知识的乐趣，转载请注明出处！！

最后，上张图看下效果：

上下键（第二张图）的效果。欢迎留言共同谈论。夜深了，码字容易影响舍友睡觉，获取接口以及跨域请求（$http.jsonp()）改天在单独总结。

　作者博客：https://home.cnblogs.com/u/fanghl/

　码字不易，相互理解，本着分享知识的乐趣，转载请注明出处！！

　　

Vue调用百度接口做百度搜索的更多相关文章

  1. python 调用百度接口 做人脸识别

    操作步骤差不多,记得要在百度AIPI中的控制台中创建对应的工单 创建工单成功后 会生成两个key  这个两个key是要生成tokn 用 这里大家可以用 def函数 将token返回 供下面的接口使用 ...

  2. 解决Vue调用springboot接口403跨域问题

    最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...

  3. vue 调用第三方接口配置

    1.配置proxyTable 3.调用接口,将接口地址替换为配置的‘/api’

  4. vue调用支付接口

    html: <div class="paymentHtml" v-html="paymentHtml"></div> script: d ...

  5. Python调用百度接口（情感倾向分析）和讯飞接口（语音识别、关键词提取）处理音频文件

    本示例的过程是: 1. 音频转文本 2. 利用文本获取情感倾向分析结果 3. 利用文本获取关键词提取 首先是讯飞的语音识别模块.在这里可以找到非实时语音转写的相关文档以及 Python 示例.我略作了 ...

  6. Android学习笔记之使用百度地图实现Poi搜索

    PS:装个系统装了一天.心力憔悴.感觉不会再爱了. 学习内容: 1.使用百度Map实现Poi搜索. 2.短串分享 3.在线建议查询   百度地图的研究也算是过半了.能够实现定位,实现相关信息的搜索,实 ...

  7. 百度和 Google 的搜索技术是一个量级吗？

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:Kenny Chao 链接:http://www.zhihu.com/question/22447908/answer/2 ...

  8. php获取ios或android通过文件头(header)传过来的坐标，通过百度接口获取具体城市和地址，并存入到session中。

    首先,在function.php方法文件中封装一个获取header头文件的方法. if (!function_exists('getallheaders')) { function getallhea ...

  9. 百度地图API地点搜索-获取经纬度

    分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...

随机推荐

  1. JavaScript中各种对象之间的关系

    上图: 此外,补充一下图中用到的概念: 1.内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动 ...

  2. 十、无事勿扰，有事通知（1）——NSNotification

    概述 很久很久以前,有一只菜鸟正在美滋滋的撸着他的嵌入式C代码.然而有一天,老板对菜鸟说:“别撸C了,从现在开始你就写swift开发ios了.”菜鸟一脸懵逼,但还是照做了. 又有一天,菜蛋谄媚的对菜鸟 ...

  3. ubuntu12.04下编译Linux tina 2.1/android经验

    用的是osboxes下的vdi. 编译Linux 1. 不能在root用户下操作 2. 执行 make kernel_menuconfig 报错,需要 apt-get install zlib1g z ...

  4. Linux平台 Oracle 18c RAC安装Part3：DB配置

    四.DB(Database)配置 4.1 解压DB的安装包 4.2 DB软件配置 4.3 ASMCA创建磁盘组 4.4 DBCA建库 4.5 验证crsctl的状态 Linux平台 Oracle 18 ...

  5. JS获取盒模型对应的宽高

    ## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...

  6. Alpha阶段敏捷冲刺日志的集合贴

    敏捷冲刺日志的集合贴 Day1(4.17):http://www.cnblogs.com/software-teamwork/p/8861426.html Day2(4.20):http://www. ...

  7. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  8. qt 实现的电视遥控系统，如何让qt响应来自遥控器的按键信息？

    结帖率 60% 如题:目前在做一个项目,使用qt实现一个类似于机顶盒的遥控系统,那么关键的问题来了,如何让qt响应遥控器的按键信息呢? 应该分两步吧:1.搭载qt的终端接收来自遥控器的按键信息,并解析 ...

  9. 【winform】listbox 列表

    一.Item 一个ListBox是由一个个的Item项组成的 1.向下添加Item lstResult.Items.Add("***" + PostWebRequest(cbxUr ...

  10. topcoder srm 590 div1 (max_flow_template)

    problem1 link 对于每一个,找到其在目标串中的位置,判断能不能移动即可. problem2 link 如果最后的$limit$为$11=(1011)_{2}$,那么可以分别计算值为$(10 ...