layui

layui
发布日期:   2021-04-20
更新日期:   2021-06-23
文章字数:   2.4k
阅读时长:   11 分
阅读次数:  

SpringBoot+Layui

一、Layui数据表格组件

步骤：

  1. 进入layui官网下载layui组件

    image-20210420215752137

  2. 你想要用哪个组件，直接到官网上去拷贝

    image-20210420220108589

  3. 然后引入你本地下载好的layui（js和css）

    image-20210420220253179 image-20210420220414104

  4. table组件里面的各参数说明

    image-20210420225330818 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>lujiahong</title>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        /* .layui-table-cell{
            text-align: center;
            height: 200px;
            white-space: normal;
        }
        .layui-table img{
            max-width: 300px;
        } */
    </style>
</head>
<body>
    
<table class="layui-hide" id="test" lay-filter="test"></table>
<img src="images\1570365161-shmEFlWfHU.jpg"  alt="">
<script type="text/html" id="myImg">
    <!-- 图片 -->
    <img src="/{{d.image}}"/>
</script>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
</script>
   
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script language=”javascript” type=“text/javascript” src=common.js></script>

<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    //layui.use('talbe',()=>{})采用layui框架中的table组件
    layui.use(['table','jquery'], function(){
        var table = layui.table;
        
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test'//elem表示绑定table标签里面的id
            ,url:'http://localhost:8080/item/findAll'//接口地址（数据-json格式）
            ,toolbar: '#toolbarDemo'//绑定工具栏中的id
            ,title: '商品数据表'//layui导出excel时的表名
            ,totalRow: true//是否显示合计数
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}//checkbox显示类型复选框，left在table最左侧显示
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}//定义列，field是json数据里面对应的字段，title是定义table列名显示的字段，fixed是定义该列显示的位置，sort是定义table开启排序，totalRowText是定义统计整列数据之和的名称
                ,{field:'title', title:'商品标题', width:120, edit: 'text'}//width是定义该列的列宽，edit是定义编辑事件-双击该单元数据进行编辑，同样可以在工具栏中绑定事件
                ,{field:'sellPoint', title:'商品卖点', width:120, edit: 'text'}
                ,{field:'price', title:'商品价格', width:120, sort: true, totalRow: true}//totalRow表示定义该列是否做合计统计
                ,{field:'num', title:'库存数量', width:120, edit: 'text', sort: true}
                ,{field:'barcode', title:'商品条形码', width:120, sort: true, totalRow: true}
                ,{field:'image', title:'商品图片', width:120, templet: function (data) {
                        return "<div><img src="+data.image+" /></div>";
                    }}
                ,{field:'detail', title:'商品详情', width:120}
                ,{field:'status', title:'商品状态', width:120}
                ,{field:'created', title:'创建时间', width:120,templet: function (data) {
                        return new Date(Date.parse(data.created.replace(/-/g,  "/"))).format("yyyy-MM-dd & hh:mm:ss");
                    }}
                ,{field:'updated', title:'更新时间', width:120}
                ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
                ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}//toolbar表示该列绑定工具条点击事件按钮，对该数据行的操作
            ]]
            ,page: true
            ,response:{
		      statusName:'code', //规定返回的状态码字段为code
			  statusCode:200 //规定成功的状态码味200
		    },
		     parseData:function(res){
			  return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
		    		"data" : res.data, //解析数据列表
                    "count": res.count //解析总条数
			  }
		   }
        });

        //工具栏事件
        //toolbar表示工具条，test是table标签里面的lay-filter对应的值
        //obj.config.id即为table标签中的属性id所对应的值：test
        //table.checkStatus(obj.config.id)有两个值：data和isAll data即为复选框选中的数据、isAll（true、false）表示是否全部选中复选框
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });

          //监听工具条
          //tool表示工具条，test是table标签里面的lay-filter对应的值
          //obj表示我们点击事件从table中获取的数据
          //layui是layui自带的一个弹框，index即我们选择行的下标
          //JSON.stringify(data)是把我们从table中获取的键值对数据转换为json数据格式
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
            });
            } else if(obj.event === 'edit'){
            layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        Date.prototype.format = function(fmt) { 
            var o = { 
                "M+" : this.getMonth()+1,                 //月份 
                "d+" : this.getDate(),                    //日 
                "h+" : this.getHours(),                   //小时 
                "m+" : this.getMinutes(),                 //分 
                "s+" : this.getSeconds(),                 //秒 
                "q+" : Math.floor((this.getMonth()+3)/3), //季度 
                "S"  : this.getMilliseconds()             //毫秒 
            }; 
            if(/(y+)/.test(fmt)) {
                    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt; 
        }  
    });
