目录
一、tab选项卡
二、登录功能实现
三、会议OA项目翻新
一、tab选项卡
1、main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@include file="common/header.jsp" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="static/js/main.js"></script></head><body><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="///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 style="padding: 15px;"><div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="-1">首页</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">首页内容</div></div></div></div></div><!-- </div> --><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div></div><script></script></body></html>
2、main.js
let $,element;layui.use(['jquery','element'],function(){$ = layui.jquery,element=layui.element;$.ajax({url:'permission.action?methodName=menus',dataType:'json',success:function(data){console.log(data);let htmlstr='';$.each(data,function(i,n){htmlstr+='<li class="layui-nav-item layui-nav-itemed">';htmlstr+='<a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在子节点if(data[i].hasChildren){htmlstr+='<dl class="layui-nav-child">';let children = data[i].children;$.each(children,function(index,node){htmlstr+='<dd><a href="javascript:;" onclick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\')">'+children[index].text+'</a></dd>';});htmlstr+='</dl>';}htmlstr+='</li>';});$("#menu").html(htmlstr);}});});/** 1.查找layui的选项卡页面布局代码-静态2.动态的添加选项卡3.将选项卡名称换成菜单名4.重复的tab选项卡不添加，改为选中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，这里以时间戳模拟下})}element.tabChange('demo', id); }
3、运行效果
二、登录功能实现
1、login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@include file="common/header.jsp" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all"><link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all"><script src="static/js/login.js"></script><style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style></head><body class="tx-login-bg"><div class="tx-login-box"><div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div><ul class="tx-form-li row"><li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li><li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li><li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li><li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li><li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li></ul></div><script type="text/javascript"></script></body></html>
2、login.js
layui.use(['jquery','layer'],function(){let $=layui.jquery,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){if(data.code==200){layer.alert(data.msg,{icon:1});location.href='main.jsp';}else{layer.alert(data.msg,{icon:2});}//console.log(data);//alert(data);}});});});
3、UserDao
package com.zking.dao;import java.util.List;import com.zking.entity.User;import com.zking.util.BaseDao;public class UserDao extends BaseDao<User> {public User login(User user) throws Exception {String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";//根据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);}}
4、UserAction
package com.zking.web;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.zking.dao.UserDao;import com.zking.entity.User;import com.zking.framework.ActionSupport;import com.zking.framework.ModelDriver;import com.zking.util.R;import com.zking.util.ResponseUtil;public class UserAction extends ActionSupport implements ModelDriver<User>{private User user=new User();private UserDao userDao=new UserDao();//写一个方法处理前台的请求/*public String login(HttpServletRequest req, HttpServletResponse resp) {Map<String , Object> map=new HashMap<>();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) {e.printStackTrace();}return null;}*/public String login(HttpServletRequest req, HttpServletResponse resp) {try {User u = userDao.login(user);//通过账户名密码查到了用户记录if(u!=null) {//ResponseUtil.writeJson(resp, new R().//data("code", 200).//data("msg", "成功"));ResponseUtil.writeJson(resp, R.ok(200, "成功"));//req.getSession().setAttribute("user", u);}else {//ResponseUtil.writeJson(resp, new R().data("code", 0).data("msg", "账号密码错误"));ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));} catch (Exception e1) {e1.printStackTrace();}}return null;}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}
5、运行效果
三、会议OA项目翻新
1、header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><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>
2、mvc.xml的配置
<?xml version="1.0" encoding="UTF-8"?><config><action path="/user" type="com.zking.web.UserAction"></action><action path="/permission" type="com.zking.web.PermissionAction"></action></config>
3、User实体类
package com.zking.entity;public class User {private Long id;private String name;private String loginName;private String pwd;private Long rid;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public Long getRid() {return rid;}public void setRid(Long rid) {this.rid = rid;}public User() {super();// TODO Auto-generated constructor stub}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";}}
