vue实现百度翻译API调用翻译数组对象

最新推荐文章于 2023-07-29 01:54:47 发布

铭泽金帝

最新推荐文章于 2023-07-29 01:54:47 发布

阅读量644

点赞数 2

分类专栏： vue 百度翻译文章标签： js vue jsonp 百度

本文链接：https://blog.csdn.net/m0_46559477/article/details/119421459

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

百度翻译

1 篇文章 0 订阅

订阅专栏

import md5 from 'js-md5';
              //需要翻译的数据格式
			  this.routerPropsUs = {
			    "trackDetails":[
			     { "time":"2020-05-08 09:02", "event":"Out for Delivery", "eventCity":"NORTH WALES", "eventState":"PA" },
			     { "time":"2020-05-08 08:51", "event":"Arrived at Post Office", "eventCity":"NORTH WALES", "eventState":"PA" },
			     { "time":"2020-05-08 04:08", "event":"Departed USPS Regional Facility", "eventCity":"PHILADELPHIA PA NETWORK DISTRIBUTION CENTER", "eventState":"" },
			     { "time":"2020-05-07 22:59", "event":"Arrived at USPS Regional Facility", "eventCity":"PHILADELPHIA PA NETWORK DISTRIBUTION CENTER", "eventState":"" }
			     ]}
               var routeArr =  this.routerPropsUs.trackDetails || []
               var old = []; 
               var q='';
               //遍历数据将数组拼接成字符串
               for( let i = 0; i <  routeArr.length; i++ ){
                 for(var attr in routeArr[i]) {
                   old.push(attr)
                   routeArr[i][attr] == '' ? routeArr[i][attr] = ';': routeArr[i][attr]
                   q = q + routeArr[i][attr]+","
                 }
               }
               var appid = '20210714000887853';  //你的appid 需要注册申请
               var key = 'mxaM9IlpEOtBvJpCkc84'; //开发者秘钥
               var salt = (new Date).getTime();  //时间戳或者随机数
               var from = 'en';                  //翻译源语言
               var to = 'zh';                    //翻译的目标语言
               var str1 = appid + q + salt +key; //appid+q+salt+密钥的MD5值
               var sign = md5(str1);             //签名
               let data = {
                 q,
                 appid,
                 salt,
                 from,
                 to,
                 sign
               }
               //这里使用vue-json实现跨域
               npm i -S vue-jsonp
               //main.js中引入vue-jsonp
               import {VueJsonp} from 'vue-jsonp'
               Vue.use(VueJsonp)
               //调用接口
               this.$jsonp("https://fanyi-api.baidu.com/api/trans/vip/translate", data).then((r)=> {
                 //返回的数据字符串格式
                 var transResult = r.trans_result[0].dst;
                 //将字符串转成数组
                 transResult = transResult.split("，")
                 //删除最后一个空的数组
                 transResult.pop()
                 var setArr = []
                 this.fanyi(transResult,setArr)
                 this.fanyiProps = setArr
               })
             }
            //数据处理函数
            fanyi(val,arr) {
		     if(val.length){
	          let arrData = val.splice(0,4)
	          let obj ={
	            time:arrData [0],
	            event:arrData [1],
	            eventCity:arrData [2],
	            eventState:arrData [3]
	          }
	          arr.push(obj)
	          this.fanyi(val,arr)
	        }else{
	          return
	        }
	      }