vue调用百度翻译API

徐自红

已于 2023-07-29 01:57:16 修改

阅读量790

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-29 01:54:47 首次发布

本文链接：https://blog.csdn.net/qq_46561492/article/details/131206475

版权

vue3实现语言实时切换，这里用到的是百度翻译

1、在百度翻译平台中注册账号后申请百度APP ID 与密钥

网址：https://api.fanyi.baidu.com/

在这里插入图片描述

文档：https://api.fanyi.baidu.com/doc/21

在这里插入图片描述

2、安装

npm i -S js-md5

npm i vue-jsonp -S

3、代码实现

template

    <el-input type="text" v-model="state.zhStr" style="width:300px;margin-right:10px" />
    <el-select v-model="state.language">
        <el-option value="zh" label="中文"></el-option>
        <el-option value="en" label="英文"></el-option>
        <el-option value="cht" label="繁体"></el-option>
        <el-option value="kor" label="韩语"></el-option>
    </el-select>
    <el-button type="primary" @click="toEn">翻译</el-button>
    <p>{{ state.enStr }}</p>

script

const state = reactive({
    zhStr: '',
    enStr: '',
    language: ''
});
const toEn = () => {
    const url = 'https://api.fanyi.baidu.com/api/trans/vip/translate';
    const appid = 'XXXX';//appid
    const salt = suijishu();
    const secretKey = 'XXXXX';//秘钥
    let str = appid + state.zhStr + salt + secretKey
    let sign = md5(str)
    jsonp(url, {
        q: state.zhStr,
        from: 'auto',
        to: state.language,
        appid: appid,
        salt: salt,
        sign: sign,
    }).then(res => {
        state.enStr = res.trans_result[0].dst
    }).catch(err => {
        console.log('err', err);
    })
}
const suijishu = () => {
    var Randnum = '';
    for (var i = 0; i < 10; i++) {
        Randnum += Math.floor(Math.random() * 10);
    };
    return Randnum
}