后端程序员好上手的前端框架——layui

最新推荐文章于 2025-11-15 09:09:31 发布

原创

最新推荐文章于 2025-11-15 09:09:31 发布 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #layui #前端

后端程序员好上手的前端框架——layui

layui的基础之后再补，现在是介绍pear admin layui

测试用后端项目地址

安装

地址（gitee）

推荐下载的版本：

3.5.0
4.0.3

运行

把项目在vscode打开，找到index.html直接运行即可看到效果

（还是很炫酷的）

和vue的对比

vue的生态太多，对js的特性掌握要求较高(但是在移动端的开发上兼容不错)

vue2
vue3

而layui只需要简单是三件套(html,css,javascript)的基础知识

总结

如果需要支持大规模的管理和开发，还需要跨平台多端使用，需要实现的功能是更多的情况下，这个时候适合选用vue；如果是需要快速搭建一个网站，使用layui

整体结构

其中，index页面是入口，运行的时候直接运行这个html页面即可，类似导航栏的作用；导航栏的细分的页面一般是存在view文件夹中

而admin/data/menu.js大概类似vue里面的router的作用（说错了欢迎指正，本人主后端）

通用部分

需求举例：若需编写一个表格进行渲染。

html 部分：

<table class="layui-hide" id="test1"></table>

（具体 API 可详见官网）。

script 部分：

从 layui 引入各种组件：

<script>
    layui.use(function () {
   
   
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.$;
    });
</script>

删除操作的回调函数：

table.on('tool(test1)', function (obj) {
   
   
    console.log(obj);
    let event = obj.event;
    if (event === 'delete') {
   
   
        // 删除提示
        layer.confirm('确定删除吗？', {
   
    btn: ['ok', 'close'] }, function (index) {
   
   
            // 删除操作
            console.log("删除");
            console.log(index);
            // 发送 Ajax 请求
            let roleId = obj.data.roleId;
            console.log("roleId");
            console.log(roleId);
            $.getJSON("http://localhost:8084/deleteRole", {
   
    roleId: roleId }, function (res) {
   
   
                console.log(res);
                if (res.code ===