LayUI之动态选项卡Tab&iframe使用

最新推荐文章于 2023-07-13 02:30:31 发布

xxie编程

最新推荐文章于 2023-07-13 02:30:31 发布

阅读量489

点赞数

分类专栏： layui 文章标签： layui java jvm

本文链接：https://blog.csdn.net/qq_63531917/article/details/125858445

版权

layui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、动态选项卡

①后端实现

要用到的表t_oa_permission
在这里插入图片描述
实体类Permission.java

package com.xlb.entity;

/**
 * 数据库表实体类
 * @author 波哥
 *
 * 2022年7月9日 上午8:44:02
 */
public class Permission {
	private long id;
	private String name;//菜单名
	private String description;// 描述
	private String url;//点击菜单跳转哪个页面
	private long pid;//父级菜单的ID
	private int ismenu;//是菜单/按钮
	private long displayno;//显示顺序
	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 getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public long getPid() {
		return pid;
	}
	public void setPid(long pid) {
		this.pid = pid;
	}
	public int getIsmenu() {
		return ismenu;
	}
	public void setIsmenu(int ismenu) {
		this.ismenu = ismenu;
	}
	public long getDisplayno() {
		return displayno;
	}
	public void setDisplayno(long displayno) {
		this.displayno = displayno;
	}
	
	public Permission() {
		// TODO Auto-generated constructor stub
	}
	public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
		super();
		this.id = id;
		this.name = name;
		this.description = description;
		this.url = url;
		this.pid = pid;
		this.ismenu = ismenu;
		this.displayno = displayno;
	}
	@Override
	public String toString() {
		return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
				+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
	}
}

方法类PermissionDao.java

package com.xlb.dao;

import java.util.ArrayList;
import java.util.List;

import com.xlb.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.TreeVo;

public class PermissionDao extends BaseDao<Permission>{

	/**
	 * 查询全部
	 * @param sql 数据库查询语句
	 * @param clz 
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<Permission> list(Permission permission,PageBean pageBean) throws Exception {
		String sql = "select * from t_oa_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}
	
	
	public List<TreeVo<Permission>> meus(Permission permission,PageBean pageBean) throws Exception {
		List<TreeVo<Permission>> trees = new ArrayList<TreeVo<Permission>>();
		//从数据库中拿到的数据，此时数据是平级的，不具备父子关系
		List<Permission> list = this.list(permission, pageBean);
		for (Permission p : list) {
			TreeVo<Permission> vo = new TreeVo<>();
			vo.setId(p.getId()+"");//节点id
			vo.setText(p.getName());//节点的名称  
			vo.setParentId(p.getPid()+"");
			//将url放入treevo中，但是treevo中又没有专门的url属性，此时可以将整个permission对象都放到map集合中，设置给treevo
			vo.setAttributes(new R().data("self", p));
			trees.add(vo);
		}
		//利用工具类把代码格式成父子关系的表数据
		return BuildTree.buildList(trees, "-1");
	}
}

实现类PermissionAction.java

package com.xlb.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.xlb.dao.PermissionDao;
import com.xlb.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;

public class PermissionAction extends ActionSupport implements ModelDriver<Permission>{
	
	private Permission permission = new Permission();
	
	private PermissionDao pd = new PermissionDao();
	
	
	@Override
	public Permission getModel() {
		// TODO Auto-generated method stub
		return permission;
	}

	public String menus(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//拿到所有数据不用分页
			List<TreeVo<Permission>> meus = pd.meus(null, null);
			//向前端响应树形结构的数据
			ResponseUtil.writeJson(resp, meus);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
}

定义mvc

<?xml version="1.0" encoding="UTF-8"?>
<config>

	<action path="/user" type="com.xlb.web.UserAction">
	
	</action>

	<action path="/permission" type="com.xlb.web.PermissionAction">

	</action>
	
</config>

②前端实现

前端代码实现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">
<!-- 引入 layui.js -->
<script src="static/js/main.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">layout demo</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">
         <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">会议管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">发布会议</a></dd>
            <dd><a href="javascript:;">我的会议</a></dd>
            <dd><a href="javascript:;">会议通知</a></dd>
            <dd><a href="">历史会议</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <div class="layui-tab" lay-filter="demo">
	  <ul class="layui-tab-title">
	    <li class="layui-this">首页</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>

结果
一进去的页面
在这里插入图片描述
当我们点击一个页面（因为博主这里有一些页面是没有写的所有会报404）
点击会议发布

点击其他的页面

二、登录完善

①后端实现

数据表t_oa_user
在这里插入图片描述
实体类User.java

package com.xlb.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 + "]";
	}
    
    
}

方法层UserDao.java

package com.xlb.dao;

import java.util.List;

import com.xlb.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);
		//return super.executeQuery(sql, clz, pageBean);
	}
	
}

实现层UserAction.java

package com.xlb.web;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.util.RequestUtil;

import com.xlb.dao.UserDao;
import com.xlb.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, new R().data("code",200).data("msg","成功"));
				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;
	}

}

②前端实现

前端代码

<%@ 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">
<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">
<!-- 引入 layui.js -->
<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>
    
</body>
</html>

结果
在这里插入图片描述
当我们输入错误的账号和密码时

输入正确的账号密码
那么会直接跳转到指定的页面

三、两个案例依赖层

层级结构
在这里插入图片描述
我们把login.jsp的实现代码封装成js，main.jsp也一样
login.js

layui.use(['jquery','layer'],function(){
	let $ = layui.jquery
		layer = layui.layer;
	$("#login").click(function(){
		$.ajax({
			url:"user.action?methodName=login"
			,dataType:'json' /* 格式 */
			,data:{ /* 要传输的值 */
				loginName:$("#username").val(),
				pwd:$("#password").val()
			}
			,success:function(data){/* 成功的回掉函数 */
				/* console.log(data); */
				if(data.code == 200){
					layer.alert(data.msg, {icon: 1});
					location.href='main.jsp';
				}
				else{
					layer.alert(data.msg, {icon: 2});
				}
			}
		})
	})
})

main.js

//JS
let $,element
layui.use(['jquery','element'],function(){
	$ = layui.jquery,element = layui.element;
	$.ajax({
		url:'permission.action?methodName=menus'
		,dataType:'json'
		,success:function(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="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\')">'+children[index].text+'</a></dd>';
					});
					htmlstr += '</dl>';
				}
				htmlstr += '</li>';
			});
			$("#menu").html(htmlstr);
		}
	})
})

/* 
  1、查找layui的选项卡页面布局代码-静态
  2、动态的添加选项卡
  3、把选项名换成菜单名
  4、重复的tab选项卡不添加，改为选中
*/

function openTabs(title,url,id){
	let $node = $("li[lay-id='"+id+"']");
	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);
}

公共页面
在这里插入图片描述
header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<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>玉渊工作室</title>

xxie编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LayUI之动态选项卡Tab&iframe使用

当我们点击一个页面（因为博主这里有一些页面是没有写的所有会报404）我们把login.jsp的实现代码封装成js，main.jsp也一样。实现类PermissionAction.java。方法类PermissionDao.java。要用到的表t_oa_permission。实体类Permission.java。方法层UserDao.java。前端代码实现main.jsp。当我们输入错误的账号和密码时。那么会直接跳转到指定的页面。数据表t_oa_user。实体类User.java。...
复制链接

扫一扫

专栏目录