vue实现翻译接口
使用 Vue 实现翻译接口
安装 Axios
在 Vue 项目中安装 Axios 用于发送 HTTP 请求：
npm install axios配置翻译服务
选择一个翻译 API 服务，例如 Google Translate API、百度翻译 API 或 Microsoft Translator API。以百度翻译 API 为例，注册并获取 API 密钥。
创建翻译服务文件
在 src 目录下创建 services/translate.js 文件：
import axios from 'axios';
const BAIDU_TRANSLATE_API = 'https://fanyi-api.baidu.com/api/trans/vip/translate';
const APP_ID = 'YOUR_APP_ID';
const SECRET_KEY = 'YOUR_SECRET_KEY';
export const translateText = async (text, from = 'auto', to = 'en') => {
const salt = Date.now();
const sign = md5(APP_ID + text + salt + SECRET_KEY);
const response = await axios.get(BAIDU_TRANSLATE_API, {
params: {
q: text,
from,
to,
appid: APP_ID,
salt,
sign,
},
});
return response.data.trans_result[0].dst;
};
function md5(string) {
// 实现 MD5 加密或使用 crypto-js 库
return require('crypto-js/md5')(string).toString();
}在 Vue 组件中使用
在 Vue 组件中导入并使用翻译服务：
<template>
<div>
<input v-model="inputText" placeholder="输入要翻译的文本" />
<button @click="handleTranslate">翻译</button>
<p>翻译结果: {{ translatedText }}</p>
</div>
</template>
<script>
import { translateText } from '@/services/translate';
export default {
data() {
return {
inputText: '',
translatedText: '',
};
},
methods: {
async handleTranslate() {
if (!this.inputText) return;
this.translatedText = await translateText(this.inputText, 'auto', 'en');
},
},
};
</script>添加加载状态
优化用户体验，添加加载状态：
<template>
<div>
<input v-model="inputText" placeholder="输入要翻译的文本" />
<button @click="handleTranslate" :disabled="isLoading">
{{ isLoading ? '翻译中...' : '翻译' }}
</button>
<p>翻译结果: {{ translatedText }}</p>
</div>
</template>
<script>
import { translateText } from '@/services/translate';
export default {
data() {
return {
inputText: '',
translatedText: '',
isLoading: false,
};
},
methods: {
async handleTranslate() {
if (!this.inputText) return;
this.isLoading = true;
try {
this.translatedText = await translateText(this.inputText, 'auto', 'en');
} catch (error) {
console.error('翻译失败:', error);
} finally {
this.isLoading = false;
}
},
},
};
</script>使用环境变量
将敏感信息存储在环境变量中，创建 .env 文件：
VUE_APP_BAIDU_APP_ID=YOUR_APP_ID
VUE_APP_BAIDU_SECRET_KEY=YOUR_SECRET_KEY更新 translate.js：
const APP_ID = process.env.VUE_APP_BAIDU_APP_ID;
const SECRET_KEY = process.env.VUE_APP_BAIDU_SECRET_KEY;
