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

目录

一、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>

 最终效果如图所示:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值