J2EE基础：LayUI之动态选项卡Tab&iframe使用

已于 2022-07-18 22:14:46 修改
阅读量763 收藏 2
点赞数 3
文章标签： layui 前端 javascript
于 2022-07-18 22:11:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67465673/article/details/125857415
版权

目录

一、tab选项卡

1. 查找layui的选项卡页面布局代码-静态

2. 动态的添加选项卡

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

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

5.跳转页面 

二、登录功能实现 

 三、会议OA项目翻新

一、tab选项卡

1. 查找layui的选项卡页面布局代码-静态

 mian.jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入 -->
    <%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</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">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </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:;">会议管理1</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 style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 
layui.use(['jquery'],function(){
	let $ = layui.jquery;
	$.ajax({
		url:'${pageContext.request.contextPath}/permission.action?methodName=permission',
		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:;'>"+children[index].text+"</a></dd>";
					})
					htmlstr+="</dl>";
				}
 
			});
			$("#menu").html(htmlstr);
		}
	});
});
</script>
</body>
</html>

上官网：去找选项卡在线示例 - Layuihttp://layui.org.cn/demo/index.html

我们先运行一下mian.jsp代码如图所示：

复制到这里的代码块：

<div class="layui-body">
    <!-- 内容主体区域 -->
	<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>

运行一下如图所示：

2. 动态的添加选项卡

上官网找把这个复制到mian,jsp的script里面 

代码块：

let $,element;
layui.use(['jquery','element'],function(){
	$ = layui.jquery,element=layui.element;
	$.ajax({
		url:'${pageContext.request.contextPath}/permission.action?methodName=permission',
		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:;'>"+children[index].text+"</a></dd>";
					})
					htmlstr+="</dl>";
				}
			});
			$("#menu").html(htmlstr);
		}
	});
});

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

 运行结果如图所示：点击一个都是随机数

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

 但我们mysql里面有如图所示：

 所以我们看到util里面treeVo.java代码块：

package com.zking.util;

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


public class TreeVo<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;

	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

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

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}

}

 PermissionDao.java里面主要加了这行代码

//			将url放入treevo中，但是treevo中又没有专门的url属性，此时可以将整个Permission都放到map集合中，设置给treevo
			vo.setAttributes(new R().data("self", p));

 PermissionDao代码块：

package com.zking.dao;

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

import com.zking.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>{
	
//	查询t_oa_permission表中的数据
	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>> permission(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()+"");
			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");
	}

}

在去前台main.jsp改动一下代码块:

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

			});
			$("#menu").html(htmlstr);
		}
	});
});

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

function openTabs(title,url,id){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: url
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
    
  }
</script>

 在运行一下如图所示：

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

 debugger：打个断点的意思，前端调试代码断点

function openTabs(title,url,id){
	let $node = $("li[lay-id='"+id+"']");
	debugger;
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
  }

 运行一下：

所以说我们要判断一下并且还要切换到指定点击的菜单名

function openTabs(title,url,id){
	let $node = $("li[lay-id='"+id+"']");
	//debugger;
	if($node.length==0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: url
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	//切换到指定Tab项
    element.tabChange('demo', id);   
  }

运行一下如图所示：

5.跳转页面 

<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>

 main.jsp代码块：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入 -->
    <%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</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">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </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:;">会议管理1</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" 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 class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 
let $,element;
layui.use(['jquery','element'],function(){
	$ = layui.jquery,element=layui.element;
	$.ajax({
		url:'${pageContext.request.contextPath}/permission.action?methodName=permission',
		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='openTabs(\""+children[index].text+"\",\""+children[index].attributes.self.url+"\",\""+children[index].id+"\")'>"+children[index].text+"</a></dd>";
					})
					htmlstr+="</dl>";
				}

			});
			$("#menu").html(htmlstr);
		}
	});
});

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

function openTabs(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，这里以时间戳模拟下
	    })
	}
	//切换到指定Tab项
    element.tabChange('demo', id);
    
  }
</script>
</body>
</html>

运行一下如图所示：

