AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Layui框架实现用户系统-----增删改查

2023-11-14 87
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Layui框架实现用户系统-----增删改查

前言

在我前几篇的文章中，已经如何实现属性菜单及选项卡的使用，接下来就带大家去实现在layui框架界面实现增删改查(针对用户进行)

一，相关的配置准备

了解layui官网的框架，方便在后面使用并提高效率， 在Laui旧官网的复制相对应的展示的后台界面

1.1 在页面前端显示的总的数据 ,需要更加规范，所以我们在数据库中就已经编写相对应的字段名转文字显示，也就是将表中的name字段内容显示为中文

SELECT
  u.*,
  (CASE
  WHEN u.rid = '1' THEN
  '管理员' 
  WHEN u.rid = '2' THEN
  '发起者' 
  WHEN u.rid = '3' THEN
  '审批员' 
  WHEN u.rid = '4' THEN
  '参与者' 
  WHEN u.rid = '5' THEN
  '会议管理员' ELSE '其他' 
END 
  ) rname 
FROM
`t_oa_user` u

如上图所示在数据展示的时候，就知道它所的职位与权限是什么。

1.1，编写Userdao，来进行具体数据需要什么操作，到时在servlet调用相对应的方法即可，

会发现在查询语句中正是我们在数据库编译的sql语句

/**
       * 带模糊查询方法
       *
       **/
      public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
        String sql = "SELECT\r\n" + 
            " u.*,\r\n" + 
            " (\r\n" + 
            "CASE\r\n" + 
            " WHEN u.rid = '1' THEN\r\n" + 
            " '管理员' \r\n" + 
            " WHEN u.rid = '2' THEN\r\n" + 
            " '发起者' \r\n" + 
            " WHEN u.rid = '3' THEN\r\n" + 
            " '审批员' \r\n" + 
            " WHEN u.rid = '4' THEN\r\n" + 
            " '参与者' \r\n" + 
            " WHEN u.rid = '5' THEN\r\n" + 
            " '会议管理员' ELSE '其他' \r\n" + 
            "END \r\n" + 
            " ) rname \r\n" + 
            "FROM\r\n" + 
            " `t_oa_user` u where 1=1";
        String name = user.getName();
        if (StringUtils.isNotBlank(name))
          sql += " and name like '%" + name + "%'";
        return super.executeQuery(sql, pageBean);
      }
      public int add(User user) throws Exception {
        String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
        return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
      }
      public int del(User user) throws Exception {
        String sql = "delete from t_oa_user where id = ?";
        return super.executeUpdate(sql, user, new String[] {"id"});
      }
      public int edit(User user) throws Exception {
        String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
        return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
      }

2.1 后端servlet编写，这时候要用到一个R工具类，要用Layui框架就必须遵循它的回显数据原则，R这个工具类包含了显现数据格式化，这样在后端就不要参数要赋值的情况

R工具类：

package com.zking.util;
import java.util.HashMap;
/**
 * 
 * @author 兵
 *
 */
public class R extends HashMap{
  public R data(String key, Object value) {
    this.put(key, value);
    return this;
  }
  public static R ok(int code, String msg) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg);
    return r;
  }
  public static R error(int code, String msg) {
    R r = new R();
    r.data("success", false).data("code", code).data("msg", msg);
    return r;
  }
  public static R ok(int code, String msg,Object data) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg).data("data", data);
    return r;
  }
  public static R ok(int code, String msg, long count, Object data) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
    return r;
  }
}

servlet代码：

