其他分享
首页 > 其他分享> > 基于百度通用翻译API的在线翻译页面

基于百度通用翻译API的在线翻译页面

作者:互联网

百度通用翻译API实现在线翻译界面

前期准备

观看文档学习使用规则

文档地址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 认证未通过或未生效 请前往我的认证查看认证进度

代码实现

实现效果

image

实现代码

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


标签:翻译,string,value,label,API,appid,var,在线翻译,页面
来源: https://www.cnblogs.com/codesheepXK/p/16663562.html