Layui usage notes and common front-end related problems record

background

Because I am a full-time Java back-end, I don't know anything about the front-end. Whenever I want to do some useful small functions, the lack of front-end display is a very painful thing, so I learned from the pain and started to learn Layui as a normal front-end development framework.

Why choose Layui?

Asked the surrounding front-end bosses, Layui is easy to use, and it can also be EasyUi.
Project structure diagram

Layui FAQ

How to use Jquery in Layui

<script>
    var $; // 使用jQuery
    layui.use(['jquery'], function () {
    
     // 加载jQuery组件
        $ = layui.$; //使用jQuery 重点处

    });
    function getLogFile() {
    
    
        var url = $('#url').val();
        $("#log-frame").attr("src", baseApi + "?filePath=" + url); // 使用jQuery
    }
</script>   

Get request

        $.get("transfer", {
    
    acct: acct, amount: amount},
            function (data) {
    
    

                layer.msg(data, {
    
    
                        icon: 1,
                        time: 3000 //2秒关闭（如果不配置，默认是3秒）
                    },
                    function () {
    
    
                        //do something
                    });
            })

实际： http://localhost:8080/transfer?acct=laker&amount=100000

other

Resize elements

        <iframe src="" frameborder="1" id="log-frame" width="99%" style="height: calc(100vh - 70px);"></iframe>