开发者社区> lisongyu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用百度翻译api制作自己的字典

简介: 首先,这是一个java web项目.所以我们要创建一个web项目,使用工具eclipse. 创建完成项目后,在WebContent下创建css和js文件夹,用来存放静态资源文件,在WebContent下新建一个jsp页面,用来做翻译的页面.
+关注继续查看

首先,这是一个java web项目.所以我们要创建一个web项目,使用工具eclipse.

这里写图片描述

创建完成项目后,在WebContent下创建css和js文件夹,用来存放静态资源文件,在WebContent下新建一个jsp页面,用来做翻译的页面.
这里写图片描述

前台写的很渣,就不献丑了,有一点要记住,就是一般情况下用link标签引入css文件,用script引入js文件.这是我的前台页面,抄的百度翻译(省略版),毕竟我不是要做一个百度

这里写图片描述

  1. 这个是jsp源码

    index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度翻译</title>

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>

<link rel="icon" type="image/png"
    href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon-32x32_ca689c3.png"
    sizes="32x32" />
<link rel="icon" type="image/png"
    href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon-16x16_e1883cf.png"
    sizes="16x16" />
<link rel="shortcut icon" type="image/x-icon"
    href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon_d87cd2a.ico" />
<link rel="bookmark" type="image/x-icon"
    href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon_d87cd2a.ico" />

<link rel="stylesheet" type="text/css" href="./css/main.css">   

</head>
<body>
    <img class="img_baidu"
        src="//fanyi.bdstatic.com/static/translation/img/header/logo_cbfea26.png"
        alt="" />
    <br />
    <div class="div_body"></div>
    <br />
    <div class="div_from">
        <select id="from">
            <option value="auto">   自动检测    </option>
            <option value="zh"> 中文  </option>
            <option value="en"> 英语  </option>
            <option value="yue">    粤语  </option>
            <option value=" wyw">   文言文 </option>
            <option value=" jp  ">  日语  </option>
            <option value=" kor ">  韩语  </option>
            <option value=" fra ">  法语  </option>
            <option value=" spa ">  西班牙语    </option>
            <option value=" th  ">  泰语  </option>
            <option value=" ara ">  阿拉伯语    </option>
            <option value=" ru  ">  俄语  </option>
            <option value=" pt  ">  葡萄牙语    </option>
            <option value=" de  ">  德语  </option>
            <option value=" it  ">  意大利语    </option>
            <option value=" el  ">  希腊语 </option>
            <option value=" nl  ">  荷兰语 </option>
            <option value=" pl  ">  波兰语 </option>
            <option value=" bul ">  保加利亚语   </option>
            <option value=" est ">  爱沙尼亚语   </option>
            <option value=" dan ">  丹麦语 </option>
            <option value=" fin ">  芬兰语 </option>
            <option value=" cs  ">  捷克语 </option>
            <option value=" rom ">  罗马尼亚语   </option>
            <option value=" slo ">  斯洛文尼亚语  </option>
            <option value=" swe ">  瑞典语 </option>
            <option value=" hu  ">  匈牙利语    </option>
            <option value=" cht ">  繁体中文    </option>
            <option value=" vie ">  越南语 </option>
        </select>
    </div>
    <div class="div_to">
        <select id="to">
            <option value=" zh  ">  中文  </option>
            <option value=" en  ">  英语  </option>
            <option value=" yue ">  粤语  </option>
            <option value=" wyw ">  文言文 </option>
            <option value=" jp  ">  日语  </option>
            <option value=" kor ">  韩语  </option>
            <option value=" fra ">  法语  </option>
            <option value=" spa ">  西班牙语    </option>
            <option value=" th  ">  泰语  </option>
            <option value=" ara ">  阿拉伯语    </option>
            <option value=" ru  ">  俄语  </option>
            <option value=" pt  ">  葡萄牙语    </option>
            <option value=" de  ">  德语  </option>
            <option value=" it  ">  意大利语    </option>
            <option value=" el  ">  希腊语 </option>
            <option value=" nl  ">  荷兰语 </option>
            <option value=" pl  ">  波兰语 </option>
            <option value=" bul ">  保加利亚语   </option>
            <option value=" est ">  爱沙尼亚语   </option>
            <option value=" dan ">  丹麦语 </option>
            <option value=" fin ">  芬兰语 </option>
            <option value=" cs  ">  捷克语 </option>
            <option value=" rom ">  罗马尼亚语   </option>
            <option value=" slo ">  斯洛文尼亚语  </option>
            <option value=" swe ">  瑞典语 </option>
            <option value=" hu  ">  匈牙利语    </option>
            <option value=" cht ">  繁体中文    </option>
            <option value=" vie ">  越南语 </option>
        </select> &nbsp; &nbsp; &nbsp; 
        <input type="button" value="翻译" id="but_Trans"><br />
    </div><br />

    <textarea id="query" onclick="this.value='';focus()">此处为输入翻译的内容</textarea>
    <textarea id="result" readonly="readonly"></textarea>
    </div>