我们去写一个：

                                        ​​​​​​​         

addMeeting.jsp代码块：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
发布会议主界面
</body>
</html>

 在运行一下如图所示：

二、登录功能实现 

 在写登录功能的时候先完成这个问题：是不是总是在运行的时候就会出现这个很容易误导是报错现象会很烦，我们来解决一下这个功能

 在我们的F盘里面有一个文件把这些原有的文件全部替换一下即可，之前我们数据库里面写一个User.java代码块，今天我们要改为动态的，所以要更换

    跟这个保存一致    

        ​​​​​​​        ​​​​​​​        ​​​​​​​         

 举个例子：

R.java代码块：它就有很多优化的空间

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.java继承baseDao.java代码块显示：

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()+"'";
//		根据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.zking.web;

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

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

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 login(HttpServletRequest req, HttpServletResponse resp) {
//		Map<String, Object> map = new HashMap<String, Object>();
//		if("zhangsan".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
			登录成功
//			map.put("code", 200);
//			map.put("msg", "登录成功");
//		}
//		else {
			登录失败
//			map.put("code", 0);
//			map.put("msg", "账户密码有误");
//		}
//		try {
//			ResponseUtil.writeJson(resp, map);
//		} catch (Exception e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		}
//		return null;
//	}
	
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			if("zhangsan".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
				ResponseUtil.writeJson(resp, new R()
						.data("code",200)
						.data("msg","登录成功"));
			}
			else {
				ResponseUtil.writeJson(resp, new R()
						.data("code",0)
						.data("msg","账户密码有误"));
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

}

 现在我们把它变为活的：UserAction.java代码块

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) {
//		Map<String, Object> map = new HashMap<String, Object>();
//		if("zhangsan".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
			登录成功
//			map.put("code", 200);
//			map.put("msg", "登录成功");
//		}
//		else {
			登录失败
//			map.put("code", 0);
//			map.put("msg", "账户密码有误");
//		}
//		try {
//			ResponseUtil.writeJson(resp, map);
//		} catch (Exception e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		}
//		return null;
//	}
	
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
//			调用我们的login方法
			User u = userDao.login(user);
//			通过账户名密码查到了用户记录
			if(u!=null) {
//				ResponseUtil.writeJson(resp, new R()
//						.data("code",200)
//						.data("msg","登录成功"));
//				这个就是我们刚刚为什么要更换util所以数据我举例的R().java
//				上面的就等价于下面这段代码
				ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
			}
		} catch (Exception e) {
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
			e.printStackTrace();
		}
		return null;
	}
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

}

前台代码也要改因为我们之前的是这样的

现在我们的数据库是这样的

所以要改一下:

<script type="text/javascript">
    	layui.use(['jquery','layer'],function(){
    		var $ = layui.jquery
    		,layer = layui.layer;//es6
			// 給登录按钮添加点击事件
    		$("#login").click(function(){
    			$.ajax({
    				url:"${pageContext.request.contextPath}/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});
  						}
    				}
    			})
    		})
    	});
    </script>

我们运行一下示范一下错误的：

 我们在去看一下后台有没有出现像前面的那样的错误显示如图所示：目前已经没有了

我数据库的密码1234，我输入的是123所以登录失败，运行一下正确的

 三、会议OA项目翻新

 1.把我们不要的先删掉了，这些是当时为了搭建项目，被选中的可以删掉了，还要其他被选中的，目前我们只做了登录和主界面

       ——     ——     ————还有mvc.xml的配置文件

mvc.xml以前的代码块：

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/blog" type="com.zking.web.BlogAction">
		<forward name="list" path="/blogList.jsp" redirect="false" />
		<forward name="toList" path="/blog.action?methodName=list"
			redirect="true" />
		<forward name="toEdit" path="/blogEdit.jsp" redirect="false" />
	</action>

	<action path="/user" type="com.zking.web.UserAction">
	</action>
	
	<action path="/permission" type="com.zking.web.PermissionAction">
	</action>

