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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
jquery操作select大全
Apr 25 Javascript
jsPDF导出pdf示例
May 02 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
js时间控件只显示年月
Jan 08 Javascript
vue组件实现文字居中对齐的方法
Aug 23 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python命令行参数用法实例分析
2019/06/25 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
好邻里事迹材料
2014/01/16 职场文书
大学生创业感言
2014/01/25 职场文书
运动会广播稿400字
2014/01/25 职场文书
小学生自我评价范文
2014/01/25 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
三峡人家导游词
2015/01/31 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers