vuecli3調用百度翻譯API翻譯頁面的實現示例

首先說下，本人為在校大三狗一只，缺少實戰(zhàn)開發(fā)經驗，然后用語什么的也不標準，就按我自己的想法寫的，有什么不對的地方歡迎指導指導哈

10年的天寧網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網營銷推廣的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同，自動調整天寧建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“天寧網站設計”,“天寧網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

然后直接開始吧

在需要翻譯的地方做上標記，這里用的是添加名為"text-dom"的class的方法。比如：

<div class="text-dom">原文：</div>

定義儲存數據的data

data() {
  return {
   before: {
    q: "", //輸入的原文
    to: "" //選擇目標語言
   }, //保存初始數據
   appid: "2019*********2613", //百度翻譯開放平臺的個人AppId
   salt: "14*******88", //隨機數
   q: "", //請求翻譯文本
   from: "aotu", //源語言
   to: "en", //目標語言
   sign: "", //簽名
   userkey: "y0Ly*********gJSAs", //百度翻譯開放平臺的個人密匙
   fyjg: "" //翻譯結果
  };
 },

頁面渲染完成時，獲取頁面上的待翻譯原文內容

mounted() {
  /* 獲取頁面所有原文本存放到數組 */
  var textDomArr = new Array();
  $(".text-dom").each(function() {
   textDomArr.push($(this).text());
  });
  /* 拼接所有原文本，并用@符號分隔*/
  var textAllBefore = textDomArr.join("@");
  /* 清除原文本其他符號 */
  var textAll = textAllBefore.replace(/[：:\|\\\*^%$#\-]/g, "");
  /* 儲存原文本到data中 */
  this.before.q = textAll;
 },

創(chuàng)建一個翻譯函數

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; //得到翻譯結果

     /* 把翻譯結果分割成數組 */
     var yiwenArr = new Array();
     yiwenArr = this.fyjg.split("@");
     //console.log(yiwenArr);

     /* 用譯文替換頁面原文 */
     var n = 0;
     $(".text-dom").each(function() {
      $(this).text(yiwenArr[n]);
      n++;
     });
    });
  }
 }

html部分可以用select切換翻譯的目標語言

<select v-model="before.to" @change="fanyi()">
    <option value="zh">簡體中文</option>
    <option value="cht">繁體中文</option>
    <option value="yue">粵語</option>
    <option value="en">英語</option>
    <option value="kor">韓語</option>
    <option value="jp">日語</option>
    <option value="fra">法語</option>
   </select>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網站標題：vuecli3調用百度翻譯API翻譯頁面的實現示例
轉載源于：http://muchs.cn/article16/gdeedg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網站設計公司、企業(yè)建站、搜索引擎優(yōu)化、網站制作、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務器托管