LayUI官方文档:https://layui.dev/docs/2/#introduce

XLSX NPM地址:https://www.npmjs.com/package/xlsx
XLSX 使用参考文档:https://juejin.cn/post/7003153489920524301 https://blog.csdn.net/qq_20805455/article/details/122229762

1、在官方网站上下载layui压缩文件解压后选择里面的layui文件夹,

2、XLSX下载里面的xlsx.core.min.js文件就可以了比如在这个https://unpkg.com/browse/xlsx@0.18.5/dist/ 里选择xlsx.core.min.js,不能下载的话,就自己建立一个同名文件,把里面的内容全部复制粘贴到这个新建文件上

文件夹示意图

页面效果如下:

HTML代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 layui.css -->
<link href="./layui/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="./layui/layui.js"></script>
<script type="text/javascript" src="./xlsx.core.min.js"></script>
<!-- <script type="module" src="./index.js"></script> -->
<script type="text/javascript" src="./index.js"></script>
<!-- 覆盖layui原生样式-->
<style>
.layui-form-label {
width: 100px !important;
/* padding: 9px 15px; */
padding: 9px 0px !important;
text-align: right !important;
} .btnDiv {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
} .layui-inline {
margin-left: 10px;
} .layui-laypage-em {
xbackground-color: #16baaa;
} .layui-form-select dl dd.layui-this {
background-color: #f8f8f8;
color: #16b777;
font-weight: 700;
} .layui-form-selected {
xcolor: red;
} input:focus {
background-color: lightblue;
border-color: #b71818;
} /* .layui-badge-rim,
.layui-border,
.layui-colla-content,
.layui-colla-item,
.layui-collapse,
.layui-elem-field,
.layui-form-pane .layui-form-item[pane],
.layui-form-pane .layui-form-label,
.layui-input,
.layui-input-split,
.layui-panel,
.layui-quote-nm,
.layui-select,
.layui-tab-bar,
.layui-tab-card,
.layui-tab-title,
.layui-tab-title .layui-this:after,
.layui-textarea {
border-color: #b71818;
} */ /* .layui-input-block {
margin-left: 90px !important;
} */
</style>
</head> <body style="padding: 20px;">
<form class="layui-form" action="">
<div class="layui-row">
<div class="layui-col-xs3">
<div class="layui-form-item">
<label class="layui-form-label">部门</label>
<div class="layui-input-block">
<select name="department" lay-filter="aihao" id="selectDepartment">
<option value=""></option>
<!-- <option value="0">写作</option>
<option value="1" selected>阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option> -->
</select>
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-form-item">
<label class="layui-form-label">用户</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" lay-verify="required" placeholder="请输入"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!-- <input type="radio" name="sex" value="男" title="男" checked> -->
<input type="radio" name="sex" value="男" title="男" id="manRadio" />
<input type="radio" name="sex" value="女" title="女" id="womanRadio" />
</div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="state" title="启用" value="启用" id="stateEnable">
<input type="checkbox" name="state" title="失效" value="失效" id="stateFailure">
<input type="checkbox" name="state" title="禁用" value="禁用" id="stateDisable">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs4">
<div class="layui-form-item">
<label class="layui-form-label">创建时间</label>
<div class="layui-inline" id="createTime">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="createTime-start-date" class="layui-input"
placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="createTime-end-date" class="layui-input"
placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item btnDiv">
<button type="button" class="layui-btn" id="btnQuery">查询</button>
<button type="button" class="layui-btn" id="btnReset">清除</button>
<button type="button" class="layui-btn" id="btnDownload">下载</button>
</div>
</form> <table class="layui-table" lay-filter="parse-table-demo" id="data-table">
<!-- <colgroup>
<col width="120">
<col width="120">
<col width="120">
<col width="120">
<col width="120">
<col width="120">
<col width="120">
<col>
</colgroup> -->
<thead>
<tr>
<th lay-data="{field:'id', width:100,hide:true}">id</th>
<th lay-data="{field:'index', width:100}">序号</th>
<th lay-data="{field:'departmentName', minWidth:120}">部门</th>
<th lay-data="{field:'username', width:120}">用户</th>
<th lay-data="{field:'sex', width:200}">性别</th>
<th lay-data="{field:'state', width:150}">状态</th>
<th lay-data="{field:'createTime', minWidth:150}">创建时间</th>
</tr>
</thead>
<tbody id="tableData"> </tbody> </table>
<div id="demo-laypage-layout-1" style="margin-top: 10px;"></div>
</body> </html>

