网站首页 > 知识剖析正文

SpringBoot集成LayUI前端组件库

nixiaole 2025-01-13 16:44:36 知识剖析 14 ℃

现在大多数的WEB应用都是前后端分离，前端采用VUE,React等.但是今天我们介绍一个不用前后端分离的集成方案LayUI前端组件，作为纯后端开发我觉着上手还是挺简单的。

LayUI是一套开源的Web UI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS的开发方式，极易上手，拿来即用。LayUI提供了丰富的组件和样式，可以帮助开发者快速构建美观且响应式的Web界面。

LayUI官方文档：https://layui.dev/ 直接下载代码目录如下

将layui目录下的 css font layui.js 拷贝到应用中resources/static目录下

写个Controller

跳转到userForm.html

@RequestMapping("/userForm")
public ModelAndView userForm(Long userId) {
    logger.info("userForm controller");
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject("userEntity", helloBiz.getUser(userId));
    modelAndView.setViewName("userForm");
    return modelAndView;
}

写个userForm.html

位置在resources/templates/userForm.html

注意layui.css 和 layui.js 的引入路径；

变量的使用“用户标识”和“用户名称”，因为用了Thymeleaf模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="/css/layui.css">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户标识</label>
        <div class="layui-input-block">
            <input type="text" name="username"  th:value=" ${userEntity.userId}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-block">
            <input type="text" name="username"  th:value=" ${userEntity.nickName}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单行选择框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <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 class="layui-form-item">
        <label class="layui-form-label">标签框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
            <input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
            <input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
        </div>
    </div>
    <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="女">
            <input type="radio" name="sex" value="禁" title="禁用" disabled>
        </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>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/layui.js"></script>
<script>
    layui.use(['form', 'laydate', 'util'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
 
    });
</script>
</body>
</html>

看看效果

layui.css 和 layui.js是非压缩的，可以自己考虑压缩一下，提高下性能

至于layui的各种组件，参考官网 https://layui.dev/

感兴趣的关注一下，后续会继续集成其他各种组件，并实现一个小项目。

上一篇：超详细带你从入门开始，开发一个超实用的浏览器插件
下一篇：一文读懂Java的Class文件结构

猜你喜欢

最近发表