技术标签: layui 前端 javascript
目录
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>
运行一下如图所示:
上官网找把这个复制到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,这里以时间戳模拟下
})
}
运行结果如图所示:点击一个都是随机数
但我们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>
在运行一下如图所示:
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);
}
运行一下如图所示:
<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所以登录失败,运行一下正确的
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>
最终效果如图所示:
论文笔记整理:吴锐,东南大学硕士。来源:SIAM ICDM 2020论文下载地址:https://epubs.siam.org/doi/abs/10.1137/1.97816119762...
本期 AI Drive,由腾讯天衍实验室研究员-张子恒,详细解读天衍实验室知识图谱对齐技术。具体主题如下:为什么需要知识图谱对齐面向医疗领域知识的知识图谱对齐技术总结及未来展望什么是知识图...
20145221 《信息安全系统设计基础》期中总结知识点梳理第一周博客链接及主要内容20145221 《信息安全系统设计基础》第1周学习总结Shell(命令解析器)重要快捷键Linux重要命令manfindlocatecheatgrepwhichwhereis文件操作文件打包/解压:zip/unzipdf:查看磁盘的容量du:查看目录的容量touch:创建...
Scala深入浅出实战经典:35,List的map、flatMap、foreach、filter操作代码实战
终于到了这个时刻,Android中的定律,主线程不做耗时操作,子线程不更新ui。这次也是根据给初学者的RxJava2.0教程(二)进入下面的学习。直接上代码 private TextView mTextView; public RxJavaThread(TextView textView) { mTextView = textView; } ...
线程之间到底使用什么沟通的呢?如何把数值变化传递给其他子线程?来源:blog.csdn.net/lanxian837820149/article/details/101479004Mark...
2019独角兽企业重金招聘Python工程师标准>>> ...
一、MSB和LSB首先我们要理解什么是MSB和LSB。数据在计算机里面都是二进制存储的,二进制的最高位为MSB,最低位是LSB。MSB:Most Significant Bit(最高有效位),也就是最高位,最左侧的bit。LSB:Least Significant Bit(最低有效位),最低位,最右侧的bit。二、存储空间的高地址字节和低地址字节除了char之外,其他类型的变量空间基本上都有很多字节。int类型的变量空间为4...
正确写法&lt;c:if test="${fn:containsIgnoreCase(showMenuFlag,'6') &amp;&amp; isFlag == '1'}"&gt;&lt;/c:if&gt;错误写法&lt;c:if test="${fn:containsIgnoreCase(showMenuFlag,'6') &amp;&amp; isFlag == '1'}...
突然觉得CCF好简单。
整数快速幂 & 快速幂取模快速幂a^b^的朴素算法快速幂的原理快速幂【代码】快速幂取模幂取模的朴素的实现快速幂取模原理快速幂取模【代码】矩阵快速幂矩阵快速幂【代码】例题P1226 【模板】快速幂||取余运算P3390 【模板】矩阵快速幂快速幂所谓的快速幂,其目的是为了快速求幂,将时间复杂度从O(n)朴素算法的降到O(logn)。假如现在要求ab,按照朴素算法,就是将a连乘b次,时间复杂度为O(b),即O(n)级别。ab的朴素算法// O(n)#include<cstdio>
登录Linux打开虚拟机,启动安装好的centos首先会见到这个默认等待窗口CentOS Linux7(Core)Kernel 3.10.0-957.eI7。x86_64 on an x86_64localhost login:这时需要输入用户密码,无特殊需要使用安装时设定的账户密码即可。注意:密码的输入过程是没有符号显示的。登录成功,如图所示最后一次登录的时间是。。。登...