0


百度翻译API使用教程(前端+后端)

1.资格获取

首先我们需要登录百度翻译开放平台,获取开发者资格:

访问

百度翻译开放平台

然后进行注册(如果有百度账号的话可以直接登录)

注册成功后点击“产品服务”:

跳转到通用文本API界面:

在页面底部点击“立即使用”即可选择服务进行使用

通用文本API有三种服务可供选择:

个人用户可以使用前两种,高级版的使用需要个人认证(实名认证)

2.简单使用

点击“管理控制台”,打开“开发者信息”界面:

即可看到你的APP ID和密钥信息,在调用接口的时候需要用到;

点击“我的服务”中的通用文本翻译,即可看到服务使用情况及明细

如果对于翻译的术语有特殊要求,可以点击“我的语料库”,并新建术语库:

这样我们设置的术语即可干预翻译结果;

3.编程实现

百度翻译开放平台

前往以上网址查看通用翻译API的开发文档

3.1 前端代码

开发环境: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>
  

需要传往后端的请求参数有:

3.2 后端代码

开发环境:springboot + Hutools

我使用的是正式版的idea,社区版的springBoot需要自己搭建,搭建教程可以自行搜索,需要使用正式版idea可以参考评论区的地址进行下载;

首先创建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版本

要确保版本统一(因为如果安装过多个版本的JDK,可能初始化的时候会有问题)

配置完成后可以启动Application查看是否正常

然后在pom.xml文件中导入Hutools的依赖:

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

(Hutools是一个Java工具类库,还是挺好用的)

之后就可以进行接口开发了,代码如下:

@RestController
public class TranslationController {

    @PostMapping("/translate")
    public Object translate(@RequestBody Map<String,String> data)
    {
        //获取请求参数
        String q = data.get("q");
        String from = data.get("from");
        String to = data.get("to");
        //随机数
        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);

        //封装请求参数
        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,发送请求,得到结果
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<Object> response = restTemplate.postForEntity(url, httpEntity, Object.class);

        return response.getBody();
    }
    
}

首先接受前端传来的请求参数,然后参照开发文档即可;

请求翻译接口的参数如下:

sign的设置开发文档里写的也很详细:

示例代码中使用的是POST请求方式,注意按照开发文档中的要求配置:

接口请求成功后即可得到翻译结果返回给前端进行展示了

4.结果展示

输入内容——点击翻译——展示翻译结果

如果有什么问题,欢迎留言讨论,作者也是初学者,如果有错误的话欢迎指正~


本文转载自: https://blog.csdn.net/qq_51235856/article/details/131147340
版权归原作者 THE WHY 所有, 如有侵权,请联系我们删除。

“百度翻译API使用教程(前端+后端)”的评论:

还没有评论