Layui

最新推荐文章于 2023-07-13 12:57:10 发布

呲花1

最新推荐文章于 2023-07-13 12:57:10 发布

阅读量345

点赞数 1

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/m0_62327548/article/details/125870066

版权

一、动态选项卡

1.选项卡

首先我们可以再官网查看选项卡页面布局代码，从官网上复制自己所需

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="static/js/index.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">会议OA项目</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
     
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
		<div class="layui-tab" lay-filter="demo"  lay-allowClose="true">
		  <ul class="layui-tab-title">
		    <li class="" lay-id="11">首页</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">1</div>
		  </div>
		</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>

</body>
</html>

2.动态的添加选项卡

当我们点击左侧菜单栏，要出现对应的选项卡，因此我们需要动态添加选项卡

进入官网查看方法，如下图：

 element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })

完善

let $,element;
	 layui.use(['jquery','element'],function(){
	 	$ = layui.jquery,
		element = layui.element;
		$.ajax({
			url:"permission.action?methodName=menus",
			dataType:'json',
			success:function(data){
				console.log(data)
				let html = '';
				$.each(data,function(i,n){
					html +='<li class="layui-nav-item layui-nav-itemed">';
					html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';
					//判断当前一级节点是否存在节点
					if(data[i].hasChildren){
						html +=' <dl class="layui-nav-child">';
						let childern = data[i].children;
						$.each(childern,function(index,node){
							html+=' <dd><a href="javascript:;" onClick="openTab(\''+childern[index].text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'</a></dd>';
						})
						html +=' </dl>';
					}
					html +='</li>';
				});
				$("#menu").html(html);
			}
		})
	});
	 
	function openTab(){
			 // 新增一个Tab项
		 element.tabAdd('demo', {
       		 title: '新选项'+ (Math.random()*1000|0) //用于演示
        	,content: '内容'+ (Math.random()*1000|0)
        	,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
   	     })

	}

效果：

3.将选项卡名称换成菜单名

将如下图点击事件进行更改

完善方法

function openTab(title){
			 // 新增一个Tab项
		     element.tabAdd('demo', {
				title : title,//用于演示
				content :'内容'+ (Math.random()*1000|0),
				id : id
		     }) 
	}

4.重复的tab选项卡不添加，改为选中

当我们对左边菜单选中时，当我们在次选中的话，不应出现重复
如下图：

进而我们通过id进行判断，如再次选中相同的菜单，只会再次选中，不会重复

对我们的方法进行修改

function openTab(title,id){
		let $node = $("li[lay-id='"+id+"']");
		if($node.length == 0){
			 // 新增一个Tab项
		     element.tabAdd('demo', {
				title : title,//用于演示
				content : '内容'+ (Math.random()*1000|0),
				id : id
		     }) 
		}
		//切换到指定选项卡
	     element.tabChange('demo', id);
	}

进行修改

效果

二、登陆完善

用户实体User：

public class User {
    private Long id;

    private String name;

    private String loginName;

    private String pwd;

    private Long rid;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public Long getRid() {
		return rid;
	}

	public void setRid(Long rid) {
		this.rid = rid;
	}

	public User() {
		super();
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
    
    
}

工具类：

package com.zking.util;

import java.util.HashMap;

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

用户userdao：

import java.util.List;

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

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()+"' ";
//		根据sql查询符合条件的用户，通常只会返回一条数据
		List<User> users = super.executeQuery(sql, User.class, null);
		return users == null || users.size()== 0 ? null :  users.get(0);
	}
}

用户web

package com.zking.web;
import java.util.HashMap;
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.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 String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userDao.login(user);
//			通过账户名查到用户记录
			if(u!=null) {
	//			登陆成功
				ResponseUtil.writeJson(resp, R.ok(200, "成功"));
				req.getSession().setAttribute("user", u);
			}else {
	//			登陆失败
				ResponseUtil.writeJson(resp, R.error(0, "用户名或密码错误"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户名或密码错误"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}

		}
		return null;
	}
	
	@Override
	public User getModel() {
		return user;
	}

Login.js里面放的是登陆方法单独放在一个js里面，最后在登陆界面调用

layui.use(['jquery','layer'],function(){
	let $ = layui.jquery
	,layer = layui.layer;//ES6
	$("#login").click(function(){
		$.ajax({
			url:"user.action?methodName=login",
			dataType:'json',
			data:{
				loginName:$("#username").val(),
				pwd:$("#password").val()
			},
			success:function(data){
				//console.log(data.msg);
			if(data.code == 200){
			 		layer.alert(data.msg,{icon: 1}),	
			 		 location.href='index.jsp' 
			 }
			else{
				layer.alert(data.msg,{icon: 2})	
			}
			}
		})
	});
});