layui使用笔记及常见前端相关问题记录

文章目录

• • 背景
  • Layui常见问题
  • • 如何在Layui中使用Jquery
    • Get请求
  • 其他
  • • 调整元素大小

背景

因为本人专职Java后端，对于前端一窍不通，每当想做一些好用的小功能，缺乏前端展示是非常痛苦的一件事，所以痛定思痛，开始简单学习Layui作为平时前端开发框架。

为什么选择Layui?

询问了周边的前端大佬，Layui简单易上手，也可以EasyUi.
项目结构图

Layui常见问题

如何在Layui中使用Jquery

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

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

其他

调整元素大小

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