</config>

 现在要把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>

 注意每处理一个文件就去测试一下如图所示：这是我们删完了之后运行的结果为这样就说明没有问题

 我们接下来就要建两个js文件

在我们的login.js里面把我们的login.jsp里面的script里面的方法给复制过去

login.js代码块：

layui.use(['jquery','layer'],function(){
	var $ = layui.jquery
	,layer = layui.layer;//es6
	// 給登录按钮添加点击事件
	$("#login").click(function(){
		$.ajax({
			url:"${pageContext.request.contextPath}/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里面把我们的mian.jsp里面的script里面的方法给复制过去

main.js代码块：

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

			});
			$("#menu").html(htmlstr);
		}
	});
});

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

function openTabs(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，这里以时间戳模拟下
	    })
	}
	//切换到指定Tab项
    element.tabChange('demo', id);
    
  }

 接着在login.jsp和mian.jsp里面就要导入对应的js

login.jsp里面引入的：
<script src="${pageContext.request.contextPath}/static/js/login.js"></script>
mian.jsp里面引入的：
<script src="${pageContext.request.contextPath}/static/js/main.js"></script>

在我们的公共页面要加一标签：

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}/"/>

这个指定整个项目的根路径的作用是什么：

就是在我们login.jsp和mian.jsp里面导入的js可以不需要

${pageContext.request.contextPath}/这个包括后面的js也可以不需要

引入的js

<script src="static/js/login.js"></script>
<script src="static/js/mian.js"></script>

login.js代码块： 

layui.use(['jquery','layer'],function(){
	var $ = 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);
				if(data.code==200){
					layer.alert(data.msg, {icon: 1});
					location.href='main.jsp';
				}
				else{
					layer.alert(data.msg, {icon: 2});
				}
			}
		})
	})
});

 main.jsp代码块：

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

			});
			$("#menu").html(htmlstr);
		}
	});
});

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

function openTabs(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，这里以时间戳模拟下
	    })
	}
	//切换到指定Tab项
    element.tabChange('demo', id);
    
  }

 UserAction.java代码块：

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

			});
			$("#menu").html(htmlstr);
		}
	});
});

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

function openTabs(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，这里以时间戳模拟下
	    })
	}
	//切换到指定Tab项
    element.tabChange('demo', id);
    
  }

主要加了这行代码： 

来测试一下，如果说打印了说明没有问题，但这里都报错了，所以说在js中是不能使用js表达式的

 所以说这下面这段代码不能放在js表达式，也用不了，所以说我们要加一个base标签指定整个项目的根路径

<base href="${pageContext.request.contextPath}/"/>

 最总的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>玉渊工作室</title>

 login.jsp代码块：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 导入这个文件 -->
    <%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta 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">
<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>

 main.jsp代码块：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入 -->
    <%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="static/js/mian.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">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </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:;">会议管理1</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" 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 class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 

</script>
</body>
</html>

 最后我们在运行一下如图所示：

最终mian.jsp代码块：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入 -->
    <%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="static/js/mian.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="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 class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 

</script>
</body>
</html>

 最终效果如图所示：

