现在大多数的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模板。

    
    
    后台管理系统
    



    
        用户标识
        
            
        
    
    
        用户名称
        
            
        
    

    
        单行选择框
        
            
                
                写作
                阅读
                游戏
                音乐
                旅行
            
        
    

    
        标签框
        
            
            
            
        
    
    
        开关
        
            
        
    
    
        单选框
        
            
            
            
        
    
    
        
            立即提交
            重置
        
    



<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>

看看效果

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

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

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