vue.js 调用 有道翻译API 实现翻译功能
在有道智云注册用户信息并拿到有道翻译的应用ID和应用密钥(怎么注册,网站都有)调用API http地址:http://openapi.youdao.com/api?q=需要翻译的文本&appKey=应用ID&salt=随机数&from=源语言&to=目标语言&sign=标签//标签=md5(应用ID+需要翻译的文本+随
·
在有道智云 注册用户信息并拿到有道翻译的应用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]);
}
})
}
}
}
如果您有什么不明白的地方可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题
ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈
更多推荐
已为社区贡献9条内容
所有评论(0)