layui做的一个相册管理(实际上就是图片列表哈哈哈~)

分享 已结 20 3969
谁是大流氓
悬赏:20飞吻
本来像白天发的,但是实在太忙了,写完接口又要修改页面,弄到现在才下班吃完饭,,,(什么时候程序员能不这么累啊!!![泪]

好吧,言归正常,作为一个Java程序猿浸淫layui一年多了,首先要感谢layui给予我在项目上很大的帮助,虽然说有很多限制和小bug,不过没关系,layui是越做越好~

项目需要用到相册管理,之前写了一个,经理说太难卡了而且不方便,所以又重新改了一下,比较简单 也只是分享一下心得 因为毕竟我看到社区还没有相册这一类的主题的帖子,大神们要喷不是不可以,轻点哈~

上图:

效果就是这样的,大部分使用layui原生的样式,只是在对列表的一些样式做出修改 没有多大的变化

代码部分:
<head>
<style>
.layui-upload-list dd {
position: relative;
margin: 0 10px 10px 0;
float: left
}

.layui-upload-list li {
position: relative;
margin: 0 10px 10px 0;
float: left;
width: 15%;
min-width: 305px;
}

.layui-upload-list .operation {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}

.layui-upload-list .operation i {
cursor: pointer;
background: #2F4056;
padding: 2px;
line-height: 15px;
text-align: center;
color: #fff;
float: left;
filter: alpha(opacity=80);
-moz-opacity: .8;
-khtml-opacity: .8;
opacity: .8
}

</style>
</head>
<div class="layui-row">
<ul class="layui-upload-list">
#for(d : imgs)
<li><div class="layui-card img-card">
<div class="layui-card-header">
#(d.name)
</div>
<div class="layui-card-body">
<div class="img-box">
<img src="../#(d.url)" alt="#(d.name)" title="#(d.name)">
</div>
<form action="/**/editImg" method="post" class="layui-form layui-form-pane mtop10">
<input name="hId" type="hidden" value="#(hId)">
<input name="id" type="hidden" value="#(d.id)">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input name="name" type="text" class="layui-input" placeholder="图片名称" value="#(d.name)">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<select name="type">
<option></option>
#for(t : type)
#if(d.type == t.value)
<option value="#(t.value)" selected>#(t.name)</option>
#else
<option value="#(t.value)">#(t.name)</option>
#end
#end
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input name="sort" type="text" class="layui-input" placeholder="图片排序" value="#(d.sort)">
</div>
</div>
<div class="layui-form-item layui-right">
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm" type="submit" lay-filter="submit"><i class="layui-icon"></i>提交</button>
<button class="layui-btn layui-btn-sm layui-btn-danger del" data-id="#(d.id)"><i class="layui-icon"></i>删除</button>
</div>
</div>
</form>
</div>
</div></li>
#end
</ul>
</div>

至此呢,整个页面是已经完成了,反正我是不喜欢代码很多的 layui的简洁大方是我非常喜欢的一点,所以这次做出来的效果个人来说也是挺满意的。
另外,因为里面的修改删除操作都是直接对表单进行提交,后台接受到请求后倘若修改成功都要进行redirect重定向到本页,那么就会涉及到一个用户体验的问题,假设我修改或者删除的是中部或者底部的一张图片,你给我刷新就回到了顶部,是不是很难受,图片一多的话就难以设想了,所以我这里采用的是localStorage记录滚动条的方法,当刷新本页的时候自动读取最后一次存储好的滚动条记录就可以了
附上带js代码:
window.onload = function (ev) {
var scroll = localStorage.getItem("scrollValue")
window.scrollTo(0,scroll)
}
window.onscroll = function () {
var _h = document.documentElement.scrollTop;
localStorage.setItem("scrollValue",_h)
}

还有删除的js代码:
$('.del').on('click',function () {
var demo = $(this).data('id')
$.post('/**/deleteImg',{id:demo},function (d) {
if(d.code == 0){
refreshCurrPage()
}else {
layer.alert(d.msg)
}
})
return false
})
回帖
  • minimu
    2018-10-25
    100张图片就100个form,是不是可以优化下
    如果不是考虑到layui的form组件的缺陷,可以考虑武form标签设计。
    做简单的html封装,让调用者可以在极少代码直接使用且不是更好
    0 回复
  • @夜枫夜 谢谢 我个人感觉要是输入框能稍微小点会好多了
    1 回复
  • @谁是大流氓 不要觉得用户很笨,可以直接在上方名字那里放一个输入框,名字显示在里面,输入完就修改了,很方便,界面要尽量精简,功能要尽量适用
    1 回复
  • 漫游游
    2019-12-25
    https://gitee.com/nbnat/layui-filemanage
    1 回复
  • @漫游游 牛批啊 兄嘚
    1 回复
  • 夜枫夜
    2018-10-23
    漂亮[鼓掌]
    0 回复
  • 夜枫夜
    2018-10-24
    @谁是大流氓 这样已经很好了,再美化就简单了调样式就可以
    0 回复
  • lay初见
    2018-10-24
    看起来是一次不错的分享,样式已经足够简洁,别人用到的话也只是稍微的修改,只是图片有点污[嘻嘻]
    0 回复
  • 可以做成卡片式的,左上角或者正上方可以直接修改名字,右上角可以删除,鼠标点住可以进行拖动排序
    0 回复
  • @lay初见 身为一个专业初级的程序猿,污~是我的代名词[酷]
    0 回复