【SpringMVC】电子相册系统——相册照片后台管理前后端实现（layui-table/form+jsp）

软工大作业电子相册，具体效果见【SpringMVC】电子相册系统——上传图片和浏览图片前后端实现

页面展示

在设计方案中，一个用户拥有多个相册，一个相册拥有多张图片。

通过下拉列表选取相册。

点击照片一栏进行预览。

点击照片名一栏对照片进行重命名。

代码实现

@RequestMapping("/photos")public String enterMyPhotos(HttpSession session,Model model){User user = (User)session.getAttribute("myInfo");List<Album> albumList= (List<Album>)AlbumServer.getAlbumInfoListByUserId(user.getId()).getData();model.addAttribute("myInfo",user);model.addAttribute("albumList",albumList);return "my_photos";}

该页面的入口为me/photos，故后端取session的个人信息后依次访问至DAO层，将相册列表传入给jsp。

<div class="st-main horizentol" style="margin-top: 15px"><jsp:include page="my_left_bar.jsp"></jsp:include><div class="personal-content"><form class="layui-form"><div id = "select_album" class="layui-form-item" style="width: 300px"><%--选择相册的select--%><select data-type = "reload" id="album_choose" name="album_choose" lay-filter="album_choose"><c:forEach var="album" items="${albumList}"><option value="${album.id}">${album.name}</option></c:forEach></select></div></form><table class="layui-hide" id="test" lay-filter="photo_table"></table></div></div>

jsp中先写好一个选择相册的select，和显示照片列表的table，此处均按照layui的格式进行填写。因为这个select是包含在layui的form中的，所以要套一层form。

<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="cover">封面</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

右侧设置封面和删除两个按钮，按照layui-table的规则填写。

<script>layui.use(['table', 'form'], function () {var form = layui.form;//监听select table reloadform.on('select(album_choose)',function (data) {console.log("change select");var album_choose = data.value;table.reload('photo_list', {page: {curr: 1 //重新从第 1 页开始},where: {albumId:album_choose}}, 'data');});form.render();

js部分，因为用到了table和form两个组件，首先设置好form中select的状态，监听select一旦改变，则根据选中的相册id将table重置，即再访问一次table中的接口。

        //不知道js怎么直接获取后端的list，就从dom里取了var list = [];$("#album_choose").each(function(i){list.push(this.value);});var table = layui.table;var albumId = "";if(list.length > 0) {albumId = list[0];}

因为springMVC+jsp并没有做到前后端分离，这里我想让其默认显示相册列表中第一个相册的内容，js就要获取到albumID的列表。由于是由jsp进入该页面，所以js不能直接获得列表，再进行一次异步访问有点太傻了，就先将jsp的内容送入一个select，js再从select中提取（可能有点奇怪）。

        table.render({elem: '#test',url:'http://localhost:8080/me/getMyPhoto',where:{albumId:albumId},cols: [[{field:'id',  title: '照片ID', sort: true},{field:'name',  title: '照片名',event :'name', sort:true},{field: 'url', title: '预览',templet: function(d){var url = '/getImage?url=' + d.url;return '<div><img  src= "'+url+'" alt="" width="50px" height="50px"></a></div>';},event :'preview'},{field:'createTime',  title: '创建时间',sort:true},{field:'praiseCount',  title: '点赞',width:80,sort: true},{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}]],page: true,parseData: function(res){ //res 即为原始返回的数据return {"code": res.status, //解析接口状态"msg": res.msg, //解析提示文本"count": res.data.length, //解析数据长度"data": res.data //解析数据列表};},id: "photo_list"});

table的接口设置部分，由于我设计的数据格式是这样的。

public class DataResult {private int status;private String msg = "";private Object data;
}

所以要做一定的修改。

        //填入table的lay-filter参数table.on('tool(photo_table)',function(obj){var data = obj.data;console.log(obj);//预览if(obj.event === 'preview'){console.log("preview");var url = "/getImage?url=" + obj.data.url;var width = 800;var height = 800;// 创建对象var img = new Image();// 改变图片的srcimg.src = url;// 判断是否有缓存if(img.complete){// 打印width = img.width>width?width:img.width;height = img.height>height?height:img.height + 42;}else{// 加载完成执行img.onload = function(){width = img.width>width?width:img.width;height = img.height>height?height:img.height + 42;}}width = width + 'px';height = height + 'px';//页面层layer.open({title:'预览',type: 1,skin: 'layui-layer-rim', //加上边框area: [width, height], //宽高shadeClose: true, //开启遮罩关闭end: function (index, layero) {return false;},content: '<div style="text-align:center"><img src="'+url+'" /></div>'});}else if(obj.event === 'del'){var albumId = $('#album_choose').val();layer.confirm('真的删除该照片吗？', function(index){$.ajax({url:"http://localhost:8080/delPhoto",type:"get",data:{albumId:albumId,photoId:obj.data.id},dataType:"json",success:function (res) {if(res.status === 0){layer.msg("删除照片成功!");obj.del();}else{layer.msg("删除照片失败!");}layer.close(index);},error:function () {layer.msg("操作失败!");}});});}else if(obj.event === 'cover'){var albumId = $('#album_choose').val();$.ajax({url:"http://localhost:8080/setCover",type:"get",data:{albumId:albumId,photoId:obj.data.url},dataType:"json",success:function (res) {if(res.status === 0){layer.msg("设置封面成功!");}else{layer.msg("设置封面失败!");}},error:function () {layer.msg("操作失败!");}})}else if(obj.event === 'name'){layer.prompt({formType:0,title:'请重命名该照片',area:['400px','80px'],btnAlign:'c',offset:'auto'},function(value,index,elem){var name = value;$.ajax({url: "http://localhost:8080/me/changePhotoName",type: "post",data: {"photoId": obj.data.id,"name": name},dataType: "json",offset:'auto',success: function (result) {//如果删除成功if (result.status == 0) {layer.msg('更改成功!', {icon: 6,offset:250});window.location.reload();} else {window.location.reload();}},error: function () {alert("更改发生异常");}});layer.close(index);});}})});
</script>

随后通过table每一栏event属性的设定访问不同的接口即可，图片预览时会取图片的大小，尽量使显示的图片框大小美观。