超简单！Layui从零构建企业级后台管理系统-优快云博客

超简单！Layui从零构建企业级后台管理系统

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

你还在为复杂的后台系统开发烦恼吗？本文将带你用Layui组件库，从零开始快速搭建一个功能完善的企业级后台管理系统。无需深厚的前端功底，跟随步骤操作，2小时内即可完成基础框架搭建。

读完本文你将获得：

掌握Layui布局组件的实战应用
学会表格数据展示与交互处理
实现响应式设计适配各种设备
了解企业级后台的核心功能模块

准备工作

首先确保已准备好开发环境，通过以下命令获取Layui源码：

git clone https://gitcode.com/GitHub_Trending/la/layui

Layui采用模块化设计，核心文件位于src/layui.js，样式文件位于src/css/layui.css。推荐使用国内CDN加速访问：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.10/layui.css">
<script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>

系统架构设计

企业级后台管理系统通常包含以下核心模块：

mermaid

Layui提供了完整的布局解决方案，我们将使用其布局组件实现上述架构。

基础布局实现

创建基础HTML结构，引入必要的Layui资源：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>企业级后台管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.10/layui.css">
</head>
<body>
  <!-- 布局容器 -->
  <div class="layui-layout layui-layout-admin">
    <!-- 头部导航 -->
    <div class="layui-header">
      <!-- 头部内容 -->
    </div>
    
    <!-- 侧边栏 -->
    <div class="layui-side layui-bg-black">
      <!-- 侧边栏内容 -->
    </div>
    
    <!-- 主内容区 -->
    <div class="layui-body">
      <!-- 主内容 -->
    </div>
    
    <!-- 底部区域 -->
    <div class="layui-footer">
      <!-- 底部内容 -->
    </div>
  </div>
  
  <script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>
  <script>
    // 初始化Layui组件
    layui.use(['element', 'layer', 'util'], function(){
      var element = layui.element;
      var layer = layui.layer;
      var util = layui.util;
      
      // 初始化代码
    });
  </script>
</body>
</html>

顶部导航栏实现

顶部导航栏包含系统标题、主导航菜单和用户信息区：

<div class="layui-header">
  <div class="layui-logo layui-hide-xs layui-bg-black">企业管理系统</div>
  
  <!-- 主导航菜单 -->
  <ul class="layui-nav layui-layout-left">
    <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">首页</a></li>
    <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">数据中心</a></li>
    <li class="layui-nav-item layui-hide-xs">
      <a href="javascript:;">系统设置</a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">基本设置</a></dd>
        <dd><a href="javascript:;">权限管理</a></dd>
      </dl>
    </li>
  </ul>
  
  <!-- 用户信息区 -->
  <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item">
      <a href="javascript:;">
        <img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
        管理员
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">个人资料</a></dd>
        <dd><a href="javascript:;">退出登录</a></dd>
      </dl>
    </li>
  </ul>
</div>

侧边栏菜单实现

侧边栏使用Layui的导航组件实现多级菜单：

<div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
      <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">数据仪表盘</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">数据概览</a></dd>
          <dd><a href="javascript:;">访问统计</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">用户管理</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">用户列表</a></dd>
          <dd><a href="javascript:;">角色管理</a></dd>
          <dd><a href="javascript:;">权限配置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">内容管理</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">文章管理</a></dd>
          <dd><a href="javascript:;">评论管理</a></dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

核心功能实现

数据表格展示

使用Layui的表格组件展示用户数据，支持排序、筛选和分页功能：

<div class="layui-body">
  <div style="padding: 15px;">
    <table id="userTable" lay-filter="userTable"></table>
  </div>
</div>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#userTable',
    url: '/api/user/list', // 实际项目中替换为真实接口
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width:80, sort: true},
      {field: 'username', title: '用户名', width:120},
      {field: 'email', title: '邮箱', width:180},
      {field: 'role', title: '角色', width:100},
      {field: 'status', title: '状态', width:80, templet: function(d){
        return d.status === 1 ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge layui-bg-gray">禁用</span>';
      }},
      {field: 'createTime', title: '创建时间', width:160},
      {title: '操作', width:150, align:'center', toolbar: '#userToolBar'}
    ]],
    page: true, // 开启分页
    limit: 10, // 每页显示10条
    limits: [10, 20, 30], // 可选择的每页显示条数
    height: 'full-100', // 高度自适应
    id: 'userTable'
  });
  
  // 工具条事件
  table.on('tool(userTable)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit'){
      // 编辑操作
      layer.open({
        type: 2,
        title: '编辑用户',
        area: ['500px', '400px'],
        content: '/user/edit?id=' + data.id
      });
    } else if(obj.event === 'del'){
      // 删除操作
      layer.confirm('确定删除该用户吗？', function(index){
        // 发送删除请求
        obj.del();
        layer.close(index);
      });
    }
  });
});
</script>

<!-- 工具条模板 -->
<script type="text/html" id="userToolBar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

表单处理

使用Layui的表单组件实现用户添加和编辑功能：

