标签：翻译 string value label API appid var 在线翻译 页面

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。