功能简述:在struts2的一个小项目中,想要在用户列表的页面上在表格中加入超链接照片,即显示一个用户的照片信息,这里用到了layer前端组件。

这个前端组件的官方网站:http://layer.layui.com/  可以对照API中的 ajax和layer.photos({}) 方法来使用该模块。

但是layer组件有两种版本,旧版本layer 1.8.5和新版本3.0,这两个在使用过程中还有不一样的地方和需要注意的几点。

1.在jsp上面引入的不同:

新版本:(对应着jQuery3.1)

layui 使用jquery去表单里 layui jquery版本_旧版

旧版本:(对应着jQuery1.1)

layui 使用jquery去表单里 layui jquery版本_json_02

这里需要注意,低版本的jQuery对应着低版本的layer.js ,高版本对应高版本的,否则会出现一些关于jQuery的问题


2.ajax和layer.photos 方法使用的不同

可以根据layer 的官方API 去看两个版本的很多方法不同的使用,这里不仅仅可以看到新的3.0.1版本,也可以选择更旧版本1.8.5

layui 使用jquery去表单里 layui jquery版本_新版本_03


旧版本:可以明确看到layer.photos是一个拓展方法,这里要引入一个拓展类


新版本:官方API中没有让你引入拓展类,直接在引入整个js文件后,这个layer.photos方法直接可以实现:(这里下载的3.0版本中也没有extend这个文件夹)


3.返回json的形式有变化:可以看到新版本的json形式更加简洁一些,但是还是要细心一点才能在后端将图片信息解析成Json时候不报错

旧版本:

layui 使用jquery去表单里 layui jquery版本_json_04

新版本:

layui 使用jquery去表单里 layui jquery版本_json_05


4.检测自己的json格式是否正确:可以在测试功能的时候将json信息打印在控制台上,然后复制在 http://jsonlint.com/ 中,可以在线检测你的json格式是否正确。

这里举一个新版本的layer 返回json格式的检测,结果为valid json,即合法的json。


在src 设置的值一定要是原图路径,且json中的斜杠都是向右斜的:形式如:"/Struts2Pro/images/IMG_0996.JPG"(这个取决于往服务器上传照片的URL是怎么设置的)

5.json的解析代码:我是在一个service层创建一个类,写了一个静态方法,在这个方法中将json设置为StringBuilder对象进行拼接json信息,然后在Action中的方法也是用到这个方法将得到的照片信息解析成json传回前端进行显示:



package Service;

 import java.util.ArrayList;

 import javabean.Picture;
//这个方法是service层对DAO方法中拿到所以照片的集合加工成前端layer组件显示照片用的json类型
//json类型其实是一句句的属性拼接成的字符串,用到拼接,我们用stringBuilder类 不用String类
 public class PictureService {
public static String getJson(ArrayList<Picture> list,String ContextPath)
{
StringBuilder str=new StringBuilder();
//处理相册的一些信息
str.append("{");
str.append("\"title\":\"用户相册 \",");
str.append("\"id\":123,");
str.append("\"strat\":0,");
str.append("\"data\":[");
//处理照片的信息
for(int i=0;i<list.size();i++)
{
str.append("{");
str.append("\"alt\":\""+list.get(i).getName()+"\",");
str.append("\"pid\":123,");
str.append("\"src\":\""+ContextPath+"/"+list.get(i).getUrl()+"\",");
str.append("\"thumb\":\"\",");
str.append("\"area\":[638,851]");
str.append("}");
//因为处理的照片不止一张,所以要循环在list中的每个Piction对象转变成Json中data的形式
//而且循环处理的每一张图片(除最后一张)加工成Json信息后在{。。。}加上逗号。
if(i<list.size()-1){
str.append(",");
}
}
str.append("]");
str.append("}");
return str.toString();
}
 }

6.这里没有太多讲使用这个流程和一些配置,可以参考:


补充: 这里高版本的前端回调函数中要遵循官方API的形式





有问题还请指出