vue实现中英文切换功能

1、首先在百度翻译的开放平台中，获取属于自己的APPid，没有注册先注册

2、得到了这些基本信息后，需引入md5插件npm install --save js-md5

3、请求接口及对应参数

通用翻译API HTTP地址：http://api.fanyi.baidu.com/api/trans/vip/translate通用翻译API HTTPS地址：https://fanyi-api.baidu.com/api/trans/vip/translate

4、核心代码（注意：axios此处设置了代理，请查看本文评论区）

<template><div class="app box"><el-input type="text" v-model="zhStr" style="width:300px;margin-right:10px" /><el-button type="primary" @click="toEn">翻译</el-button><p>{{enStr}}</p></div>
</template>
<script>
import md5 from 'js-md5';
import axios from 'axios';
export default {   data(){return {zhStr: '',enStr: '',appid: '你的appid',userkey: '你的密钥',salt:parseInt(Math.random() * 1000000000),//随机数}},methods: {async toEn(){const str = `${this.appid}${this.zhStr}${this.salt}${this.userkey}`;const sign = md5(str);/* md5加密，生成签名 */const params = {q: this.zhStr,from: 'zh',to: 'en',appid: this.appid,sign,salt: this.salt}const res = await axios.get('/baidu/api/trans/vip/translate', {params});//此处设置了代理，请查看本文评论区console.log(res);}}
}
</script>

5、返回结果

注意：如果出现404的情况，请一定核实一下自己的密钥跟appid，我测试了是没有问题的，能够正常的翻译出来，还有就是代理的设置，以及MD5插件是否有下载，可以拿我案例代码测试通过了之后，再根据自己业务逻辑修改！！！

vue实现中英文切换功能相关推荐

后台管理系统vue-i18n中英文切换功能
一.vue-i18n是什么? 一款针对Vue.js 的国际化插件.把网站的所有需要中英转换的数据配置成中英文json文件,需要编写大量中英文对照表,适合于少量的固定翻译. 二.使用步骤 1.安装vue ...
vue项目中英文切换（多语言国际化）-- i18n插件的用法
1.安装 npm install vue-i18n --save 2.在main.js文件中: import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹,这里是引 ...
【vue】中英文切换（多语言国际化）
一.安装i18n插件 npm install vue-il8n@8.23.0 --save 二.创建语言包文件夹与配置 (1)index.js中 import Vue from 'vue' // 引入 ...
android中英文切换功能,Android APP 中英文切换
实习期间,师父要求做app的中英文切换,就顺便记录了下. 一.AndroidManifest.xml文件(清单文件) 在每个要切换语言的Activity下面添加: android:configChan ...
vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
android中英文切换功能,Android开发之中英文切换
这篇文章详细介绍了Android开发之中英文切换,文中穿插有实例代码和示例程序介绍的很详细,遇到同样问题的朋友可以参考一下,如果有更好的解决方法,请留言分享帮助更多的程序员. 首先配置文件的appli ...
中英文切换_王者荣耀：模拟战奖励一览，新增中英文切换，李白第二套星元来袭...
王者荣耀体验服在今日凌晨更新后新增了不少功能,比如模拟战加入了精灵机制,以及局内新增语言设置,另外李白继千年之狐后,又有一套皮肤加入"星计划",即李白团战精神皮肤敏锐之力将迎来星元 ...
xadmin在Django 1.11中的使用及中英文切换
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com xadmin是一个强大的替代django admin的管理后台,github地址为:https://g ...
js实现中英文切换（jquery.i18n.js）
jquery.i18n.js 实现中英文切换方法由于在公司官网所用到中英文切换功能,代码时js.jq写的.个人简单记录一下过程: 用的方法是 jquery.i18n.js. jquery.i18n ...

vue实现中英文切换功能

vue实现中英文切换功能相关推荐

最新文章

热门文章