layui后台管理首页配置

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

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>

分页查询歌手列表

前端设置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_photofrom tb_artist limit #{start},#{limit}
</select>
<select id="selectCount" resultType="java.lang.Integer">select count(*) from tb_artist
</select>

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

<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将标签引入]]
});

自定义模板显示歌手头像

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图片标签并且返回⭐⭐⭐⭐⭐⭐

点击添加歌手跳转新页面

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>

上传文件

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---------------------------@Overridepublic 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.jpgreturn "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);
}

layui后台管理首页配置相关推荐

django21：admin后台管理\media配置\图片防盗链\暴露后端资源\路由分发\时间分类
admin后台管理创建超级用户 createsuperuser 1.到应用下的admin.py注册模型表 from django.contrib import admin from blog imp ...
后台管理----首页布局分析1
1.常见的后台管理布局如下 2.使用elementPlus 组件库的 container 组件进行布局 3. 代码展示相关代码的样式 .main {position: fixed;top: 0;le ...
LAYUI后台管理模板
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 后台模板今天发现一个非常美观且实用的后台管理模板,图示如下: 模板地址 http://lay ...
layui查档页面_首页--layui后台管理模板 2.0
将顶部高度修改为50px,如果有朋友感觉还是原来的高度更好,请将index.css文件中最底部的4行样式去掉即可,有注释郑重提示:由于后期会对此框架进行多次开发,基本上修改的是大框架,所以强烈不建议 ...
#项目#layui后台管理模板总结
xadmin 的部分模板片段,首页导航栏 <#macro navLeft><div class="left-nav"><div id="si ...
LayUI 后台管理模板
页面代码 <div style="height:60px;position: relative;top: 0;width:100%;z-index: 100;background: # ...
Django后台管理常用配置
创建后台管理员: python3 manage.py createsuperuser 在admin.py文件中注册要管理的实体类: admin.site.register(Author) 重写实体类的 ...
layui后台管理、图片裁切、cropper富文本编辑器实现
需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现:还有一个就是图片的裁切(比如用户的头像,比如博客的封面),因为在开发这两个功能的时候,也遇到了很 ...
layui后台管理登录
1. 登录操作进行验证判断 2. 调用接口发送请求 3. 可存储信息在浏览器缓存此处所用请求方法为js中自己写的方法封装好的 ,感兴趣的可以去看下.layui封装js封装js方法https://bl ...

layui后台管理首页配置

layui后台管理首页配置

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

layui后台管理首页配置

导入layui

index.html

分页查询歌手列表

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

后端

ArtistMapper.xml

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

自定义模板显示歌手头像

点击添加歌手跳转新页面

上传文件

layui后台管理首页配置相关推荐

最新文章

热门文章