JAVA uses byte stream to transfer local pictures to the front end
01. Basic introduction
In our daily development, we will encounter the problem of using the verification code (the role of the verification code is not much to say here, to avoid the program being maliciously attacked, etc.), how to keep the front-end and back-end consistent is a problem, of course, this program It's not about how to write a verification code that uses the front end to display a verification code, and the value of the verification code is consistent with the data in the background. It's just a question of using java to write local images to the front-end html page to provide an idea to attract others. And this blog is developed around a system that uses java to call python to obtain the result of Chinese word segmentation and the corresponding word cloud image. After the technical points of each part are explained, the blogger will finally put the program source code on Baidu. On the cloud, for readers to refer to and learn.
02. Code introduction
The code behind, this is a servlet program
public class WCServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String r = request.getParameter("r");
//使用字节流读取本地图片
ServletOutputStream out=null;
BufferedInputStream buf=null;
//创建一个文件对象，对应的文件就是python把词云图片生成后的路径以及对应的文件名
File file = new File("E:\\Java\\eclipse_code\\NLP\\WebContent\\source\\wordcloud.png");
try {
//使用输入读取缓冲流读取一个文件输入流
buf=new BufferedInputStream(new FileInputStream(file));
//利用response获取一个字节流输出对象
out=response.getOutputStream();
//定义个数组，由于读取缓冲流中的内容
byte[] buffer=new byte[1024];
//while循环一直读取缓冲流中的内容到输出的对象中
while(buf.read(buffer)!=-1) {
out.write(buffer);
}
//写出到请求的地方
out.flush();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}finally {
if(buf!=null) buf.close();
if(out!=null) out.close();
}
//传输结束后，删除文件，可以不删除，在生成的图片中回对此进行覆盖
File file1 = new File("E:\\Java\\eclipse_code\\NLP\\WebContent\\source\\wordcloud.png");
file1.delete();
System.out.println("文件删除！");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Front-end code:
<!-- 词云 -->
<div class="row col-sm-12">
<button type="button" class="btn btn-default" id="picbtn" >云图</button>
<div align="center" id="dpic">
<img alt='文本分析的云图' src='' id='pic'>
</div>
</div>The use of a JavaScript to control here has been introduced in https://blog.csdn.net/meiqi0538/article/details/79861704
<script type="text/javascript">
/* 在页面加载完成后使用*/
$(function(){
/*一个定时函数，获取时间的 */
setInterval(showtime,1000);
/* 函数处理，使用的是异步请求ajax技术*/
$("#sbtn").click(function(){
/* 创建一个layer load对象*/
var ii=layer.load();
/*ajax进行请求 */
$.ajax({
/*请求方式 */
type:'POST',
/*请求的地址 */
url:'${pageContext.request.getContextPath()}/nlp',
/* 请求的参数和内容*/
data:{text:$("#textareaCode").val()},
/* 数据格式为json*/
dataType:'json',
/* 请求成功后，返回结果result，写一个函数进行处理*/
success:function(result){
//清空之前的内容，避免数据都叠加在一起
$("#rview").empty();
/* 给指定区域写内容，也就是要显示的地方*/
$("#rview").prepend(result);
/*为标签写属性，这里我使用的是java的数据流方式传递图片到页面，类似于验证码原理 */
$("#pic").attr("src","${pageContext.request.contextPath }/wc");
/* 处理结束后关闭遮罩层*/
layer.close(ii);
}
});
});
});
function showtime(){
var t=new Date();
var weekday=new Array(7);
weekday[0]="周日";
weekday[1]="周一";
weekday[2]="周二";
weekday[3]="周三";
weekday[4]="周四";
weekday[5]="周五";
weekday[6]="周六";
document.getElementById("time").innerHTML="当前时间："+t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+"日"
+weekday[t.getDay()]+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds();
}
</script>03. Result display
This is the parameter (text) passed by python to the javaweb front end, the result of word segmentation, and the generated picture
