建站
咨詢
售后
建站咨詢
新聞中心
首先說(shuō)下，本人為在校大三狗一只，缺少實(shí)戰(zhàn)開(kāi)發(fā)經(jīng)驗(yàn)，然后用語(yǔ)什么的也不標(biāo)準(zhǔn)，就按我自己的想法寫(xiě)的，有什么不對(duì)的地方歡迎指導(dǎo)指導(dǎo)哈
10年的天寧網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整天寧建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“天寧網(wǎng)站設(shè)計(jì)”,“天寧網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
然后直接開(kāi)始吧
在需要翻譯的地方做上標(biāo)記，這里用的是添加名為"text-dom"的class的方法。比如：
原文：
定義儲(chǔ)存數(shù)據(jù)的data
data() {
return {
before: {
q: "", //輸入的原文
to: "" //選擇目標(biāo)語(yǔ)言
}, //保存初始數(shù)據(jù)
appid: "2019*********2613", //百度翻譯開(kāi)放平臺(tái)的個(gè)人AppId
salt: "14*******88", //隨機(jī)數(shù)
q: "", //請(qǐng)求翻譯文本
from: "aotu", //源語(yǔ)言
to: "en", //目標(biāo)語(yǔ)言
sign: "", //簽名
userkey: "y0Ly*********gJSAs", //百度翻譯開(kāi)放平臺(tái)的個(gè)人密匙
fyjg: "" //翻譯結(jié)果
};
},
頁(yè)面渲染完成時(shí)，獲取頁(yè)面上的待翻譯原文內(nèi)容
mounted() {
/* 獲取頁(yè)面所有原文本存放到數(shù)組 */
var textDomArr = new Array();
$(".text-dom").each(function() {
textDomArr.push($(this).text());
});
/* 拼接所有原文本，并用@符號(hào)分隔*/
var textAllBefore = textDomArr.join("@");
/* 清除原文本其他符號(hào) */
var textAll = textAllBefore.replace(/[：:\|\\\*^%$#\-]/g, "");
/* 儲(chǔ)存原文本到data中 */
this.before.q = textAll;
},
創(chuàng)建一個(gè)翻譯函數(shù)
methods: {
fanyi() {
/* 待翻譯文本 傳入url */
this.q = this.before.q;
/* 從頁(yè)面獲取選擇的目標(biāo)語(yǔ)言 傳入url */
this.to = this.before.to;
/* md5加密，生成簽名 */
this.sign = md5(this.appid + this.q + this.salt + this.userkey);
/* 對(duì)待翻譯字符做url編碼 */
this.q = encodeURIComponent(this.before.q);
/* 請(qǐng)求翻譯 */
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
)
/* 得到返回?cái)?shù)據(jù) */
.then(res => {
this.fyjg = res.data.trans_result[0].dst; //得到翻譯結(jié)果
/* 把翻譯結(jié)果分割成數(shù)組 */
var yiwenArr = new Array();
yiwenArr = this.fyjg.split("@");
//console.log(yiwenArr);
/* 用譯文替換頁(yè)面原文 */
var n = 0;
$(".text-dom").each(function() {
$(this).text(yiwenArr[n]);
n++;
});
});
}
}
html部分可以用select切換翻譯的目標(biāo)語(yǔ)言
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目：vuecli3調(diào)用百度翻譯API翻譯頁(yè)面的實(shí)現(xiàn)示例
分享地址：http://www.dlmjj.cn/article/gdeedg.html
