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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
js 函数调用模式小结
Dec 26 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
在python中实现对list求和及求积
2018/11/14 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
党风廉设责任书
2014/04/16 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
欢迎横幅标语
2014/06/17 职场文书
课外活动总结
2015/02/04 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python