package com.zking.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User> {
   private User user = new User();//实体
  private UserDao userdao = new UserDao();//方法
    public void login(HttpServletRequest req, HttpServletResponse resp) {
           try {
            //调用方法
      User u = userdao.login(user);
       //继承中ModelDriver已经封装依懒mvc中req接受前端传来的值，当前结果保存到该方法中
      ResponseUtil.writeJson(resp, u);
    } catch (Exception e) {
      e.printStackTrace();
    }
    }
    public void UserRole(HttpServletRequest req, HttpServletResponse resp) {
             try {
              PageBean pageBean =new PageBean();
              pageBean.setRequest(req);
        //调用方法
               List<Map<String, Object>> userRole = userdao.userRole(user, pageBean);
        ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole  ));
      } catch (Exception e) {
        e.printStackTrace();
      }
      }
    public void add(HttpServletRequest req, HttpServletResponse resp) {
             try {
        //调用方法
             int add=userdao.add(user);
        ResponseUtil.writeJson(resp, 
                        R.ok(0, "新增成功"));
      } catch (Exception e) {
        e.printStackTrace();
      }
      }
    public void del(HttpServletRequest req, HttpServletResponse resp) {
             try {
        //调用方法
          int del=userdao.del(user);
        ResponseUtil.writeJson(resp, 
                        R.ok(0, "删除成功"));
      } catch (Exception e) {
        e.printStackTrace();
      }
      }
    public void edit(HttpServletRequest req, HttpServletResponse resp) {
             try {
        //调用方法
          int edit=userdao.edit(user);
        ResponseUtil.writeJson(resp, 
                        R.ok(0, "修改成功"));
      } catch (Exception e) {
        e.printStackTrace();
      }
      }
  //注册
    public void register(HttpServletRequest req, HttpServletResponse resp) {
      try {
        int register = userdao.register(user);
        //判断前端的值大于0 证明有值
        if (register > 0) {
          //回显ok 代表成功
          ResponseUtil.writeJson(resp, "OK");
        } else {
          //回显失败 代表失败
          ResponseUtil.writeJson(resp, "NO");
        }
      } catch (Exception e) {
        e.printStackTrace();
      }
    }
  @Override
  public User getModel() {
    return user;
  }
}

显然代码发现，在实现后端servlet的时候，我们使用R工具类，来帮助我们来回显前端需要的数据

前端jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@include file="/common/header.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台的主界面</title>
<!-- 引入 layui.js -->
<script src="static/js/index.js"></script>
<style type="text/css">
.layui-tab-item{
  height: 100%;
}
</style>
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">layout
        demo</div>
      <!-- 个人头像及账号操作 -->
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
          <a href="javascript:;"><img src="static/images/20200108151634_M44Az.jpeg"
            class="layui-nav-img"> 操作
        </a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;">${user.name }</a>
            </dd>
            <dd>
                  <a href="login.jsp">退出</a>
            </dd> 
          </dl>
        </li>
      </ul>
    </div>
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
        </ul>
      </div>
    </div>
    <div class="layui-body" style="height: 100%;">
      <div class="layui-tab" lay-filter="demo" style="height: 100%;"
        lay-allowclose="true">
        <ul class="layui-tab-title">
          <li class="layui-this" lay-id="11">网站设置</li>
        </ul>
        <div class="layui-tab-content" style="height: 100%;">
          <div class="layui-tab-item layui-show">内容1</div>
        </div>
      </div>
    </div>
    <div class="layui-footer">
      <!-- 底部固定区域 -->
    </div>
  </div>
</body>
</html>

2.2 我们已经将jsp界面代码与实现的代码实现分离封装js这样我们在jsp引入即可(是Layui的官网copy相对应的代码)需要根据自身代码修改一点内容

封装的js代码：

