LayUi-----------用户管理

前言

上一次我们分享了layui的动态添加选项卡,这次要分享的内容是基于上一次的动态选项卡,在选项卡中使用layui完成用户管理功能。


一、准备工作

预期效果

 

来看一下我们这次要用到的数据库 

 

 

 在layui的参考网站找到我们要用到内表格以及弹出层代码。

 

 编辑或者删除是根据lay-event来的

 这就是这次用户管理要准备组件。搭建好基本界面框架,接下来进入编码阶段。

二、编码

        1、后端代码

        UserDao

package com.zking.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class UserDao extends BaseDao<User>{
	public User login(User user) throws Exception {
		String sql = "select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
		List<User> users = super.executeQuery(sql, User.class,null);
		return users == null || users.size() == 0 ? null : users.get(0);
	}
	
//	查询用户信息以及对应角色,角色通过case when得出
	public List<Map<String,Object>> list(User user,PageBean pageBean) throws Exception{
		String sql = "SELECT * \r\n" + 
				",( CASE rid \r\n" + 
				"WHEN 1 THEN '管理员' \r\n" + 
				"WHEN 2 THEN '发起者' \r\n" + 
				"WHEN 3 THEN '审批者' \r\n" + 
				"WHEN 4 THEN '参与者' \r\n" + 
				"WHEN 5 THEN '会议室管理员' \r\n" + 
				"ELSE '其他' END ) roleName \r\n" + 
				"FROM \r\n" + 
				"t_oa_user 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 where name=?,loginName=?,pwd=? where id=?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	}
}

 测试一下是否可用。

        UserDaoTest

package com.zking.dao;

import static org.junit.Assert.*;

import java.util.List;
import java.util.Map;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;

import com.zking.entity.User;
import com.zking.util.PageBean;

public class 
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Layui中,通过使用`layui-openTab`类可以实现打开选项卡的功能。该类可以应用于HTML元素中,例如使用`layui-openTab`类的按钮。此外,你还可以通过使用`layui-tab`组件来创建包含选项卡的容器,并使用`layui-tab-title`和`layui-tab-item`来定义选项卡的标题和内容。其中,通过为选项卡指定不同的类名来显示不同的选项卡内容。例如,在HTML代码中可以这样定义选项卡: ```html <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> ``` 在上述代码中,通过添加`layui-this`类名来指定默认显示的选项卡,即"网站设置"选项卡。通过切换`layui-tab-item`元素的类名来切换显示不同的选项卡内容。 另外,如果你想对选项卡进行样式调整,可以使用`layui-row`和`layui-col-*`类来定义选项卡的布局。例如,可以使用下面的代码来定义不同屏幕大小下选项卡的列数和间距: ```html <h2>平板、桌面端的不同表现</h2> <div class="layui-row"> <div class="layui-col-sm3 layui-col-md6 layui-bg-red">(平板≥768px):3/12 | (桌面≥992px):6/12</div> </div> <div class="layui-row"> <div class="layui-col-sm6 layui-col-md10 layui-bg-orange">(平板≥768px):6/12 | (桌面≥992px):10/12</div> </div> <div class="layui-row"> <div class="layui-col-sm4 layui-col-md3 layui-bg-blue">(平板≥768px):4/12 | (桌面≥992px):3/12</div> </div> ``` 上述代码中,通过将选项卡内容包裹在`layui-row`和`layui-col-*`的元素中,可以设置不同的列数和间距。 最后,如果你想创建一个按钮组,可以将按钮放入一个`layui-btn-group`元素中。例如,可以使用下面的代码来创建一个包含多个按钮的按钮组: ```html <div class="layui-btn-group"> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-font-16"></i> 编辑 </button> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-font-16"></i> 分享 </button> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-font-16"></i> 删除 </button> </div> ``` 上述代码中,通过添加`layui-btn-group`类名来将多个按钮组合成一个按钮组。 希望以上的解释对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值