首先,这是一个java web项目.所以我们要创建一个web项目,使用工具eclipse.
创建完成项目后,在WebContent下创建css和js文件夹,用来存放静态资源文件,在WebContent下新建一个jsp页面,用来做翻译的页面.
前台写的很渣,就不献丑了,有一点要记住,就是一般情况下用 标签引入css文件,用 引入js文件.这是我的前台页面,抄的百度翻译(省略版),毕竟我不是要做一个百度
这个是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>< http-equiv="Content-Type" content="text/html; charset=UTF-8">< >百度翻译</ >< type="text/ " src="js/jquery-3.2.1.js"></ >< rel="icon" type="image/png" href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon-32x32_ca689c3.png" sizes="32x32" />< rel="icon" type="image/png" href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon-16x16_e1883cf.png" sizes="16x16" />< rel="shortcut icon" type="image/x-icon" href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon_d87cd2a.ico" />< rel="bookmark" type="image/x-icon" href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon_d87cd2a.ico" />< 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> <input type="button" value="翻译" id="but_Trans"><br /> </div><br /> <textarea id="query" ="this.value='';focus()">此处为输入翻译的内容</textarea> <textarea id="result" readonly="readonly"></textarea> </div></body>< type="text/ "> $(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); } }); }); }); </ ></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 * @De ion : 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中复制过去的,所有在数据的前后都是有 的,接到的值都有空格,这个时候就使用到了String的trim()方法,它就是用来去掉数据前后的空格的),通过resp.getWriter().println(result)来返回到ajax中,默认返回一个字符串,需要再前台进行字符串解析成json然后取出数据.下面这个就是是默认返回的String格式的数据.
具体的源码:https://github.com/LeeSongYu/Trans (去config目录版)
继续阅读与本文标签相同的文章
-
Android App应用调用已安装市场，进行软件评分的功能代码实现
2026-06-02栏目： 教程
-
Windows下配置JDK的环境变量
2026-06-02栏目： 教程
-
收到阿里巴巴的一面 -蚂蚁金服-高级质量保证工程师
2026-06-02栏目： 教程
-
Linux常见实用命令大全
2026-06-02栏目： 教程
-
网站建设中购买虚拟主机重要参数有哪些？
2026-06-02栏目： 教程