百度通用翻译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值

注意：

  1. 待翻译文本（q）需为 UTF-8 编码
  2. 在生成签名拼接 appid+q+salt+密钥 字符串时，q 不需要做 URL encode，在生成签名之后，发送 HTTP 请求之前才需要对要发送的待翻译文本字段 q 做 URL encode；
  3. 如遇到报 54001 签名错误，请检查您的签名生成方法是否正确，在对 sign 进行拼接和加密时，q 不需要做 URL encode，很多开发者遇到签名报错均是由于拼接 sign 前就做了 URL encode；
  4. 在生成签名后，发送 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

认证未通过或未生效

请前往我的认证查看认证进度

代码实现

实现效果

代码翻译软件lua_API

实现代码

<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>