//将所需要的模块定义在此  用的时候赋值即可
var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
 $.ajax({
   url:"permission.action?methodName=menus",
  dataType:'json',  
  success:function(data){
    console.log(data);
    var htmlStr='';
    $.each(data,function(i,n){
      //拼接一级菜单 开始标签
      htmlStr +='<li class="layui-nav-item layui-nav-itemed">';
      htmlStr +=' <a class="" href="javascript:;">'+n.text+'</a>';
      if(n.hasChildren){//判断是否有子标签
        var children=n.children//得到子标签的列表
         htmlStr +='<dl class="layui-nav-child">';//拼接子标签 开始标签
        $.each(children,function(index,nodel){//遍历子标签 
           htmlStr += '<dd><a href="javascript:;" onclick="opentab(\''+nodel.text+'\',\''+nodel.attributes.self.url+'\',\''+nodel.id+'\')">'+nodel.text+'</a></dd>'
            console.log(nodel.attributes.self.url)
        })
             htmlStr +='</dl>';//拼接子标签 结束标签
      }
      htmlStr +='</li>';  //拼接一级菜单 结束标签
    })
    $("#menu").html(htmlStr);
    element.render('menu');//渲染
  }
 })
});
//给子菜单添加函数接口  点击菜单生成相对应的选项卡
function opentab(title,content,id){//参数是二级菜单
   var $nodel=$('li[lay-id="'+id+'"]')
  if($nodel.length==0){//当选项卡的长度为0时，不再打开重复的选项卡
    element.tabAdd('demo', {
          title: title//在选项卡展示的标题
          ,content: "<iframe frameborder='0' src='"+content+"' style='height: 100%;width: 100%' scrolling='auto'></iframe> " //二级菜单text内容
          ,id: id //二级菜单id
        })
  }
  element.tabChange("demo",id);//点击左侧二级菜单右侧选项卡同步选上
}

2.3 在我们实现增加与修改，需要弹出一个页面来实现将数据显示前端(共用一个页面)，所以我们来编写这个页面

增加修改jsp页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{
  max-height:150px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <select name="rid">
                    <option value="">---请选择---</option>
                    <option value="1">管理员</option>
                    <option value="2">发起者</option>
                    <option value="3">审批者</option>
                    <option value="4">参与者</option>
                    <option value="5">会议管理员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" 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="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>

在进行修改的时候我们需要赋值给修改页面赋值内容，所以再编写一个Edit修改js来进行页面赋值内容，在jsp引入Edit引入。

Edit js:

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
  layer=layui.layer,form=layui.form,$=layui.jquery;
  initData();
});
function initData(){
  console.log(parent.row);
  if(null!=parent.row){
       //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
       //parent.row：表格行对象
       form.val('user',$.extend({}, parent.row||{}));
       $('#name').attr('readonly','readonly');
  }
}
function getData(){
    return form.val('user');
}

最后增删改查运行结果：

 

