thymeleaf + easy + springboot 文件上传下载，以及列表展示 接口

这里只是随便写写，如果有大佬看到请不要喷我。
上传下载 在上一篇博客里面有写到我就不在描述了，这里我只是写一下我的思路。
首先可以让代码可以复用起来 这里用到的是 thymeleaf的include标签。
文件列表

    <!-- 这里是文件列表 只需要放在需要显示文件列表的地方 -->
    <div th:include="onloadJs :: filelist"></div>

上传按钮

<!-- 这里是上传按钮 引入后会回调save 接口 ps: 放在最后 避免出现页面没加载完成绑定不到按钮的情况-->
<div th:include="onloadJs :: fileUpload"></div>

通过上面的代码就可以实现到在不同页面使用简洁复用的效果了
接下来是上面代码的实现 使用th:fragment

这部分代码使用了easyui + lay 实现

<div th:fragment="filelist">
        <table id="fileList" class="easyui-datagrid" title="文件列表"  style=""
               data-options="
                    rownumbers:true,
                    pagination:false,
                    fitColumns:true,
                    iconCls:'icon-page',
                    loadMsg:'数据加载中。。。',
                    singleSelect:true
    "/>
        <button type="button" class="layui-btn" id="file">
            <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
        <script type="text/javascript" th:src="@{/static/js/jquery.js}"></script>
        <script type="text/javascript" th:src="@{/static/js/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:inline="javascript">
            /* <![CDATA[ */

            var uuid = [[${uuid}]];


            $(function () {
                $("#fileList").datagrid({
                    url:"/file/filelist.json",
                    queryParams: {
                        packageid: uuid
                    },
                    /* toolbar:toolbar, */
                    columns:[[
                        {field:'filename',title:'文件名',width:80,align: 'left', halign: 'center'},
                        {field:'cz',title:'操作' ,formatter:function (value,data,index) {
                                var html =  "<button type='button' class='layui-btn' onclick='del("+data.id+")' >删除</button>";
                                html +="<a class='layui-btn' href='/file/download.htm?id="+data.id+"' >下载</a>";
                                console.info(data.filename.indexOf(".doc"))
                                //筛选出包含有DOC后缀的文件名
                                if(data.filename.indexOf(".doc")>-1){
                                    //筛选掉DOCX的后缀，只有DOC后缀留下
                                    if(data.filename.indexOf(".docx")<0){
                                        html += "<button type='button' class='layui-btn'  onclick='docinfo(\""+data.uuidname+"\")' >浏览</button>";
                                    }
                                }
                                return html;
                            }}
                    ]]
                });
            })
            function del(id){
                $.post("/file/del.json",{id:id},function (data) {
                    layui.use('layer', function() {
                        if(data==true){
                            layer.msg("删除成功！",function () {
                                $('#fileList').datagrid('reload');//刷新
                            }) ;
                        }else{
                            layer.msg("删除失败！",function () {
                                $('#fileList').datagrid('reload');//刷新
                            }) ;
                        }
                    })
                })
            }
            function docinfo(uuid) {
                layui.use('layer', function() {
                    /*
                    如果是页面层
                    */
                    console.info(1);
                    layer.open({
                        type: 2,
                        content: '/word/doc.htm?uuid='+uuid ,//这里content是一个普通的String
                        area: ['85%', '95%'],
                        maxmin:true,
                        shadeClose:true
                    });
                });
            }

            /* ]]> */
        </script>
    </div>

UUID 是从后台传到前台的 因为JS里面目前我还没找到什么比较好的生成UUID的方式所以在后台使用了java自带的UUID生成。
这里的UUID指的是包ID，这样的话可以进行多次文件的添加。 当已经有文件时会将文件的包UUID传过来，没有的话会生成一个新的uuid。

这里是上传按钮

<div th:fragment="fileUpload">
        <script type="text/javascript" th:inline="javascript">
            /* <![CDATA[ */
            layui.use(['layer','upload'], function() {
                var layer = layui.layer;
                var upload = layui.upload;
                console.info(uuid);
                //执行实例
                var uploadInst = upload.render({
                    elem: '#file' //绑定元素
                    ,url: '/file/fileUpload.json' //上传接口
                    ,auto:false
                    ,data:{packageid:uuid}
                    ,accept:"file"
                    ,bindAction:"#btn"
                    ,multiple:true
                    ,allDone: function(obj){ //当文件全部被提交后，才触发
                        console.log("文件总数"+obj.total); //得到总文件数
                        console.log("请求成功的文件数"+obj.successful); //请求成功的文件数
                        console.log("请求失败的文件数"+obj.aborted); //请求失败的文件数
                        save();
                    }
                    ,done: function(res){
                        //上传完毕回调
                        console.info("上传完毕回调"+res);
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
            }) ;
            /* ]]> */
        </script>
    </div>

执行完成以后会调用save()这个function 的方法 来执行保存操作。

下面是页面中的上传方法

 /**
     * 上传按钮回调
     *     <div th:include="onloadJs :: filelist"></div> 上传按钮点击后回调
     *     UUID 在filelist中赋值
     *     这一部分是需要修改的所以抽出来使用回调的方式访问
     * */
    function save(){
        var e=$('form').serializeObject();
        if(id!=null)e.id=id;
        e.regulationsId=regulationsId;
        e.packageid=uuid;
        $.ajax({
            url:"/policiesregulationsinfo/save.json",
            data:JSON.stringify(e),
            dataType:"json",
            type:"post",
            contentType:'application/json;charset=utf-8',
            success:function () {
                layer.msg("保存成功",{time:1000},function () {
                    parent.layer.closeAll();//执行完后关闭
                })
            }
        });
    }

这样做的话每个不同的页面都可以只改变save中的内容其他地方直接复用就行了。
只需要在数据库里面吧包的uuid保存下来 凭借uuid来进行获取文件。
最后效果