JS代码如下:

/** 当前页 */
let currentIndex = 1;
/** 每页数据大小 */
let pageLimit = 2;
/** 总页数 */
let pageTotalCount = 0;
// Usage
layui.use(['form', 'table', 'upload', 'element', 'layer', 'jquery'], function () {
    var layer = layui.layer;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
    var laydate = layui.laydate;
    var laypage = layui.laypage;
    //初始化 查询表单里的标签元素数据 start
    let departments = initDepartmentSelect();
    if (departments) {
        $.each(departments, function (index, item) {
            // 下拉菜单里添加元素
            $("#selectDepartment").append(new Option(item.text, item.value));
        });
    }
    // // 渲染
    // laydate.render({
    //     elem: '#ID-laydate-demo'
    // });
    // // 英文版
    // laydate.render({
    //     elem: '#ID-laydate-demo-en',
    //     lang: 'en'
    // });
    // 日期范围 - 左右面板独立选择模式
    laydate.render({
        elem: '#createTime',
        range: ['#createTime-start-date', '#createTime-end-date']
    });
    // // 日期范围 - 左右面板联动选择模式
    // laydate.render({
    //     elem: '#createTime',
    //     range: ['#createTime-start-date', '#createTime-end-date'],
    //     rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    // });
    form.render();
    //初始化 查询表单里的标签元素数据 end
    queryData();
    //查询事件
    $("#btnQuery").click(function () {
        queryData();
    });
    //重置查询表单事件
    $("#btnReset").click(function () {
        $("#selectDepartment").val('');
        $("#username").val('');
       
        $("#createTime-start-date").val('');
        $("#createTime-end-date").val('');
        $("#stateEnable").prop('checked', false);
        $("#stateFailure").prop('checked', false);
        $("#stateDisable").prop('checked', false);
        $("#manRadio").prop('checked', false);
        $("#womanRadio").prop('checked', false);
        form.render();
        //inidData();
    });
    //excel导出事件
    $("#btnDownload").click(function () {
        exportExcelByTable("#data-table");
        let data = initDataList();
        exportExcelFile(data);
    });
    function queryData() {
        let department = $("#selectDepartment").val();
        let username = $("#username").val();
        let sex = $('input[name="sex"]:checked').val();
        //将页面全部复选框选中的值拼接到一个数组中
        var states = [];
        // $('input[type=checkbox]:checked').each(function () {
        //     arr_box.push($(this).val());
        // });
        $('input[name="state"]:checked').each(function () {
            states.push($(this).val());
        });
        let createTime_start = $("#createTime-start-date").val();
        let createTime_end = $("#createTime-end-date").val();
        //console.log("aaa")
        let result = getTableDataAndTotleCount(department, username, sex, states, createTime_start, createTime_end, currentIndex, pageLimit);
        //console.log("result",result)
        pageTotalCount = result.count;
        let pageData = result.data;
        setTableHtml(pageData);
        // 自定义排版
        laypage.render({
            elem: 'demo-laypage-layout-1',
            count: pageTotalCount,
            limit: pageLimit,
            limits: [2, 4, 8, 16],
            //layout: ['limit', 'prev', 'page', 'count', 'next']
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
            jump: function (obj, first) {
                // console.log(obj);
                // console.log(obj.curr); // 得到当前页,以便向服务端请求对应页的数据。
                // console.log(obj.limit); // 得到每页显示的条数
                // 首次不执行
                if (!first) {
                    currentIndex = obj.curr;
                    pageLimit = obj.limit;
                    // do something
                    let result = getTableDataAndTotleCount(department, username, sex, states, createTime_start, createTime_end, currentIndex, pageLimit);
                    pageTotalCount = result.count;
                    let pageData = result.data;
                    setTableHtml(pageData);
                    // let data =getTableData(obj.curr,obj.limit);
                    // pageData = pagination(currentIndex, pageLimit, data)
                    // setTableHtml(pageData);
                }
            }
        });
    }
    function setTableHtml(data) {
        let strHtml = "";
        let i =0;
        $.each(data, function (index, item) {
            i++;
            strHtml += (`<tr><td>${item.id}</td><td>${i}</td><td>${item.departmentName}</td>
            <td>${item.username}</td><td>${item.sex}</td><td>${item.state}</td><td>${item.createTime}</td></tr>`);
        });
        document.getElementById('tableData').innerHTML = strHtml;
        table.init('parse-table-demo', {
            // height: ''
        });
        // 行单击事件( 双击事件为: rowDouble )
        table.on('row(parse-table-demo)', function (obj) {
            var data = obj.data; // 获取当前行数据
            console.log('row(data-table)', data);
            // 显示 - 仅用于演示
            layer.msg('当前行数据:<br>' + JSON.stringify(data), {
                offset: '65px'
            });
            // 标注当前点击行的选中状态
            obj.setRowChecked({
                type: 'radio' // radio 单选模式;checkbox 复选模式
            });
        });
    }
});
/** 初始化部门下拉框 */
function initDepartmentSelect() {
    let array = [];
    //模拟从后端拿到的部门数据数组
    let list = [{ id: 1, name: '财务部' }, { id: 2, name: '行政部' }, { id: 3, name: '研发部' }, { id: 4, name: '销售部' }];
    if (list) {
        list.forEach(element => {
            let value = element.id
            let text = element.name
            array.push({ text, value });
        });
    }
    return array;
}
/*** 初始数据 */
function initDataList() {
    let data = [
        { id: 1, departmentId: 1, departmentName: '财务部', username: '张三', sex: '男', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 2, departmentId: 2, departmentName: '行政部', username: '李四', sex: '男', state: '失效', createTime: '2023-11-27 10:54:20' },
        { id: 3, departmentId: 3, departmentName: '研发部', username: '王五', sex: '男', state: '禁用', createTime: '2023-12-27 10:54:20' },
        { id: 4, departmentId: 4, departmentName: '销售部', username: '赵六', sex: '男', state: '启用', createTime: '2023-11-27 10:54:20' },
        { id: 5, departmentId: 1, departmentName: '财务部', username: '小丽', sex: '女', state: '启用', createTime: '2023-12-25 10:54:20' },
        { id: 6, departmentId: 1, departmentName: '财务部', username: '小明', sex: '男', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 7, departmentId: 3, departmentName: '研发部', username: '小王', sex: '男', state: '启用', createTime: '2023-12-20 10:54:20' },
        { id: 8, departmentId: 1, departmentName: '财务部', username: '小慧', sex: '女', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 9, departmentId: 2, departmentName: '行政部', username: '慧慧', sex: '女', state: '失效', createTime: '2023-12-27 10:54:20' },
        { id: 10, departmentId: 1, departmentName: '财务部', username: '晓丽', sex: '女', state: '启用', createTime: '2023-10-27 10:54:20' },
        { id: 11, departmentId: 2, departmentName: '行政部', username: '小莉', sex: '女', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 12, departmentId: 1, departmentName: '财务部', username: '田七', sex: '男', state: '启用', createTime: '2023-12-23 10:54:20' },
        { id: 13, departmentId: 2, departmentName: '行政部', username: '张三2', sex: '男', state: '禁用', createTime: '2023-12-22 10:54:20' },
    ];
    return data;
}
/** 获取页面表格的数据和总数 */
function getTableDataAndTotleCount(departmentId, username, sex, states, createTime_start, createTime_end, pageIndex, pageSize) {
   
    let data = initDataList();
    if (departmentId) {
        data = data.filter(m => m.departmentId == departmentId);
    }
    if (username) {
        data = data.filter(m => m.username.includes(username));
    }
    if (sex) {
        data = data.filter(m => m.sex == sex);
    }
    if (states && states.length > 0) {
        data = data.filter(m => states.includes(m.state));
    }
    if (createTime_start && createTime_end) {
        data = data.filter(m => m.createTime <= createTime_end && m.createTime >= createTime_start);
    }
    let count = data.length;
    if (data) {
        data = pagination(pageIndex, pageSize, data);
    }
    return { count, data };
}
/** 分页获取 */
function pagination(pageNo, pageSize, array) {
    var offset = (pageNo - 1) * pageSize;
    return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
}
/**
        * 对Date的扩展,将 Date 转化为指定格式的String
        * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
        * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        * 例子:
        * (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        * (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        */
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;
}
function getDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = ('0' + (now.getMonth() + 1)).slice(-2);
    const day = ('0' + now.getDate()).slice(-2);
    const hours = ('0' + now.getHours()).slice(-2);
    const minutes = ('0' + now.getMinutes()).slice(-2);
    const seconds = ('0' + now.getSeconds()).slice(-2);
    const formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    return formattedTime;
}
// 导出excel
/** 根据table导出Excel */
function exportExcelByTable(tableName) {
    // 使用XLSX导出 https://www.npmjs.com/package/xlsx 使用参考文档:https://juejin.cn/post/7003153489920524301 https://blog.csdn.net/qq_20805455/article/details/122229762
    let currentDate = new Date().Format("yyyy-MM-dd HH:mm:ss");
    let excelName = `${currentDate}.xlsx`;
    console.log('excelName', excelName)
    // if (tableList) {
    //     exportExcelFile(tableList, '表1', excelName);
    // } else {
    //     //'没有导出数据'
    // }
    let table1 = document.querySelector(tableName);//document.querySelector("#data-table");
    //将一个table对象转换成一个sheet对象,使用js-xlsx插件将table转成workbook时,会默认把内容是数字的字符串当做数字处理,raw:true属性控制把内容当做字符串进行输出
    let sheet = XLSX.utils.table_to_sheet(table1, { raw: true, skipHeader: true, });
    let wscols = [    // 每列不同宽度px
        { wch: 10 },
        { wch: 15 },
        { wch: 20 },
        { wch: 25 },
        { wch: 25 },
        { wch: 25 },
        { wch: 20 },
        { wch: 25 },
        { wch: 25 },
        { wch: 25 },
        { wch: 25 },
    ];
    // workbook.SheetNames[0]获取到到是文件里的到第一个表格
    sheet["!cols"] = wscols;
    openDownloadDialog(sheetToblob(sheet), excelName);
}
/** 修改表格行高列宽度 */
function test(worksheet) {
    //let table = document.getElementById("exportTable");
    //let worksheet = XLSX.utils.table_to_sheet(table);
    let workbook = XLSX.utils.book_new();
    let wscols = [    // 每列不同宽度px
        { wch: 12 },
        { wch: 26 },
        { wch: 12 },
        { wch: 12 },
        { wch: 14 },
        { wch: 12 },
        { wch: 12 },
        { wch: 15 },
    ];
    // workbook.SheetNames[0]获取到到是文件里的到第一个表格
    worksheet["!cols"] = wscols;
    let wsrows = [{ hpx: 20 }];  // 每行固定高度px
    for (let i = 0; i <= this.total; i++) {   // total  列表条数
        wsrows.push({ hpx: 20 });
    }
    worksheet["!rows"] = wsrows;
    XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
    try {
        XLSX.writeFile(workbook, `${this.time_date}报表统计.xlsx`);  //  time_date 所选日期
    } catch (e) {
        console.log(e, workbook);
    }
}
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function sheetToblob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }); // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}
function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}
/**
* 根据json数据导出 excel 文件
* @param array JSON 数组
* @param sheetName 第一张表名
* @param fileName 文件名
*/
function exportExcelFile(array, sheetName = '表1', fileName = 'example.xlsx') {
    const jsonWorkSheet = XLSX.utils.json_to_sheet(array);
    const workBook = {
        SheetNames: [sheetName],
        Sheets: {
            [sheetName]: jsonWorkSheet,
        }
    };
    return XLSX.writeFile(workBook, fileName);
}

