layui 增删改查 完整案例

layui是一款基于jQuery开发的UI框架，它的简洁、易用和美观受到了众多开发者的好评。在实际开发中，常常需要使用到增删改查的功能，本文将为大家分享一个基于layui框架的完整增删改查案例。

1. 实现数据库连接

一般而言，我们需要选择一款关系型数据库来存储数据。本例中，我们使用MySQL数据库。要使用该数据库，需要使用一个驱动，这里我们使用node.js的mysql包，需要使用npm命令安装：

npm install mysql

连接数据库的步骤如下：

const mysql = require("mysql");
const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "root",
  database: "test"
});

connection.connect((err) => {
  if (err) {
    console.error("error connecting: " + err.stack);
    return;
  }
  console.log("connected as id " + connection.threadId);
});

在这里，我们使用了mysql.createConnection()方法创建了一个连接对象，该方法需要传递一个配置对象，包括连接数据库的地址、用户名、密码和数据库名。连接成功后，我们可以在回调函数中打印出连接的线程ID。

2. 实现表格展示

在完成数据库连接后，我们需要实现表格展示。这里我们使用了layui框架的table模块，该模块封装了表格的相关操作，代码如下：

layui.use("table", function () {
  var table = layui.table;

  //展示表格
  table.render({
    elem: "#userListTable",
    url: "/api/user",
    cols: [[
      { type: "numbers", title: "序号" },
      { field: "name", title: "用户名" },
      { field: "age", title: "年龄" },
      { field: "gender", title: "性别" },
      { fixed: "right", title: "操作", toolbar: "#userListBar" }
    ]]
  });
});

在这里，我们使用了table.render()方法渲染了一个表格，需要传递一个配置对象。其中，elem表示表格的容器的ID，url表示获取表格数据的地址，而cols则表示表格的列，每列需要配置相应的字段名和显示名称。最后一个操作列使用了固定为右对齐，并且使用了自定义工具栏模板。

3. 实现增删改查的逻辑操作

在完成表格展示后，我们需要实现增删改查的逻辑操作。这里我们使用了layui框架的form模块，该模块封装了表单的相关操作，代码如下：

3.1 添加用户

在该案例中，添加用户按钮点击后，会弹出一个添加用户表单。点击表单的提交按钮后，会触发系统的提交事件，触发后台的添加用户接口，将数据提交到数据库中，代码如下：

layui.use("form", function () {
  var form = layui.form;

  //添加用户弹窗
  $("#addUserBtn").click(function () {
    layer.open({
      type: 1,
      title: "添加用户",
      content: $("#addUser"),
      area: ["500px", "300px"]
    });
  });

  //监听添加用户表单提交
  form.on("submit(addUserForm)", function (data) {
    $.ajax({
      url: "/api/user",
      type: "POST",
      data: JSON.stringify(data.field),
      dataType: "JSON",
      contentType: "application/json",
      success: function (res) {
        if (res.code === 0) {
          layer.msg("添加用户成功");
          table.reload("userListTable");
          layer.closeAll();
        } else {
          layer.msg("添加用户失败，请联系管理员");
        }
      }
    });
    return false;
  });
});

在这里，我们使用了layer.open()方法弹出了添加用户表单，该方法需要传递一个配置对象，表单的内容需要放在该对象的content属性中。在表单提交后，我们使用了$.ajax()方法提交表单数据，data.field表示表单的所有数据，需要将其转换成JSON格式。在提交成功后，我们使用了table.reload()方法重新渲染了表格，并使用layer.closeAll()方法关闭了添加用户弹窗。

3.2 删除用户

在该案例中，删除用户按钮点击后，会弹出一个提示框，询问用户是否确定删除。点击确认按钮后，会触发系统的提交事件，触发后台的删除用户接口，将数据从数据库中删除，代码如下：

//监听删除用户按钮
table.on("tool(userListTable)", function (obj) {
  var data = obj.data;
  if (obj.event === "del") {
    layer.confirm("是否确定删除该用户" + data.name + "?", function (index) {
      $.ajax({
        url: "/api/user/" + data.id,
        type: "DELETE",
        dataType: "JSON",
        contentType: "application/json",
        success: function (res) {
          if (res.code === 0) {
            layer.msg("删除用户成功");
            obj.del();
          } else {
            layer.msg("删除用户失败，请联系管理员");
          }
        }
      });
      layer.close(index);
    });
  }
});