</body>
<script type="text/javascript">
        $(function(){
            $("#but_Trans").click(function(){
                var query = $("#query").val();
                var from = $("#from").val();
                var to = $("#to").val();
                $.ajax({
                    url:"/Trans/trans",
                    type:"POST",
                    data:{query:query,from:from,to:to},
                    success:function(result){
                        var json = $.parseJSON(result);
                        var dst = "";
                        for (var i = 0; i < json.trans_result.length; i++) {
                            dst += json.trans_result[i].dst; + "<br/>"
                        }
                        $("#result").html(dst);
                    }
                }); 
            });
        });
    </script>
</html>

使用ajax进行前后台的调用,参数主要有from(自动识别区) , to(你想要翻译成的语言) , query(你要翻译的句子),这里有个小技巧,select中option有很多,所有我利用了excel的快捷性进行了复制,然后字体语言什么的都是百度翻译api文档中复制的,要想使用百度翻译功能也必须在api中注册才能使用,这个是路径(http://api.fanyi.baidu.com/api/trans/product/apidoc),具体效果如下:这里写图片描述
是不是很简单呢! ^_^

接下来是具体的java代码了.首先呢,把百度提供的apiDEMO下载下,下载地址还是上面的路径,一开始我以为会是类似jar包的东西,BUT,居然是java源码,哈哈哈,没错,就是java文件…..

这里写图片描述

我呢,为了项目的模块和分层(其实就一个翻译),我的项目结构是这样的,将下载下的java文件添加到项目中,同时controller进行数据的传递,util进行翻译(相当于一个dao,不过不是接口,他的作用就是用来返回结果的,具体的翻译实现还是api下的文件实现的),然后config目录下,我是用来存放我的appid和密钥的.

这里写图片描述

TransUtil.java

import java.util.ResourceBundle;

import songyu.li.api.TransApi;

public class TransUtil {

    public final static  String APP_ID ;
    public final static  String SECRET_KEY;

    static {
        ResourceBundle rb = ResourceBundle.getBundle("api_config");
        APP_ID = rb.getString("APP_ID");
        SECRET_KEY = rb.getString("SECRET_KEY");
    }

    public static String getResult(String query , String from , String to) {
        TransApi api = new TransApi(APP_ID, SECRET_KEY);
        return api.getTransResult(query, from, to);
    }


}

ps:通过ResourceBundle来读取config下的配置文件api_config.properties,然后静态加载到常量中.(config文件就不展示了,毕竟appid和密钥还是隐私的)

TransController.java



import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import xxxx.xxxx.utils.TransUtil;

/**
 * 翻译Controller 前台ajax传过来的值通过@webservlet("/trans")进入Controller
 *
 * @ClassName : TransController
 * @Description : TODO(这里是对当前类的描述)
 * @author : 
 * @date : 2018年3月23日下午3:11:04
 *
 */
@WebServlet("/trans")
public class TransController extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String query = req.getParameter("query");
        String from = req.getParameter("from");
        String to = req.getParameter("to");
        String result = TransUtil.getResult(query, from.trim(), to.trim());
        resp.getWriter().println(result);
    }

}

ps:controller继承了HttpServlet ,重写了dopost方法,通过req.getParameter(“name”)来获取参数的值(注意:在进行name获取的时候,由于我是从excel中复制过去的,所有在数据的前后都是有\t 的,接到的值都有空格,这个时候就使用到了String的trim()方法,它就是用来去掉数据前后的空格的),通过resp.getWriter().println(result)来返回到ajax中,默认返回一个字符串,需要再前台进行字符串解析成json然后取出数据.下面这个就是是默认返回的String格式的数据.
这里写图片描述

具体的源码:https://github.com/LeeSongYu/Trans (去config目录版)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android 百度翻译API(详细步骤+源码)
Android 百度翻译API(详细步骤+源码)
0 0
基于百度翻译API开发属于自己的翻译工具
  你是否每天使用着网页翻译工具?你是否遇到过这种情况,上网过程中遇到一个很长的单词但是又不能复制,要开两个浏览器,一个打开百度翻译,照着另一个网页输入单词?你安装了各种翻译软件后,又删除,只因忍受不了那每次弹出来的广告?其实我们想要的就是简单的翻译一个单词。
963 0
ASP.NET Core Web API 帮助页
ASP.NET Core Web API 帮助页
0 0
一文概览设计Web API 中的细节
一文概览设计Web API 中的细节
0 0
借助 Web Animations API 实现一个鼠标跟随偏移动画
借助 Web Animations API 实现一个鼠标跟随偏移动画
0 0
WebAPI学习(一)——创建Web API程序
WebAPI学习(一)——创建Web API程序
0 0
几种不常用Web API(振动、重力感应、联网状态、系统电量信息、页面可见性、canvas转base64、监听屏幕旋转、元素全屏显示)
navigator对象中有一些不常用的API,以下主要介绍vibrate振动,deviceorientation重力感应,online联网状态,getBattery系统电量信息,visibilitychange页面可见性,toDataURL(canvas转base64),orientationchange监听屏幕旋转和fullScreen元素全屏显示。
0 0
.NET MVC第十章 vue axios解析web api接口
.NET MVC第十章 vue axios解析web api接口
0 0
.NET MVC第九章、Web Api Json序列化与反序列化
.NET MVC第九章、Web Api Json序列化与反序列化
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载