微客导航 » 文章资讯 » vue cli3 调用百度翻译API翻译页面的实现示例

vue cli3 调用百度翻译API翻译页面的实现示例

2023-08-14 19:03:04 294

首先说下，本人为在校大三狗一只，缺少实战开发经验，然后用语什么的也不标准，就按我自己的想法写的，有什么不对的地方欢迎指导指导哈

然后直接开始吧

在需要翻译的地方做上标记，这里用的是添加名为"text-dom"的class的方法。比如：

原文：

定义储存数据的data

data(){
return{
before:{
q:"",//输入的原文
to:""//选择目标语言
},//保存初始数据
appid:"2019*********2613",//百度翻译开放平台的个人AppId
salt:"14*******88",//随机数
q:"",//请求翻译文本
from:"aotu",//源语言
to:"en",//目标语言
sign:"",//签名
userkey:"y0Ly*********gJSAs",//百度翻译开放平台的个人密匙
fyjg:""//翻译结果
};
},

页面渲染完成时，获取页面上的待翻译原文内容

mounted(){
/*获取页面所有原文本存放到数组*/
vartextDomArr=newArray();
$(".text-dom").each(function(){
textDomArr.push($(this).text());
});
/*拼接所有原文本，并用@符号分隔*/
vartextAllBefore=textDomArr.join("@");
/*清除原文本其他符号*/
vartextAll=textAllBefore.replace(/[：:\|\\\*^%$#\-]/g,"");
/*储存原文本到data中*/
this.before.q=textAll;
},

创建一个翻译函数

methods:{
fanyi(){
/*待翻译文本传入url*/
this.q=this.before.q;
/*从页面获取选择的目标语言传入url*/
this.to=this.before.to;
/*md5加密，生成签名*/
this.sign=md5(this.appid+this.q+this.salt+this.userkey);
/*对待翻译字符做url编码*/
this.q=encodeURIComponent(this.before.q);
/*请求翻译*/
this.axios
.get(
"/sell/api/trans/vip/translate"+
"?q="+
this.q+
"&from="+
this.from+
"&to="+
this.to+
"&appid="+
this.appid+
"&salt="+
this.salt+
"&sign="+
this.sign
)
/*得到返回数据*/
.then(res=>{
this.fyjg=res.data.trans_result[0].dst;//得到翻译结果

/*把翻译结果分割成数组*/
varyiwenArr=newArray();
yiwenArr=this.fyjg.split("@");
//console.log(yiwenArr);

/*用译文替换页面原文*/
varn=0;
$(".text-dom").each(function(){
$(this).text(yiwenArr[n]);
n++;
});
});
}
}

html部分可以用select切换翻译的目标语言


简体中文
繁体中文
粤语
英语
韩语
日语
法语

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue cli3 调用百度翻译API翻译页面的实现示例

热门推荐

随机推荐