vue调用谷歌的Custom Search JSON API实现搜索

文章目录

• • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结

概要

调用Custom Search JSON API接口实现谷歌浏览器一样的搜索,在vue项目中实现,前端框架为vue-elemetUI

整体架构流程

1.去google.com官网网站上注册一个账号

可能会出现手机号码无法注册,网上有许多解决方法都不行,我是买的

2.去创建自己的引擎应用

https://programmablesearchengine.google.com/controlpanel/create?hl=zh-cn

3.创建引擎成功后去控制台获取cx与api key;

4.编写前端组件

5.axios发生请求接口

<script>
import axios from 'axios'
export default {
  name: 'search',
  data(){
    return{
      items : null,
      itemsImg : null,
      query:'',
      querySearch : false,
      queryImgSearch : false,
    }
  },
  methods : {
    async search(start,img=undefined){
      do{
        let data = await axios.get('https://customsearch.googleapis.com/customsearch/v1?cx=YOUR_CX_CODE&q='+this.query+'&key=YOUR_API_KEY&start='+(img ? start*10:start)+'&num=10')
        .then( res=>{
          if(img){start++}
          return res.data.items
        })
        this.queryImgSearch=false
        this.querySearch=true
        this.items=null
        this.items=data
      }
      while(img && start<5)
      scroll(0, 0)
    },
  }
}
</script>

实现效果