layui之静态表格的分页及搜索功能以及前端使用XLSX导出Excel功能的更多相关文章

  1. 【JAVA】JSP+layui框架 静态表格转化成数据表格

    <table lay-filter="demo" class="layui-table" id="excTable"> < ...

  2. layui + mvc + ajax 导出Excel功能

    为了更方便,没基础的伙伴更容易理解,我尽量详细简便 省了很多代码,一步一步的试 自己引入文件 1. html 前端视图代码 Layui的数据绑定 全部代码 @{ Layout = null; } &l ...

  3. PHP导入导出excel表格图片(转)

    写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...

  4. PHP导入导出excel表格图片的代码和方法大全

    基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只是因为Excel的兼容能力强,能够正确打开而已.修改这种文件后再保存,通常会提示你是否要转换成Excel文件 ...

  5. php导出excel表格的使用

    网站后台有很多列表数据,常常都会有导出excel表格的需求,和大家分享一个实用的导出excel表格方法: 不多说,上代码: /** * @param array $data 要导出的数据 * @par ...

  6. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  7. 使用JAVA导出EXCEL表格(POI)

    一.POI概述 Jakarta POI 是一套用于访问微软格式文档的Java API.POI提供API给Java程序对Microsoft Office格式档案读和写的功能.在许多企业办公系统中,经常会 ...

  8. vue 利用xlsx、xlsx-style、file-saver实现前端导出excel表格 (包括设置单元格居中、边框等样式) antdesignvue、elementui、vxetable 等都适用

    我用的方法是在表格的根组件外层赋一个div用来导出整个表格,所以antdesignvue.elementui.vxetable 或者原生的table写法应该全都适用,此处我用的框架为antdesign ...

  9. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  10. datatable转layui表格v2[分页and带模板]【偏实例】

    本项目由普通mvc+webapi接口构成.按执行顺序,代码如下:主控制器:public ActionResult Index(int id=0) { ViewData["myid" ...

随机推荐

  1. 年搜索量超 7 亿次背后:这款 APP 用火山引擎 DataTester 完成“数据驱动”

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 双十一刚过,双十二在即,随着线上营销玩法的层出不穷,各平台之间的价格逐渐"内卷".消费者对跨平 ...

  2. Solon Web 开发,三、打包与运行

    Solon Web 开发 一.开始 二.开发知识准备 三.打包与运行 四.请求上下文 五.数据访问.事务与缓存应用 六.过滤器.处理.拦截器 七.视图模板与Mvc注解 八.校验.及定制与扩展 九.跨域 ...

  3. Mapper that could not be found

    现象1 mapper 资源扫不到 resources 建的是 目录 ,不是 package 所以如果直接 a.b 的方式创建,会扫描不到 mapper.xml 文件 现象2 缺少配置文件 HisDru ...

  4. PPT 动画-多层旋转(圆角三角形)

    多层旋转动画 插入若干个三解形 然后将页面切换成[平滑](Office 2019~ 365 才有这功能,或者 iSlide 平滑过渡)

  5. Spring Boot Admin 查看 Client 日志

    日志配置如下:如何将不同业务模块产生的日志 分多文件记录 此时 Spring Boot Admin 中看不了 Client 的日志 Logfile ViewerBy default the logfi ...

  6. vue mutations与actions的区别

    关于 mutations与actions的区别,网上有很多文章,大多是照着vue.js的教程再来一波!!因为最近接手vue项目,自己之前vue的知识点掌握也不深,就此机会把这个知识点再深挖一下. 使用 ...

  7. SPI 在 Dubbo中 的应用

    通过本文的学习,可以了解 Dubbo SPI 的特性及实现原理,希望对大家的开发设计有一定的启发性. 一.概述 SPI 全称为 Service Provider Interface,是一种模块间组件相 ...

  8. 开源:Taurus.DTS 微服务分布式任务框架,支持即时任务、延时任务、Cron表达式定时任务和广播任务。

    前言: 在发布完:开源:Taurus.DTC 微服务分布式事务框架,支持 .Net 和 .Net Core 双系列版本,之后想想,好像除了事务外,感觉里面多了一个任务发布订阅的基础功能. 本想既然都有 ...

  9. 智慧地产-售楼中心 3D 沙盘可视化

    前言 随着"互联网+房地产"走入全国各大地产项目,房企依托互联网将房地产从传统地产转向智慧地产已然是眼下用户最欢迎的转型模式.智慧地产是由智慧社区.智慧园区.智慧公寓及智能家居等组 ...

  10. 聚焦 AIGC,函数计算为 AI 应用插上腾飞翅膀

    6月1日,2023 阿里云峰会·粤港澳大湾区在广州举办,Serverless 加速创新分论坛如约亮相,阿里云函数计算 FC 聚焦 AIGC 应用开发,GPU 性能体验再升级,让 AIGC 应用开发更简 ...