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');
}

最后增删改查运行结果：

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

前言

热门文章

最新文章

相关课程

相关电子书

相关实验场景