layui之动态选项卡Tab

最新推荐文章于 2023-07-13 11:41:42 发布

青春属于表白

最新推荐文章于 2023-07-13 11:41:42 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： java 前端 layui

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_61523879/article/details/125869760

本文详细介绍了使用layui框架实现动态选项卡Tab的步骤，包括main.jsp和main.js的配置，以及运行效果展示。此外，还探讨了登录功能的实现，从login.jsp和login.js的编写，到User、UserDao、UserAction的相关操作。最后，提到了会议OA项目的翻新，重点关注了header.jsp和mvc.xml的配置更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

一、tab选项卡

3、运行效果

二、登录功能实现

三、会议OA项目翻新

2、mvc.xml的配置

一、tab选项卡

1、main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/header.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/main.js"></script>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">会议OA项目</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
  </div>
  
 <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menu">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
  <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">首页</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1
    </div>
  </div>
  </div>
</div>
  
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
 <script type="text/javascript">
  
  </script>
</body>

</html>

2、main.js

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 htmlstr='';
					$.each(data,function(i,n){
						htmlstr += '<li class="layui-nav-item layui-nav-itemed">';
						htmlstr += '	<a class="" href="javascript:;">'+data[i].text+'</a>';
						if(data[i].hasChildren){
							htmlstr += ' <dl class="layui-nav-child">';	
							let children = data[i].children;
							$.each(children,function(index,node){
								htmlstr += '  <dd><a href="javascript:;"onClick="openTaps(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].attributes.self.id+'\')">'+children[index].text+'</a></dd> ';	
							});
							htmlstr += '  </dl>';	
						}	
						htmlstr += '</li>';
					});
					$("#menu").html(htmlstr);
			}	
		});
	});
  
  /* 
  	查找layUI的选项卡页面代码-静态
  	动态的添加选项卡
  	将选项卡换成菜单名
  	重复的tab选项卡不添加，改为选中
  	跳转页面
  */
  
  
function openTaps(title,url,id) {
	  let $node = $("li[lay-id='"+id+"']");
	  //debugger;
	  if($node.length == 0){
		//新增一个Tab项
		  element.tabAdd('demo', {
		    title:title//用于演示
		    ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
		    ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
		  }) 
		  element.tabChange('demo', id); //切换到：用户管理
	  }
}

3、运行效果

二、登录功能实现

1、login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.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">
<title>登录界面</title>
 <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all">
<script src="static/js/login.js"></script>

<style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style>
</head>
 <body class="tx-login-bg">
       <div class="tx-login-box">
           <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
			<ul class="tx-form-li row">
				<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li>
				<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li>
				<li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li>
				<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
				<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
			</ul>
      </div>
      <script type="text/javascript">
      </script>
      
</body>
</html>

2、login.js

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

3、User

package com.zking.entity;

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 + "]";
	}
    
    
}

4、UserDao

package com.zking.dao;

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()+"' ";
		//查询符合条件的用户
		List<User> users = super.executeQuery(sql, User.class, null);
		return users == null || users.size() ==0 ? null : users.get(0);
	}

}

5、UserAction

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();
	
	//寫個方法處理前台的請求
	
	public String execute(HttpServletRequest req, HttpServletResponse resp) {
		UserDao userDao = new UserDao();
		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.ok(0, "账户或者密码错误！！"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "账户或者密码错误！！"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	
	@Override
	public User getModel() {
		return user;
	}

}

三、会议OA项目翻新

1、header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">

<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<!-- 指定项目的根路劲 -->
<base href="${pageContext.request.contextPath }/" />
<title>会议OA项目</title>

2、mvc.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/user" type="com.zking.web.UserAction">
	</action>
	<action path="/permission" type="com.zking.web.PermissionAction">
	</action>

</config>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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