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

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

2023-11-14 83
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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.
目录
相关文章
yuanzhengme
|
17天前
|
关系型数据库 MySQL Linux
Linux系统如何设置自启动服务在MySQL数据库启动后执行？
【10月更文挑战第25天】Linux系统如何设置自启动服务在MySQL数据库启动后执行？
yuanzhengme
63 3
东方睿赢
|
16天前
|
Java 数据库连接 数据库
深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销，从而显著提升系统性能
在Java应用开发中，数据库操作常成为性能瓶颈。本文通过问题解答形式，深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销，从而显著提升系统性能。文章介绍了连接池的优势、选择和使用方法，以及优化配置的技巧。
东方睿赢
16 1
小Lee
|
30天前
|
SQL 存储 关系型数据库
数据储存数据库管理系统（DBMS）
【10月更文挑战第11天】
小Lee
85 3
小Tomkk
|
1月前
|
存储 关系型数据库 MySQL
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取（pydicom 库使用）
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取（pydicom 库使用）
小Tomkk
27 2
#FFF
|
1月前
|
安全 NoSQL 关系型数据库
阿里云数据库：构建高性能与安全的数据管理系统
在企业数字化转型过程中，数据库是支撑企业业务运转的核心。随着数据量的急剧增长和数据处理需求的不断增加，企业需要一个既能提供高性能又能保障数据安全的数据库解决方案。阿里云数据库产品为企业提供了一站式的数据管理服务，涵盖关系型、非关系型、内存数据库等多种类型，帮助企业构建高效的数据基础设施。
#FFF
54 2
iamzfh
|
1月前
|
前端开发 Java 数据库连接
javamvc配置，增删改查，文件上传下载。
【10月更文挑战第4天】javamvc配置，增删改查，文件上传下载。
iamzfh
37 1
游客62mqllx53nctc
|
24天前
|
JavaScript 前端开发 测试技术
[新手入门]todolist增删改查：vue3+ts版本！
【10月更文挑战第15天】[新手入门]todolist增删改查：vue3+ts版本！
游客62mqllx53nctc
17 0
MongoDB小助手
|
29天前
|
运维 NoSQL BI
简道云搭载阿里云MongoDB数据库，帮助数以万计企业重构业务系统
通过与MongoDB和阿里云团队的合作，让简道云少走了弯路，保障了线上服务的长期稳定运行，提高了吞吐效率，并相应降低了线上运行成本
MongoDB小助手
61 0
听风de歌
|
8天前
|
SQL 关系型数据库 MySQL
go语言数据库中mysql驱动安装
【11月更文挑战第2天】
听风de歌
22 4
路卿老师
|
6天前
|
SQL 关系型数据库 MySQL
12 PHP配置数据库MySQL
路老师分享了PHP操作MySQL数据库的方法，包括安装并连接MySQL服务器、选择数据库、执行SQL语句（如插入、更新、删除和查询），以及将结果集返回到数组。通过具体示例代码，详细介绍了每一步的操作流程，帮助读者快速入门PHP与MySQL的交互。
路卿老师
19 1

热门文章

最新文章

  • 1
    RDS入门——Excel文件转存到RDS数据库实践
  • 2
    干货分享 ｜ 揭秘下一代云数据库引擎MyBase for MySQL
  • 3
    SQLServer数据库日志清理 清除sqlserver2005日志 - sk
  • 4
    数据库查询返回空的原因
  • 5
    国产化人大金仓数据库转库工具：oracle12c数据库转kingbase8.6人大金仓数据库实例演示
  • 6
    服务器增加内存后无法重启数据库的问题及解决
  • 7
    Android Sqlite数据库版本升级管理初探
  • 8
    Sqlserver与access数据库sql语法十大差异
  • 9
    使用xtrabackup备份innodb引擎的数据库
  • 10
    数据库安全之权限与角色
  • 1
    数据库SQL语言实战（五）(数据库系统概念第三章练习题）
    41
  • 2
    数据库SQL语言实战（四）(数据库系统概念第三章练习题）
    46
  • 3
    数据库SQL语言实战（三）
    45
  • 4
    编程日记02：个人站优化数据库和日志
    46
  • 5
    国产达梦数据库使用记录
    57
  • 6
    docker MySQL删除数据库时的错误（errno: 39）
    146
  • 7
    用Navicat备份Mysql演示系统数据库的时候出：Too Many Connections
    343
  • 8
    基于jeecg-boot的项目管理系统（一、部分数据库）
    70
  • 9
    LabVIEW如何修复或重置NI MAX数据库文件
    80
  • 10
    利用LangChain构建的智能数据库操作系统
    275

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 数据库实验室挑战任务-高级任务
  • 数据库实验室挑战任务-中级任务
  • 数据库实验室挑战任务-初级任务
  • 阿里云数据库产品实验室
  • MongoDB数据库入门
  • 使用DAS实现数据库自动扩容和回缩
    • 下一篇
    阿里云OSS设置跨域访问