文章标签：
Java
JavaScript
前端开发
数据库
SQL
关键词：
增删改查数据库
系统增删改查数据库
框架数据库
layui数据库
框架系统数据库
Love-Java.
目录
相关文章
众所周知
|
1月前
|
数据库连接 Go 数据库
Go语言中的错误注入与防御编程。错误注入通过模拟网络故障、数据库错误等，测试系统稳定性
本文探讨了Go语言中的错误注入与防御编程。错误注入通过模拟网络故障、数据库错误等，测试系统稳定性；防御编程则强调在编码时考虑各种错误情况，确保程序健壮性。文章详细介绍了这两种技术在Go语言中的实现方法及其重要性，旨在提升软件质量和可靠性。
众所周知
30 1
yuanzhengme
|
1月前
|
关系型数据库 MySQL Linux
Linux系统如何设置自启动服务在MySQL数据库启动后执行？
【10月更文挑战第25天】Linux系统如何设置自启动服务在MySQL数据库启动后执行？
yuanzhengme
111 3
东方睿赢
|
1月前
|
Java 数据库连接 数据库
深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销，从而显著提升系统性能
在Java应用开发中，数据库操作常成为性能瓶颈。本文通过问题解答形式，深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销，从而显著提升系统性能。文章介绍了连接池的优势、选择和使用方法，以及优化配置的技巧。
东方睿赢
39 1
小Lee
|
2月前
|
SQL 存储 关系型数据库
数据储存数据库管理系统（DBMS）
【10月更文挑战第11天】
小Lee
139 3
小Tomkk
|
2月前
|
存储 关系型数据库 MySQL
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取（pydicom 库使用）
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取（pydicom 库使用）
小Tomkk
43 2
快乐就是哈哈哈
|
2月前
|
JavaScript 前端开发 测试技术
[新手入门]todolist增删改查：vue3+ts版本！
【10月更文挑战第15天】[新手入门]todolist增删改查：vue3+ts版本！
快乐就是哈哈哈
36 0
MongoDB小助手
|
2月前
|
运维 NoSQL BI
简道云搭载阿里云MongoDB数据库，帮助数以万计企业重构业务系统
通过与MongoDB和阿里云团队的合作，让简道云少走了弯路，保障了线上服务的长期稳定运行，提高了吞吐效率，并相应降低了线上运行成本
MongoDB小助手
79 0
AIweker
|
13天前
|
关系型数据库 MySQL 数据库
Python处理数据库：MySQL与SQLite详解 | python小知识
本文详细介绍了如何使用Python操作MySQL和SQLite数据库，包括安装必要的库、连接数据库、执行增删改查等基本操作，适合初学者快速上手。
AIweker
87 15
1436047922066202
|
6天前
|
SQL 关系型数据库 MySQL
数据库数据恢复—Mysql数据库表记录丢失的数据恢复方案
Mysql数据库故障： Mysql数据库表记录丢失。 Mysql数据库故障表现： 1、Mysql数据库表中无任何数据或只有部分数据。 2、客户端无法查询到完整的信息。
1436047922066202
35 5
1436047922066202
|
13天前
|
关系型数据库 MySQL 数据库
数据库数据恢复—MYSQL数据库文件损坏的数据恢复案例
mysql数据库文件ibdata1、MYI、MYD损坏。 故障表现：1、数据库无法进行查询等操作；2、使用mysqlcheck和myisamchk无法修复数据库。
1436047922066202
58 6

热门文章

最新文章

  • 1
    RDS入门——Excel文件转存到RDS数据库实践
  • 2
    memcached数据库缓存
  • 3
    为什么NTFS删除超过4G大文件或数据库文件后FILE RECORD大小表现为0
  • 4
    【PostgreSQL】基于CentOS系统安装PostgreSQL数据库
  • 5
    adb shell查看sqlite数据库
  • 6
    【Oracle】Oracle 11g 中的自动数据库维护任务管理
  • 7
    Oracle传输表空间迁移数据库
  • 8
    C++ 连接数据库的入口和获取列数、数据
  • 9
    找到SQL Server数据库历史增长信息
  • 10
    thinkphp数据库添加表单提交的数据
  • 1
    云原生一体化数据库技术是一个具有潜力的领域
    115
  • 2
    构建高性能数据库的秘诀
    95
  • 3
    新一代数据库技术：融合AI的智能数据管理系统
    332
  • 4
    新一代数据库技术：融合人工智能与分布式系统的未来前景
    356
  • 5
    使用 Python 访问数据库的基本方法
    70
  • 6
    数据库解决方案
    103
  • 7
    mysql 设置环境变量与未设置环境变量连接数据库的区别
    163
  • 8
    服务器Linux系统配置mysql数据库主从自动备份
    215
  • 9
    SQLite数据库介绍以及安装
    104
  • 10
    sprinboot+vue集成neo4j图数据库
    174

    • 相关课程

    更多
  • 数据库的前世今生
  • 数据库核心概念
  • 从传统数据库到云数据库演进
  • 数据库常见问题排查
  • 数据库及SQL/MySQL基础
  • 高校精品课-西安交通大学 -数据库理论与技术

    • 相关电子书

    更多
  • DTCC 2022大会集锦《云原生一站式数据库技术与实践》
  • 阿里云瑶池数据库精要2022版
  • 2022 DTCC-阿里云一站式数据库上云最佳实践

    • 相关实验场景

    更多
  • 使用DAS实现数据库SQL优化
  • 自建数据库迁移到云数据库
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • 快速体验PolarDB开源数据库
  • SQLServer数据库的创建
    • 下一篇
    DataWorks