layui后台管理首页配置

layui后台管理首页配置

1. 项目SSM整合，参考我之前的笔记视频

2. layui后台管理首页配置

   • 导入layui

   • index.html

     <div class="layui-side layui-bg-black">
         <div class="layui-side-scroll">
             <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
             <ul class="layui-nav layui-nav-tree" lay-filter="test">
                 <li class="layui-nav-item layui-nav-itemed">
                     <a class="" href="javascript:;">歌手管理</a>
                     <dl class="layui-nav-child">
                         <!--
     a标签跳转页面嵌套到iframe标签中需要：a标签的target属性跟iframe标签的name值一致
     -->
                         <dd><a target="index" th:href="@{artistlist}">歌手列表</a></dd>
                     </dl>
                 </li>
                 <li class="layui-nav-item">
                     <a href="javascript:;">专辑管理</a>
                     <dl class="layui-nav-child">
                         <dd><a target="index" href="javascript:;">专辑列表</a></dd>
                     </dl>
                 </li>
                 <li class="layui-nav-item">
                     <a href="javascript:;">歌曲管理</a>
                     <dl class="layui-nav-child">
                         <dd><a href="javascript:;">歌曲列表</a></dd>
                     </dl>
                 </li>
                 <li class="layui-nav-item">
                     <a href="javascript:;">歌单管理</a>
                     <dl class="layui-nav-child">
                         <dd><a href="javascript:;">歌单列表</a></dd>
                     </dl>
                 </li>
             </ul>
         </div>
     </div>
     

3. 分页查询歌手列表

   • 前端设置page:true,默认传参page=1&limit=10

   • 后端

     ----------------------ArtistController--------------------
     @RequestMapping("/list")
     @ResponseBody  //返回json数据
     public ResultVo list(Integer page,Integer limit){
         ResultVo resultVo = artistService.getArtistListByPage(page,limit);
         return resultVo;
     }
     ----------------------ArtistService--------------------
     // 第一页：select * from tb_artist  limit 0,10
     // 第二页：select * from tb_artist  limit 10,10
     // 第二页：select * from tb_artist  limit (page-1)*limit,limit
     @Override
     public ResultVo getArtistListByPage(Integer page, Integer limit) {
         //分页查询的起始位置
         Integer start = (page-1)*limit;
         try {
             //分页查询
             List<TbArtist> artistList = artistMapper.getArtistListByPage(start,limit);
             //查询数据总条数
             Integer totalSize = artistMapper.selectCount();
             ResultVo successVo = ResultVo.getSuccessVo(artistList);
             //分页时必须传递总数量，layui才能自动计算到底多少页
             successVo.setCount(totalSize);
             return successVo;
         }catch (Exception e){
             e.printStackTrace();
             ResultVo failVo = ResultVo.getFailVo();
             return failVo;
         }
     }
     ----------------------ArtistDao--------------------
     /**
          * 分页查询
          * @param start:起始位置
          * @param limit:查询数量
          *
          *  mybatis一次传入多个参数：1. 将多个参数封装成对象传入  2. 单独分开传多个参数时，要加@Param("")标识参数
          * @return
     */
     List<TbArtist> getArtistListByPage(@Param("start") Integer start, @Param("limit")Integer limit);
     
     /**
          * 总条数
          * @return
     */
     Integer selectCount();
     

   • ArtistMapper.xml

     <select id="getArtistListByPage" resultMap="BaseResultMap">
         select a_id, a_name, a_photo
         from tb_artist limit #{start},#{limit}
     </select>
     <select id="selectCount" resultType="java.lang.Integer">
         select count(*) from tb_artist
     </select>
     

4. 自定义表格的行工具栏，头工具栏按钮

   <table class="layui-hide" id="artistlist" lay-filter="test"></table>
   <!--行工具栏-->
   <script type="text/html" id="barDemo">
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">删除</a>
   </script>
   <!--头工具栏-->
   <script type="text/html" id="headBar">
       <a class="layui-btn" lay-event="detail">添加歌手</a>
       <a class="layui-btn  layui-btn-danger">批量删除</a>
   </script>
   

   table.render({
       ...
       ,toolbar: '#headBar' //开启头工具栏，default是默认，也可以自己定义，引入对应的id
       ,{fixed: 'right',width:"18%", align:'center', toolbar: '#barDemo'}//行工具栏，通过id将标签引入
       ]]
   });
   

5. 自定义模板显示歌手头像

   table.render({
       elem: '#artistlist'
       ,height: 500
       ,url: '/admin/artist/list' //后端的歌手列表接口
       ,title: '歌手列表'
       ,page: true //开启分页,默认传参page=1&limit=10
       ,toolbar: '#headBar' //开启头工具栏，default是默认，也可以自己定义，引入对应的id
       ,totalRow: true //开启合计行
       ,cols: [[ //表头
           {type: 'checkbox', fixed: 'left'}
           // field的值必须跟返回类的属性一致，可以将返回的数据自动赋值给表格
           ,{field: 'aId', title: '歌手ID',width:"35%"}
           ,{field: 'aName', title: '歌手名',width:"35%"}
           ,{field: 'aPhoto', title: '歌手头像',templet:function (d) {
               //d:是每行对应的歌手对象
               return "<img src="+d.aPhoto+">";
           }
            }
           ,{fixed: 'right', width: "18%", align:'center', toolbar: '#barDemo'}//引用行工具栏标签
       ]]
   });
   

   使用templet对头像拼接img图片标签并且返回⭐⭐⭐⭐⭐⭐

