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


Posted in Javascript onSeptember 13, 2019

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

然后直接开始吧

在需要翻译的地方做上标记,这里用的是添加名为"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;
 },

创建一个翻译函数

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery1.6 使用方法三
Nov 23 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue实现底部菜单功能
Jul 24 Javascript
js使用formData实现批量上传
Mar 27 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 #Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 #Javascript
深入了解JavaScript 防抖和节流
Sep 12 #Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 #Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 #Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 #Javascript
layer iframe 设置关闭按钮的方法
Sep 12 #Javascript
You might like
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python多线程实例教程
2014/09/06 Python
跟老齐学Python之重回函数
2014/10/10 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python pip使用超时问题解决方案
2020/08/03 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
什么是继承
2013/12/07 面试题
心理健康心得体会
2014/01/02 职场文书
安全技术说明书
2014/05/09 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
vue使用element-ui按需引入
2022/05/20 Vue.js