vue.js 呼叫 有道翻譯API 實現翻譯功能
阿新 • • 發佈:2019-01-23
在 有道智雲 註冊使用者資訊並拿到 有道翻譯的 應用ID 和 應用金鑰 (怎麼註冊,網站都有)
呼叫 API http地址:
http://openapi.youdao.com/api?q=需要翻譯的文字&appKey=應用ID&salt=隨機數&from=源語言&to=目標語言&sign=標籤
//標籤=md5(應用ID+需要翻譯的文字+隨機數+應用金鑰)
vue專案使用
首先引用兩個元件 js-md5 和 vue-resource,分別用於 md5加密 和 http請求
import VueResource from 'vue-resource' import md5 from 'js-md5' Vue.use(VueResource); Vue.prototype.$md5 = md5;
開始向 有道翻譯提交請求
export default { name: "fan", data(){ return{ q:"", //需要翻譯的文字 from:'', //源語言 to:'', //目標語言 appKey:'應用ID', //應用 ID salt:2, //隨機數(自己隨便寫個數) secret_key:'金鑰', //金鑰 Translation_information:[] //有道返回的翻譯結果 } }, components:{ outsput, transform }, methods:{ addinfor:function(infors,lang){ this.q=infors; this.to=lang; //利用元件vue-resource做 http請求,最後的 sign 要做MD5處理 這裡的地址做了跨域處理 this.$http.get('/youdao/api/api?q='+this.q+'&appKey='+this.appKey+'&salt='+this.salt+'&from='+this.from+'&to='+this.to+'&sign='+this.$md5(this.appKey+this.q+this.salt+this.secret_key)) .then((data) =>{ //data是有道API返回的結果物件 if(data.body.basic!=null){ //下面看不懂可以試著輸出 data 物件看一下就懂了 this.Translation_information=[]; this.Translation_information=data.body.basic.explains; //詞彙的基本釋義(輸入正確時不一定有結果) this.Translation_information.splice(0,0,data.body.translation[0]); //翻譯結果(輸入正確時必有結果) }else{ this.Translation_information=[]; this.Translation_information.push(data.body.translation[0]); } }) } } }