6. 点击添加歌手跳转新页面

   artist.js

   //监听头工具栏事件
   //监听表格怎么指定：使用表格的lay-filter的取值
   table.on('toolbar(artistlist)', function(obj){
       var checkStatus = table.checkStatus(obj.config.id)
       ,data = checkStatus.data; //获取所有选中行的数据
       //obj.event:是每个按钮lay-event的取值
       switch(obj.event){
           case 'add':
               //弹出add_artist页面
               layer.open({
                   type:2,//1（页面层）2（iframe层）3（加载层）
                   title:"添加歌手",
                   content:"/add_artist",
                   area: ['60%', '60%'],//指定宽高
                   shade:0.8,//调节遮罩层的透明度
                   shadeClose:true
               })
               break;
           case 'deleteBatch':
               if(data.length === 0){
                   layer.msg('请选择一行');
               } else {
                   layer.msg('删除');
               }
               break;
       };
   });
   

   PageController

   /**
        * 返回添加歌手页面
        */
   @RequestMapping("/add_artist")
   public String addArtist(){
       return "artist/add_artist";
   }
   

   add_artist.html

   <html lang="en" xmlns:th="http://www.thymeleaf.org">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
   </head>
   <body>
       <form class="layui-form layui-form-pane" action="">
           <div class="layui-form-item">
               <label class="layui-form-label">歌手名称</label>
               <div class="layui-input-inline">
                   <!--name要跟实体类的属性一致-->
                   <input type="text" name="aName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">歌手头像</label>
               <!--layui-input-block:输入框的块级样式-->
               <div class="layui-input-block">
                   <div class="layui-upload">
                       <button type="button" class="layui-btn" id="chooseImg">
                           上传头像
                       </button>
                       <div class="layui-upload-list">
                           <img class="layui-upload-img" id="demo1">
                           <p id="demoText"></p>
                       </div>
                   </div>
               </div>
           </div>
           <div class="layui-form-item">
               <div class="layui-input-block">
                   <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
               </div>
           </div>
       </form>
   </body>
   <!--先引入layui.js,再引入自己写的js-->
   <script th:src="@{layui/layui.js}"></script>
   <script th:src="@{js/add_artist.js}"></script>
   </html>
   

7. 上传文件

   add_artist.js

   layui.use(['upload', 'element', 'layer'], function() {
       var $ = layui.jquery
           , upload = layui.upload
           , element = layui.element
           , layer = layui.layer;
   
       //常规使用 - 普通图片上传
       var uploadInst = upload.render({
           elem: '#chooseImg'//上传文件按钮的id
           , url: '/admin/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,'width':'100px','height':'100px'});
               });
           }
           //done:上传之后执行的函数
           , done: function (res) {
           }
       });
   })
   

   导入上传文件依赖添加上传解析器

   ---

   <dependency>
          <groupId>commons-fileupload</groupId>
          <artifactId>commons-fileupload</artifactId>
          <version>1.3.1</version>
      </dependency>
      <!-- commons-io -->
      <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.4</version>
      </dependency>
      <!--javax.servlet-api：为了使用request对象 -->
      <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <version>3.1.0</version>
          <scope>provided</scope>
      </dependency>
      
      <!--上传文件解析器-->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
      </bean>
   

   ArtistController

   /**
           * 接受前端传递的文件，并且上传文件，而且返回文件在服务器存储的相对路径
      */
   @RequestMapping("/upload")
   @ResponseBody  //返回json数据
   public ResultVo upload(MultipartFile uploadFile, String parentName, HttpServletRequest request){
       return artistService.upload(uploadFile,parentName,request);
   }
   -----------------------ArtistService---------------------------
       @Override
       public ResultVo upload(MultipartFile uploadFile, String parentName, HttpServletRequest request) {
       try{
           String filePath = FileUploadUtil.uploadFile(uploadFile, parentName, request);
           ResultVo successVo = ResultVo.getSuccessVo(filePath);
           return successVo;
       }catch (Exception e){
           e.printStackTrace();
           ResultVo failVo = ResultVo.getFailVo();
           return failVo;
       }
   }
   

   FileUploadUtil

   /**
           * 上传文件并且返回存储的相对路径的方法
           * parentName：取值可能是img,可能是mp3,可能是mp4
           */
   public static String  uploadFile(MultipartFile uploadFile, String parentName, HttpServletRequest request){
       //1. 获取文件的原始名字
       String originalFilename = uploadFile.getOriginalFilename();
       //2. 获取项目的根路径
       //   D:\student\chengshixueyuan_code \ music_manager \ target \ music_manager \ upload\
       String basepath = request.getServletContext().getRealPath("/upload/");
       //3. 获取存放文件的父路径
       // img\
       String parentPath = parentName+"/";
       //4. 判断父文件夹是否存在，不存在就创建，存在直接使用
       File parentFile = new File(basepath + parentPath);
       if(!parentFile.exists()){
           //5. 如果不存在，创建文件夹
           parentFile.mkdirs();
       }
       Date date = new Date();
       SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddhhmmssSSS");//年月日时分秒毫秒
       //6. 将这个不会重复的时间作为文件名
       String fileName = simpleDateFormat.format(date);
       //7. 文件上传
       try {
           uploadFile.transferTo(new File(basepath+parentPath+fileName+getSuffix(originalFilename)));
       } catch (IOException e) {
           e.printStackTrace();
       }
       //   upload/img/20210101231321312.jpg
       return "upload/"+parentName+"/"+fileName+getSuffix(originalFilename);
   }
   /**
           * 根据文件名称返回文件后缀
           *
           *  1.png  3.mp3   1.a.mp3
           */
   public static String getSuffix(String originalFilename){
       //获取最后一个.的位置（.的下标）
       int index = originalFilename.lastIndexOf(".");
       //字符串的截取方法(从index开始截取，默认到末尾)
       return originalFilename.substring(index);
   }