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]);
              }

            })
        }
      }
    }

 

获取详细代码请加 公众号 回复 ‘翻译’