基于百度通用翻译API的在线翻译页面
百度通用翻译API实现在线翻译界面
前期准备
- 注册账号：api.fanyi.baidu.com
- 申请百度通用翻译API服务
- 记住appid以及key（后面用的上）
- 准备一个MD5算法
观看文档学习使用规则
文档地址：http://api.fanyi.baidu.com/product/113
接入的API地址：https://fanyi-api.baidu.com/api/trans/vip/translate
输入参数
| 字段名 | 类型 | 是否必填 | 描述 | 备注 |
|---|---|---|---|---|
| q | string | 是 | 请求翻译query | UTF-8编码 |
| from | string | 是 | 翻译源语言 | 可设置为auto |
| to | string | 是 | 翻译目标语言 | 不可设置为auto |
| appid | string | 是 | APPID | 可在管理控制台查看 |
| salt | string | 是 | 随机数 | 可为字母或数字的字符串 |
| sign | string | 是 | 签名 | appid+q+salt+密钥的MD5值 |
注意：
- 待翻译文本（q）需为 UTF-8 编码
- 在生成签名拼接 appid+q+salt+密钥 字符串时，q 不需要做 URL encode，在生成签名之后，发送 HTTP 请求之前才需要对要发送的待翻译文本字段 q 做 URL encode；
- 如遇到报 54001 签名错误，请检查您的签名生成方法是否正确，在对 sign 进行拼接和加密时，q 不需要做 URL encode，很多开发者遇到签名报错均是由于拼接 sign 前就做了 URL encode；
- 在生成签名后，发送 HTTP 请求时，如果将 query 拼接在URL上，需要对 query 做 URL encode。
输出参数
| 字段名 | 类型 | 描述 | 备注 |
|---|---|---|---|
| from | string | 源语言 | 返回用户指定的语言，或者自动检测出的语种（源语言设为auto时） |
| to | string | 目标语言 | 返回用户指定的目标语言 |
| trans_result | array | 翻译结果 | 返回翻译结果，包括src和dst字段 |
| trans_result.*.src | string | 原文 | 原文 |
| trans_result.*dst | string | 译文 | 译文 |
常见语种列表
| 名称 | 代码 | 名称 | 代码 | 名称 | 代码 |
|---|---|---|---|---|---|
| 自动检测 | auto | 中文 | zh | 英语 | en |
| 粤语 | yue | 文言文 | wyw | 日语 | jp |
| 韩语 | kor | 法语 | fra | 西班牙语 | spa |
| 泰语 | th | 阿拉伯语 | ara | 俄语 | ru |
| 葡萄牙语 | pt | 德语 | de | 意大利语 | it |
| 希腊语 | el | 荷兰语 | nl | 波兰语 | pl |
| 保加利亚语 | bul | 爱沙尼亚语 | est | 丹麦语 | dan |
| 芬兰语 | fin | 捷克语 | cs | 罗马尼亚语 | rom |
| 斯洛文尼亚语 | slo | 瑞典语 | swe | 匈牙利语 | hu |
| 繁体中文 | cht | 越南语 | vie |
错误码列表
| 错误码 | 含义 | 解决方案 |
|---|---|---|
| 52000 | 成功 | |
| 52001 | 请求超时 | 请重试 |
| 52002 | 系统错误 | 请重试 |
| 52003 | 未授权用户 | 请检查appid是否正确或者服务是否开通 |
| 54000 | 必填参数为空 | 请检查是否少传参数 |
| 54001 | 签名错误 | 请检查您的签名生成方法 |
| 54003 | 访问频率受限 | 请降低您的调用频率，或进行身份认证后切换为高级版/尊享版 |
| 54004 | 账户余额不足 | 请前往管理控制台为账户充值 |
| 54005 | 长query请求频繁 | 请降低长query的发送频率，3s后再试 |
| 58000 | 客户端IP非法 | 检查个人资料里填写的IP地址是否正确，可前往开发者信息-基本信息修改 |
| 58001 | 译文语言方向不支持 | 检查译文语言是否在语言列表里 |
| 58002 | 服务当前已关闭 | 请前往管理控制台开启服务 |
| 90107 | 认证未通过或未生效 | 请前往我的认证查看认证进度 |
代码实现
实现效果
实现代码
<template>
<div class="translate-box">
<div class="input-box">
<el-input
class="input-text"
type="textarea"
resize="none"
:rows="15"
v-model="textarea"
placeholder="请输入需要翻译的内容"
maxlength="350"
show-word-limit
>
</el-input>
<el-select v-model="value" placeholder="请选择翻译语言">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="output-box">
<el-input
class="output-text"
readonly
resize="none"
type="textarea"
:rows="15"
v-model="result"
placeholder="翻译结果">
</el-input>
<el-button plain class="btn" @click="goTranslate()">翻译</el-button>
</div>
</div>
</template>
<script>
import MD5 from "../utils/MD5"
import axios from 'axios'
export default {
name:"Translate",
data () {
return {
textarea: '',
result: '',
value: '',
options: [
{
value: 'zh',
label: '中文'
},
{
value: 'en',
label: '英语'
},
{
value: 'jp',
label: '日语'
},
{
value: 'fra',
label: '法语'
},
{
value: 'th',
label: '泰语'
},
{
value: 'de',
label: '德语'
},
{
value: 'it',
label: '意大利语'
},
{
value: 'el',
label: '希腊'
},
]
}
},
methods:{
translate(str) {
var appid = '20220519001221658'//填写注册API获取的appid
var key = '5vAYCqi7oPtHAHE3Vh_8'//填写注册API获取的key
var salt = (new Date).getTime()//用于生成随机数
var from = 'auto'//待翻译的原始语言
var to = this.value//你所选择翻译的语言
var mix = appid + str + salt + key
var sign = MD5(mix)//通过MD5算法生成sign
axios.get('http://localhost:8080/api1',{ //这里是API接入地址
dataType: 'jsonp',
params: {
q: str,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
}).then(res=>{
console.log(res.data);
this.result = res.data.trans_result[0].dst
});
},
goTranslate() {
if(this.textarea==''){
alert("请输入数据")
return;
}
if(this.value==''){
alert("请选择翻译语言")
return;
}
this.translate(this.textarea)
},
}
}
</script>