敢敢130
关注
原生J2EE项目集成LayUi前端框架，助你快速构建后台管理系统
Steafan_
11-08 3757
说起后台管理系统，相信大家都不陌生。本博文教大家如何使用原生JSP集合LayUi开发一套属于自己的后台管理系统，主要讲解开发思路，具体技术细节不做讲解。 一、说在前面的话        为什么我会选择使用原生JSP作为主要开发语言？  不管你是学生还是即将工作的朋友还是已经工作的同事，相信你接触到的最多的应该是各种各样的框架，听说过最多的也是各种各样的技术框架，没有人说用JSP开发一款什么什...
LayUI可关闭Tab选项卡嵌套iframe实例（解决可关闭的Tab关闭按钮隐藏、页面不会重复开启、tab嵌套iframe页面显示不全问题）
乌有先生子虚子的博客
09-30 2247
1.HTML页面代码片段 <!-- 左侧导航区域，参照官方实例模板 --> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="left_nav"> <li class="layui-nav-item layui-nav-itemed">
LayUI之动态选项卡Tab&iframe使用
m0_62604616的博客
07-18 1471
可以看见已经更改了，但是有重复的，所以我们要进行再一次的优化。将官网中任意一种选项卡的代码复制下来，粘贴到你要用的地方。然后我们PermissionDao这个类也进行改动。①、查找layui的选项卡页面布局代码--静态。④重复的tab选项卡不添加，改为选中。只要将openTab方法进行改动即可。③优化UserAction。③、将选项卡名称换成菜单名。①创建实体类User。...
layui tab嵌入iframe
enthan809882的博客
11-04 5950
tab的content是支持html，那么如何实现呢： var element = layui.element; //一些事件监听 element.tabAdd('demo', { title: '选项卡的标题' ,content: "<iframe name='myIframe' id='myIframe' src='/layout/right' frameborder='0...
LayUi之动态选项卡Tab&Iframe的使用
m0_67477525的博客
07-18 2315
.ajax({url'json',success;;});}})}});});titletitle,content100%;height100%;,idid})}//切换到用户管理}
J2EE探索：有状态网络的J2EE技术
03-05
J2EE中的Javaservlet和EnterpriseJavaBeans 组件都提供了有状态服务器端处理。...上个月，我们讨论了J2EE 中管理无状态网络的最佳选项；这个月我们将讨论管理有状态网络的技术。 首先我将简要介绍有状态
J2EE预览：使用XML封装JDBC语句设计
03-05
通过XML保存JDBC相关配置(参考) 作者：13部王曦同学在学习J2EE的XML开发的小项目。 说明：做得越多，收获越多。 博文链接：https://java1573.iteye.com/blog/124704
layui tab嵌入iframe 高度自适应
亮大大的博客
11-13 3591
--layui-body 标签内容：修改style属性 <div class="layui-body"> <div class="layui-tab" lay-filter="main" lay-allowClose="true" style="height: 100%;margin: 0px;overflow: hidden;"> ...
layui Tab选项卡切换跟随特效（源码）
09-14
HTML代码 layui弹出层特效 下拉菜单 垂直菜单 导航条 Tab 选项卡切换跟随
使用Iframe实现TAB页面切换
08-06
NULL 博文链接：https://13813962825.iteye.com/blog/2067021
layui_03动态选项卡Tab&iframe使用
weixin_73471776的博客
07-12 315
1.参考官网是否有空件/模块能够支撑完成对应工能-静态。2.将静态的选项卡转化成动态的选项卡。3.将选项卡的标签名变成实际菜单名。4.重名的选项卡不能打开新的。实现选项卡功能，调整项目结构。5.重名选项卡需要被选中。
Layui之动态选项卡&iframe使用
weixin_64313980的博客
07-19 881
一，动态选项卡。
Layui(七) Layui Tab页面和iframe页面嵌套
qq_42142258的博客
02-18 6890
目的： 在Tab页面展示iframe页面宽高不能自适应，让iframe 页面打开即最大化 过程： 注：在调用iframe页面处，新增个success方法，调用 layer.full(index) 即可在iframe窗口打开时自动最大化显示！ ...
layui-导航页面-带左侧栏伸缩和tab嵌入iframe自适应的前端代码
GinChou的萌新博客
05-26 2660
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" name="referrer" content="no-referrer"> <meta http-equiv="Content-Type" name="viewport" content="width=device-width, initia.
前端框架Layui实现动态选项卡&iframe使用（附源码）
最新发布
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-13 4883
iframe（内嵌框架）是HTML中的一个标签，用于在网页中嵌入另一个页面或文档。通过使用iframe标签，可以在网页中创建一个独立的内联框架，用于显示来自不同源或同一源的外部内容。这个嵌入的页面可以是其他网页、视频、地图、广告等等。src：指定要加载的内容的URL。width：指定`iframe`的宽度。-height：指定`iframe`的高度。frameborder：指定是否显示边框。scrolling：指定是否显示滚动条。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值