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

输入参数

注意：

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。

输出参数

常见语种列表

错误码列表

代码实现

实现效果

实现代码

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