在这里，我们使用了table.on()方法监听了用户列表的表格，当用户点击删除按钮时，需要弹出确认对话框，需要传递一个确认消息和回调函数，点击确认后触发$.ajax()方法提交删除请求，最后使用obj.del()方法删除表格中对应的行。

3.3 修改用户

在该案例中，修改用户按钮点击后，会弹出一个修改用户表单。点击表单的提交按钮后，会触发系统的提交事件，触发后台的修改用户接口，将数据更新到数据库中，代码如下：

//监听修改用户按钮
table.on("tool(userListTable)", function (obj) {
  var data = obj.data;
  if (obj.event === "edit") {
    layer.open({
      type: 1,
      title: "修改用户",
      content: $("#editUser"),
      area: ["500px", "300px"],
      success: function (layero, index) {
        form.val("editUserForm", data);
        form.render();
      }
    });
  }

  //监听修改用户表单提交
  form.on("submit(editUserForm)", function (formdata) {
    formdata = formdata.field;
    formdata.id = data.id;
    $.ajax({
      url: "/api/user",
      type: "PUT",
      data: JSON.stringify(formdata),
      dataType: "JSON",
      contentType: "application/json",
      success: function (res) {
        if (res.code === 0) {
          layer.msg("修改用户成功");
          table.reload("userListTable");
          layer.closeAll();
        } else {
          layer.msg("修改用户失败，请联系管理员");
        }
      }
    });
    return false;
  });
});

在这里，我们使用了table.on()方法监听了用户列表的表格，当用户点击编辑按钮时，需要弹出修改用户表单，需要传递一个配置对象，表单的内容需要放在该对象的content属性中。在表单展示后，我们使用了form.val()方法填充了表单的内容，并使用form.render()方法渲染了表单。在表单提交后，我们使用了$.ajax()方法提交表单数据，并使用table.reload()方法重新渲染了表格，并使用layer.closeAll()方法关闭了修改用户弹窗。

4. 实现后端API接口

在完成前端页面的开发后，我们需要实现后端的API接口以完成对数据库的操作。这里我们使用了node.js和express框架，需要使用npm命令安装：

npm install express
npm install body-parser

在该案例中，我们实现了如下API接口：

4.1 获取用户列表

router.get("/user", (req, res, next) => {
  connection.query("SELECT * FROM user", (error, results, fields) => {
    if (error) {
      res.json({ code: -1, msg: error });
    } else {
      res.json({ code: 0, data: results });
    }
  });
});

在这里，我们使用了connection.query()方法查询了user表中的所有数据，并将查询结果返回到前端。

4.2 添加用户

router.post("/user", (req, res, next) => {
  const { name, age, gender } = req.body;
  const sql = "INSERT INTO user (name, age, gender) VALUES (?, ?, ?)";
  connection.query(sql, [name, age, gender], (error, results, fields) => {
    if (error) {
      res.json({ code: -1, msg: error });
    } else {
      res.json({ code: 0, msg: "添加用户成功" });
    }
  });
});

在这里，我们使用了req.body获取了用户表单提交的数据，并使用connection.query()方法将数据插入到user表中，并将结果返回到前端。

4.3 修改用户

router.put("/user", (req, res, next) => {
  const { id, name, age, gender } = req.body;
  const sql = "UPDATE user SET name = ?, age = ?, gender = ? WHERE id = ?";
  connection.query(sql, [name, age, gender, id], (error, results, fields) => {
    if (error) {
      res.json({ code: -1, msg: error });
    } else {
      res.json({ code: 0, msg: "修改用户成功" });
    }
  });
});

在这里，我们使用了req.body获取了用户表单提交的数据，并使用connection.query()方法将数据更新到user表中，并将结果返回到前端。

4.4 删除用户

router.delete("/user/:id", (req, res, next) => {
  const id = req.params.id;
  const sql = "DELETE FROM user WHERE id = ?";
  connection.query(sql, [id], (error, results, fields) => {
    if (error) {
      res.json({ code: -1, msg: error });
    } else {
      res.json({ code: 0, msg: "删除用户成功" });
    }
  });
});

在这里，我们使用了req.params获取了URL参数，并使用connection.query()方法将数据从user表中删除，并将结果返回到前端。

5. 总结

本文详细介绍了使用layui框架实现增删改查的完整案例。在该案例中，我们使用了MySQL数据库来存储数据，并使用node.js和express框架实现了后端API接口。在前端页面上，我们使用了layui框架的table和form模块实现了表格展示和表单操作，并使用了layer模块实现了弹窗提示。通过该案例的学习，相信读者可以对layui框架和前后端交互有更深刻的理解和认识。