Layui构建动态表格实现用户管理的秘密大公开

前端

2023-05-06 10:10:06

用Layui轻松打造用户管理系统

背景

用户管理系统是网站不可或缺的一部分，它允许管理员管理用户，包括注册、登录、注销、修改密码等操作。传统上，构建用户管理系统需要大量的时间和精力。不过，得益于Layui等轻量级前端框架的出现，现在构建用户管理系统变得轻而易举。

Layui简介

Layui是一个轻量级的前端框架，以其简洁高效而闻名。它提供了一系列UI组件，如表格、表单、按钮和模态框，可以轻松构建出美观的网站界面。Layui还支持响应式布局，确保网站在不同设备上都能完美呈现。

使用Layui构建用户管理系统

使用Layui构建用户管理系统只需要以下几个步骤：

1. 安装Layui

首先，通过CDN或NPM在项目中安装Layui。

2. 创建项目

使用Layui脚手架创建一个新的项目。

3. 添加组件

将必要的Layui组件添加到项目中，包括表格、表单、按钮和模态框。

4. 设计界面

使用Layui组件设计用户管理系统的界面。

5. 实现功能

实现用户管理系统的功能，如用户注册、登录、注销和修改密码。

代码示例

以下是一个使用Layui创建用户管理系统的代码示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md12">
        <table class="layui-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>用户名</th>
              <th>密码</th>
              <th>邮箱</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>admin</td>
              <td>123456</td>
              <td>admin@layui.com</td>
              <td>
                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary">编辑</a>
                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script>
    layui.use(['table'], function(){
      var table = layui.table;
      
      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        var layEvent = obj.event;

        if(layEvent === 'edit'){
          //编辑
          layer.open({
            type: 2,
            title: '编辑用户',
            content: 'edit.html',
            area: ['500px', '300px'],
            btn: ['确定', '取消'],
            yes: function(index, layero){
              var iframeWin = window[layero.find('iframe')[0]['name']];
              var username = iframeWin.document.getElementById('username').value;
              var password = iframeWin.document.getElementById('password').value;
              var email = iframeWin.document.getElementById('email').value;
              
              //向服务器发送编辑请求
              $.ajax({
                url: 'edit.php',
                type: 'POST',
                data: {
                  id: data.id,
                  username: username,
                  password: password,
                  email: email
                },
                success: function(res){
                  if(res.code == 0){
                    layer.close(index);
                    table.reload('test');
                  }else{
                    layer.msg(res.msg);
                  }
                }
              });
            }
          });
        }else if(layEvent === 'del'){
          //删除
          layer.confirm('确定要删除吗？', function(index){
            //向服务器发送删除请求
            $.ajax({
              url: 'del.php',
              type: 'POST',
              data: {
                id: data.id
              },
              success: function(res){
                if(res.code == 0){
                  layer.close(index);
                  table.reload('test');
                }else{
                  layer.msg(res.msg);
                }
              }
            });
          });
        }
      });
    });
  </script>
</body>
</html>