1. 程式人生 > >vue.js 呼叫 有道翻譯API 實現翻譯功能

vue.js 呼叫 有道翻譯API 實現翻譯功能

有道智雲  註冊使用者資訊並拿到 有道翻譯的 應用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]);
              }

            })
        }
      }
    }