<div class="layui-form" lay-filter="userForm">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" 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="email" lay-verify="email" 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="role" lay-verify="required">
        <option value="">请选择角色</option>
        <option value="admin">管理员</option>
        <option value="editor">编辑</option>
        <option value="viewer">查看者</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <input type="radio" name="status" value="1" title="启用" checked>
      <input type="radio" name="status" value="0" title="禁用">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="saveUser">保存</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</div>

<script>
layui.use('form', function(){
  var form = layui.form;
  
  // 监听表单提交
  form.on('submit(saveUser)', function(data){
    // 实际项目中发送AJAX请求保存数据
    layer.msg(JSON.stringify(data.field), {
      time: 2000
    }, function(){
      // 关闭弹窗并刷新表格
      parent.layer.close(parent.layer.getFrameIndex(window.name));
      parent.layui.table.reload('userTable');
    });
    return false;
  });
});
</script>

数据统计卡片

使用Layui的卡片组件和图标组件实现数据概览：

<div class="layui-row layui-col-space15">
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-body">
        <div class="layui-card-header layui-bg-blue">
          <i class="layui-icon layui-icon-user" style="font-size: 24px;"></i>
          <span style="margin-left: 10px;">总用户数</span>
        </div>
        <div class="layui-card-body" style="text-align: center; padding: 30px 0;">
          <span style="font-size: 36px; color: #333;">1,258</span>
          <p style="color: #666; margin-top: 10px;">较上月增长 12.5%</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header layui-bg-green">
        <i class="layui-icon layui-icon-file" style="font-size: 24px;"></i>
        <span style="margin-left: 10px;">文章总数</span>
      </div>
      <div class="layui-card-body" style="text-align: center; padding: 30px 0;">
        <span style="font-size: 36px; color: #333;">3,752</span>
        <p style="color: #666; margin-top: 10px;">较上月增长 8.2%</p>
      </div>
    </div>
  </div>
  
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header layui-bg-orange">
        <i class="layui-icon layui-icon-eye" style="font-size: 24px;"></i>
        <span style="margin-left: 10px;">总访问量</span>
      </div>
      <div class="layui-card-body" style="text-align: center; padding: 30px 0;">
        <span style="font-size: 36px; color: #333;">158,246</span>
        <p style="color: #666; margin-top: 10px;">较上月增长 23.7%</p>
      </div>
    </div>
  </div>
  
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-header layui-bg-red">
        <i class="layui-icon layui-icon-comment" style="font-size: 24px;"></i>
        <span style="margin-left: 10px;">评论总数</span>
      </div>
      <div class="layui-card-body" style="text-align: center; padding: 30px 0;">
        <span style="font-size: 36px; color: #333;">8,452</span>
        <p style="color: #666; margin-top: 10px;">较上月增长 5.3%</p>
      </div>
    </div>
  </div>
</div>

系统优化与扩展

响应式设计

Layui内置响应式支持，通过栅格系统实现不同设备的适配：

<div class="layui-container">
  <div class="layui-row">
    <!-- 在大屏幕上显示4列，中屏幕显示2列，小屏幕显示1列 -->
    <div class="layui-col-lg4 layui-col-md6 layui-col-sm12">
      <!-- 内容 -->
    </div>
    <div class="layui-col-lg4 layui-col-md6 layui-col-sm12">
      <!-- 内容 -->
    </div>
    <div class="layui-col-lg4 layui-col-md6 layui-col-sm12">
      <!-- 内容 -->
    </div>
  </div>
</div>

权限控制实现

基于用户角色的权限控制可以通过动态渲染菜单实现：

// 实际项目中从后端获取用户权限
var userPermissions = {
  dashboard: true,
  user: {
    list: true,
    add: true,
    edit: true,
    delete: false
  },
  content: {
    list: true,
    add: false,
    edit: true,
    delete: false
  }
};

// 动态渲染菜单
function renderMenu(permissions) {
  var menuHtml = '';
  
  if (permissions.dashboard) {
    menuHtml += '<li class="layui-nav-item"><a href="javascript:;">数据仪表盘</a></li>';
  }
  
  if (permissions.user && permissions.user.list) {
    menuHtml += `
      <li class="layui-nav-item">
        <a href="javascript:;">用户管理</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">用户列表</a></dd>
          ${permissions.user.add ? '<dd><a href="javascript:;">添加用户</a></dd>' : ''}
        </dl>
      </li>
    `;
  }
  
  // 其他菜单...
  
  $('.layui-nav-tree').html(menuHtml);
  layui.element.render('nav'); // 重新渲染导航组件
}

// 初始化时调用
renderMenu(userPermissions);

总结与展望

本文基于Layui组件库，从零开始构建了一个功能完善的企业级后台管理系统，包括基础布局、数据展示、表单处理和权限控制等核心功能。通过Layui的模块化设计和丰富组件，可以极大提高开发效率，减少重复工作。

后续可以进一步扩展以下功能：

集成图表组件实现数据可视化
添加消息通知系统
实现多标签页功能
优化移动端体验

Layui作为一款轻量级UI框架，非常适合快速开发中小型后台系统。其简洁的API设计和丰富的文档资源，降低了前端开发门槛，让开发者可以更专注于业务逻辑实现。

学习资源

如果觉得本文对你有帮助，欢迎点赞收藏，并关注后续更多Layui实战教程！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考