Struts2(九.利用layer组件实现图片显示功能)
2018-07-25 13:05:32来源：博客园 阅读 ()
1.layer前端组件介绍
layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
http://sentsin.com/jquery/layer/
使用方法
http://sentsin.com/jquery/layer/ext.html
在项目中引入layer组件
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.min.js"></script>
2.userlist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <!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> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-1.11.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.min.js"></script> <script type="text/javascript"> $(function(){ //显示照片 $(".picture").click(function(){ //引入layer.ext.js layer.use('extend/layer.ext.js'); $.getJSON("${pageContext.request.contextPath}/picture/getpic",{"picture.uid":this.lang},function(data){ layer.photos({ html:"", //网页路径，表示左边显示图片，右边可以显示一个网页用于介绍图片 json: data }); }); }); }); </script> </head> <body> 用户列表 <br> <br> <table class="bordered"> <thead> <tr><th>序号</th><th>用户名</th><th>密码</th><th>照片</th><th>删除</th><th>修改</th></tr> </thead> <!-- USERLIST，cuser，s存入的Stack Context --> <s:iterator value="#USERLIST" id="cuser" status="s"> <tr> <td><s:property value="#s.index+1"/></td> <td><s:property value="#cuser.userName"/></td> <td><s:property value="#cuser.pwd"/></td> <td><a href="#" class="picture" lang="<s:property value="#cuser.id"/>">照片</a></td> <td><a href="#" class="delete" lang="<s:property value="#cuser.id"/>!<s:property value="#cuser.userName"/>">删除</a></td> <td><a href="#" class="modify" lang="<s:property value="#cuser.id"/>">修改</a></td> </tr> </s:iterator> </table> <br> <br> <a href="${pageContext.request.contextPath}/main.jsp">返回主页面</a> </body> <!-- 调试 Value Stack 访问时不用加# Stack Context 访问时要加# --> <s:debug></s:debug> </html>
3.PictureAction
/** * 得到当前用户所有照片的json字符串 * @return * @throws IOException * @throws SQLException * @throws ClassNotFoundException * @throws NamingException */ public String getpic() throws IOException, SQLException, ClassNotFoundException, NamingException{ PictureDAO dao=new PictureDAO(); //从数据库中通过当前用户id获取当前用户的所有图片 ArrayList<Picture> list = dao.getPicture(picture.getUid()); //获取网站部署的根目录 String path=ServletActionContext.getRequest().getContextPath(); //调用PictureService中的getJSON方法 String json=PictureService.getJSON(list, path); response.setCharacterEncoding("utf-8"); out=response.getWriter(); out.print(json); //输出到控制台看一看 System.out.println(json); return null; }
4.PictureDAO
/** * 通过uid（当前用户id）从数据库获得当前用户的所有照片 * @param id * @return * @throws SQLException * @throws NamingException */ public ArrayList<Picture> getPicture(int id) throws SQLException, NamingException { if(conn.isClosed()) { Context ctx = new InitialContext(); DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/mysql"); conn = ds.getConnection(); } ArrayList<Picture> pics=new ArrayList<Picture>(); sql="select * from pictures where uid = ?"; ps=conn.prepareStatement(sql); ps.setInt(1, id); ResultSet rs = ps.executeQuery(); while(rs.next()){ Picture pic =new Picture(); pic.setId(rs.getInt(1)); pic.setUid(rs.getInt(2)); pic.setName(rs.getString(3)); pic.setUrl(rs.getString(4)); pics.add(pic); } conn.close(); return pics; }
5.创建一个PictureService类来组装json数据
package mypicture; import java.util.ArrayList; /** * 收到所有照片，返回一个json字符串 */ public class PictureService { public static String getJSON(ArrayList<Picture> list,String contextPath) { //字符串连接 StringBuilder str = new StringBuilder(); str.append("{"); //请求的状态，1表示成功，其它表示失败 \"转译字符，代表 "" str.append("\"status\": 1, "); //状态提示语 str.append("\"msg\": \"照片\", "); //相册标题 str.append("\"title\": \"whr的相册\", "); //相册id str.append("\"id\": 0, "); //初始显示的图片序号，默认0 str.append("\"start\": 0, "); str.append("\"data\": [ "); //处理照片 for (int i = 0; i < list.size(); i++) { str.append("{"); //图片名 str.append("\"name\": \"" + list.get(i).getName() + "\", "); //图片id str.append("\"pid\": 0, "); //注意这个中间的是左斜杠，若是写成右斜杠"\\"出不来结果 //图片路径 str.append("\"src\": \""+ contextPath + "/" +list.get(i).getUrl() + "\", "); //缩略图地址 str.append("\"thumb\": \"\", "); //原图宽高 str.append("\"area\": [600,800] " ); str.append("}"); //不是最后一项的话，加上，号 if (i < list.size()-1) { str.append(","); }else { break; } } str.append("]"); str.append("}"); return str.toString(); } }
6.可以对能接受的上传文件的大小进行修改
在struts.xml中修改常量struts.multipart.maxSize
<!-- 控制上传文件大小 3个0表示Kb,6个0表示Mb，这里为10Mb--> <constant name="struts.multipart.maxSize" value="10000000"/>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：java之导入excel
下一篇：设计模式（二） | 装饰模式
- 利用反射给对象按顺序赋值 2020-05-28
- 如何利用Spring Boot 整合微信小程序实现登录与增删改查（含 2020-05-20
- Struts2 为什么被淘汰？自己作死！ 2020-05-14
- 【问题管理】-- Struts2配置struts.xml中Action访问报There 2020-04-17
- 【java框架】Struts2(2) -- Struts2配置 2020-04-13
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