</script>
</body>
</html>

二、Spring Boot后台数据接口

  • 扩展一

view-source 是一种协议，查看源码

在当前网页地址前输入：view-source: 就可以查看当前网页的源码

例如：view-source:https://www.baidu.com/

JS用法 : window.location=“view-source:” + window.location
————————————————

  • 扩展二

谷歌浏览器插件

https://www.cnblogs.com/JulianHuang/p/12419604.html
  • 扩展三

谷歌浏览器安装json-view插件

分类专栏： 实用开发软件/插件 文章标签： json-view

今天，给大家推荐一款十分好用的Chrome浏览器的插件，叫做json-view
1.介绍：这是一款浏览器解析json的插件，可以更加优雅的展现json格式的数据
2.使用效果
使用前：

使用后：

优雅了很多有没有，安装的方式呢，也极其简单。

3.安装方式
首先呢，下载插件
链接：https://pan.baidu.com/s/1TNI2LsPgzPba_v4_1I9C3Q
提取码：hoxr

找个地方解压完，这是笔者解压后进入文件夹的文件目录

**开始安装！打开谷歌浏览器，点击右上角的 … 点击设置，点击 拓展程序 **

找到谷歌浏览器的拓展程序，记得开启开发者模式，点击 “加载已解压的拓展程序”

！！记得要点击进去，进到目录里面

这样就安装成功了，是不是很简单的！
原文链接：https://blog.csdn.net/BrotherJinJin/article/details/101126690

三、单体应用和前后端分离下的数据对接

  1. 关于跨域cors配置和mybatis-plus配置

    1、cors

    @Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedOriginPatterns("*")
                .allowedHeaders("*")
                .allowedMethods("GET","POST","UPDATE","PUT","PATCH")
                .maxAge(3600L);
    }
}

    2、mybatis-plus

    @Configuration
public class MyBatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}
    <dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.1</version>
</dependency>

  2. 关于templet的使用

  1. img

    {field:'image', title:'商品图片', width:120, templet: function (data) {
                        return "<div><img src="+data.image+" /></div>";
                    }}

  2. data

    java

    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
private Date updated;

    cols

    {field:'created', title:'创建时间', width:120,templet: function (data) {
                        return new Date(Date.parse(data.created.replace(/-/g,  "/"))).format("yyyy-MM-dd & hh:mm:ss");
                    }}

    js

    Date.prototype.format = function(fmt) { 
    var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
    for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
    return fmt; 
}

  3. 把页面整合到springboot里面的配置

    image-20210424000607231 image-20210424001804542

四、ECharts数据可视化

  1. echarts下载和教程

    • echarts下载

      https://echarts.apache.org/zh/download.html

    • echarts教程

      https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

  2. echarts使用说明

    1. 建立一个html，引入echarts.min.js,直接官网上复制即可

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

    2. 上面的是一个统计图的样表，如果要做一个饼图或者其它图形，直接到示列里面点击想要的图信，复制里面代码即可，图形的不同主要就是区别在option的不同，观察即可明白

五、Layui搭建后台管理系统

文章作者: LJH
文章链接: https://ljh130168.github.io/2021/04/20/layui/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 LJH !
layui
赏
  目录