WEB应用开发综合实训day9

本节实训内容为layui数据表格、表单、弹出层、文件上传、ajax以及后端SSM框架、细节巨多、一定要勤加练习

• 分页歌手列表

  • 前端(artistlist.js)

    //加载模块
    layui.use(function() { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件
        var layer = layui.layer //弹层
            , laypage = layui.laypage //分页
            , laydate = layui.laydate //日期
            , table = layui.table //表格
        //向世界问个好
        layer.msg('Hello World');
        //执行一个 table 实例
        table.render({
            elem: '#demo'//表格id
            ,height: 600
            ,url: 'artist/list' //返回歌手列表接口
            ,title: '歌手表'
            ,page: true //开启分页,会默认传值page=1  limit=10
            ,toolbar: '#headBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                // field的取值跟返回实体类的属性一致
                ,{field: 'aId', title: 'ID',}
                ,{field: 'aName', title: '歌手名'}
                ,{field: 'aPhoto', width:120,unresize:true, title: '歌手头像',templet:function (d) {
                        return "<img src="+d.aPhoto+">"
                    }
                }
                //自定义行工具栏
                ,{fixed: 'right',width:180,  align:'center', toolbar: '#barDemo'}
            ]]
        });
    })
    

  • 后端

    @Override
    public ResultVo getArtistList(Integer page, Integer limit) {
        int start = (page-1)*limit;
        try{
            List<TbArtist> artistList = tbArtistMapper.getArtistListByPage(start,limit);
            //分页查询数量
            int length = tbArtistMapper.getArtistCount();
            ResultVo successVo = ResultVo.getSuccessVo("success", artistList);
            successVo.setCount(length);
            return successVo;
        }catch (Exception e){
            e.printStackTrace();
            return ResultVo.getFailVo("fail");
        }
    }
    

• 添加歌手，跳转页面

  artistlist.js

  //监听头工具栏事件
  // test:是被监听表格的lay-filter的取值
  table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
      ,data = checkStatus.data; //获取选中的数据
      // obj.event:被点击按钮的lay-event的取值
      switch(obj.event){
          case 'add':
              layer.open({
                  type:2, //iframe层
                  content:"add_artist",
                  area: ['60%', '60%'],//弹层的宽高
                  shade:0.8,
                  shadeClose:true
              })
              break;
          case 'delete':
              if(data.length === 0){
                  layer.msg('请选择一行');
              } else {
                  layer.msg('删除');
              }
              break;
      };
  });
  

  绘制add_artist.html页面

• 文件上传

  • 导入文件上传依赖

  • 配置spring-mvc

  • add_artist.js

    layui.use(['upload', 'element', 'layer','form'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            , form = layui.form;
    
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#chooseImg'//绑定上传按钮
            , url: 'artist/upload' //歌手头像上传接口
            //提交参数
            ,data:{
                //存储文件的文件夹
                parentName:'img'
            }
            ,field:'uploadFile'//设定文件域的字段名，后端的MultipartFile要跟他一致
            ,accept:'images'//指定只能上传图片
            ,auto:true//选完文件后自动上传
            , before: function (obj) {
                //上传文件回显
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                    $("#demo1").css({"width":"160px","height":"160px"})
                });
            }
            , done: function (res) {//上传成功才会执行的函数
                //将路径给隐藏的input框赋值
                $("#aPath").val(res.data)
            }
        });
    
       
    })
    

  • 后端

    ------------------ArtistController---------------------
    /**
         * 歌手头像上传,返回图片存储的相对路径
         */
    @RequestMapping("/upload")
    @ResponseBody
    public ResultVo upload(String parentName, MultipartFile uploadFile, HttpServletRequest request){
    
        return artistService.upload(parentName,uploadFile,request);
    }
    ------------------ArtistService---------------------
    @Override
    public ResultVo upload(String parentName, MultipartFile uploadFile, HttpServletRequest request) {
        try{
            //上传文件并且返回路径
            String filePath = FileUploadUtil.upload(parentName,uploadFile,request);
            return ResultVo.getSuccessVo("success",filePath);
        }catch (Exception e){
            e.printStackTrace();
            return ResultVo.getFailVo("fail");
        }
    }
    

  • 自行封装文件上传工具类(FileUploadUtil)

    /**
     * 文件上传:上传不同类型的文件，要存储到不同的文件夹中
     */
    public class FileUploadUtil {
        public static String upload(String parentName, MultipartFile uploadFile, HttpServletRequest request) {
            //1. 获取项目的根路径
            String basepath = request.getServletContext().getRealPath("/upload/");
            //2. 获取父文件夹路径，并判断是否存在
            // ..../upload/img/
            String parentPath = basepath+parentName+"/";
            File parentFile = new File(parentPath);
            //3. 不存在就创建
            if(!parentFile.exists()){
                parentFile.mkdirs();
            }
            //4. 生成不重复的文件名称
            // 文件名称不能重复(使用当前毫秒数，但是文件后缀需要获取)
            String fileName = System.currentTimeMillis()+getFileSuffix(uploadFile.getOriginalFilename());
            try {
                //文件上传
                uploadFile.transferTo(new File(parentPath+fileName));
            } catch (IOException e) {
                e.printStackTrace();
            }
            return "upload/"+parentName+"/"+fileName;
        }
        //返回文件后缀  x.x.gif
        public static String getFileSuffix(String originalName){
            //获取最后一个点的下标
            int index = originalName.lastIndexOf(".");
            //从某下标开始截取
            return originalName.substring(index);
        }
    }
    

• 添加歌手

  • add_artist.js

    // demo1 : 提交按钮 lay-filter的取值
    form.on('submit(demo1)', function(data){
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    
        //使用ajax向后端发异步请求
        $.ajax({
            type:"post",//请求方式
            url:"artist/add",//请求地址
            data:data.field,//传递表单字段
            success:function (res) { //后端执行成功之后回来调用的函数
                // res:后端执行完毕之后返回的结果
                layer.msg(res.msg);
                //父窗口重新加载(表格重新加载)
                window.parent.location.reload();
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    

  • 后端

    ---------------------ArtistController----------------------
    /**
         * 添加歌手
         */
    @RequestMapping("/add")
    @ResponseBody
    public ResultVo add(TbArtist tbArtist){
        ResultVo resultVo = artistService.add(tbArtist);
        return resultVo;
    }
    ---------------------ArtistServiceImpl----------------------
    @Override
    public ResultVo add(TbArtist tbArtist) {
        try{
            tbArtistMapper.insert(tbArtist);
            return ResultVo.getSuccessVo("添加成功");
        }catch (Exception e){
            e.printStackTrace();
            TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();//手动回滚
            return ResultVo.getFailVo("添加失败");
        }
    }