腳本之家服務器常用軟件

快捷導航

百度翻譯API使用詳細教程(前端vue+后端springboot)

更新時間：2024年02月18日 11:43:44 作者：THE?WHY

這篇文章主要給大家介紹了關于百度翻譯API使用的相關資料,百度翻譯API是百度面向開發(fā)者推出的免費翻譯服務開放接口,任何第三方應用或網站都可以通過使用百度翻譯API為用戶提供實時優(yōu)質的多語言翻譯服務,需要的朋友可以參考下

1.資格獲取

首先我們需要登錄百度翻譯開放平臺，獲取開發(fā)者資格：

訪問

百度翻譯開放平臺

然后進行注冊（如果有百度賬號的話可以直接登錄）

注冊成功后點擊“產品服務”：

跳轉到通用文本API界面：

在頁面底部點擊“立即使用”即可選擇服務進行使用

通用文本API有三種服務可供選擇：

個人用戶可以使用前兩種，高級版的使用需要個人認證（實名認證）

2.簡單使用

點擊“管理控制臺”，打開“開發(fā)者信息”界面：

即可看到你的APP ID和密鑰信息，在調用接口的時候需要用到；

點擊“我的服務”中的通用文本翻譯，即可看到服務使用情況及明細

如果對于翻譯的術語有特殊要求，可以點擊“我的語料庫”，并新建術語庫：

這樣我們設置的術語即可干預翻譯結果；

3.編程實現(xiàn)

百度翻譯開放平臺

前往以上網址查看通用翻譯API的開發(fā)文檔

3.1 前端代碼

開發(fā)環(huán)境：Vue.js + Uniapp

（uniapp快速上手：uni-app官網）

通過一個文本輸入框接受輸入內容，然后調用后端接口，進行翻譯：

<template>
  <view>
    <!--輸入框-->
		<uni-easyinput 
		type="textarea"  
		v-model="translate_source" 
		placeholder="請輸入想要翻譯的內容"
		suffixIcon="search"
		borderColor="grey"
		@input="input"></uni-easyinput>
  	<!--翻譯按鈕-->
  	<button type="primary" class="translate_button" @click="translate">開始翻譯</button>
    <!--翻譯內容展示-->
    <view style="margin-top: 50rpx;">
			<uni-section title="翻譯內容如下:" type="line" class="translate_line">
			<view class="translate_answer">
				<textarea disabled="true" :value="translated_content"></textarea>
			</view>
			</uni-section>
		</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				translate_source:"",
				translated_content:""
			}
		},
		methods: {
			translate()
			{
				var q = this.translate_source
				var from = "en"
				var to = "zh"
				
				var url = "http://localhost:8081/translate"
				if (q.length == 0)
				{
					uni.showModal({
						title:"錯誤!",
						content:"輸入內容不能為空!",
						complete() {
							this.translate_source = ""
						}
					})
				}
				else{
					let that = this
					uni.request({
						url:url,
						method:"POST",
						data:{
							q:q,
							from:from,
							to:to
						},
						success(e) {
							var result = e.data.trans_result[0].dst;
							that.translated_content = result;
						},
						fail(){
							uni.showModal({
								title:"錯誤!",
								content:"網絡錯誤!",
								complete() {
									this.translate_source = ""
								}
							})
						}
					})
				}
			}
		}
	}
</script>

需要傳往后端的請求參數(shù)有：

3.2 后端代碼

開發(fā)環(huán)境：springboot + Hutools

我使用的是正式版的idea，社區(qū)版的springBoot需要自己搭建，搭建教程可以自行搜索，需要使用正式版idea可以參考評論區(qū)的地址進行下載；

首先創(chuàng)建springBoot項目：

倉庫管理以及JDK版本視自己情況而定，本示例中用的是Maven倉庫，JDK17；

SpringBoot版本默認即可，可以勾選上Spring Web：

注意：3.1.0版本的springboot可能需要使用JDK17才行

使用Maven的話需要本地安裝maven，到file-settings-Mavens中查看是否有本地maven，如果需要修改的話改一下maven的路徑以及settings.xml配置文件的路徑；對于maven的安裝這里不再贅述，其他教程很多，如果遇到問題可以留言

其次如果遇到JDK版本的問題，可以打開file-project Structure，查看project和modules的JDK、SDK版本

要確保版本統(tǒng)一（因為如果安裝過多個版本的JDK，可能初始化的時候會有問題）

配置完成后可以啟動Application查看是否正常

然后在pom.xml文件中導入Hutools的依賴：

<dependency>
  <groupId>cn.hutool</groupId>
  <artifactId>hutool-all</artifactId>
  <version>5.7.16</version>
</dependency>

（Hutools是一個Java工具類庫，還是挺好用的）

之后就可以進行接口開發(fā)了，代碼如下：

@RestController
public class TranslationController {

    @PostMapping("/translate")
    public Object translate(@RequestBody Map<String,String> data)
    {
        //獲取請求參數(shù)
        String q = data.get("q");
        String from = data.get("from");
        String to = data.get("to");
        //隨機數(shù)
        Random random = new Random(10);
        String salt = Integer.toString(random.nextInt());
        //MD5加密
        //自定義的全局變量 appid和密鑰
        String appid = BaiduContent.APPID + q + salt + BaiduContent.SECRET;
        String sign = SecureUtil.md5(appid);

        //封裝請求參數(shù)
        MultiValueMap<String, String> paramMap = new LinkedMultiValueMap<>();
        paramMap.add("q",q);
        paramMap.add("from",from);
        paramMap.add("to",to);
        paramMap.add("appid",BaiduContent.APPID);
        paramMap.add("salt",salt);
        paramMap.add("sign",sign);
        String url = "http://api.fanyi.baidu.com/api/trans/vip/translate";
        //封裝請求頭
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);

        HttpEntity<MultiValueMap<String, String>> httpEntity = new HttpEntity<>(paramMap,headers);

        //調用百度翻譯API，發(fā)送請求，得到結果
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<Object> response = restTemplate.postForEntity(url, httpEntity, Object.class);

        return response.getBody();
    }
    
}

首先接受前端傳來的請求參數(shù)，然后參照開發(fā)文檔即可；

請求翻譯接口的參數(shù)如下：