目录
前言
一、动态选项卡
1、查找LayUI的选项卡页面布局代码
2、动态添加选项卡
3、将选项卡名称换成对应的菜单名
4、重复出现的tab选项卡不添加，改为选中
5、内置页面的跳转
二、登录功能优化
前言
上次我们分享了LayUI的动态树，既侧边菜单。做了这个功能总要有用吧，这次分享的内容就是基于上篇分享的内容进行完善。在点击侧边菜单时，新增选项卡、点击已有选项卡的菜单项更改选中。
一、动态选项卡
首先进行思路分析：
我们要用LayUI进行动态选项卡。步骤如下：
1、查找LayUI的选项卡页面布局代码
2、动态添加选项卡
3、将选项卡名称换成对应的菜单名
4、重复出现的tab选项卡不添加，改为选中
5、内置页面的跳转
1、查找LayUI的选项卡页面布局代码
- 网站设置
- 用户管理
- 权限分配
- 商品管理
- 订单管理
2. Tab进行了响应式处理，所以无需担心数量多少。 内容2 内容3 内容4 内容5
运用到案例中
代码展示：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
Insert title here
layui 后台布局
-
贤心
- 基本资料
- 安全设置
- 退了
- 网站设置
- 用户管理
- 权限分配
- 商品管理
- 订单管理
效果演示：
2、动态添加选项卡
点击菜单时要动态生成tab选项卡。
需要给菜单添加点击事件，点击菜单时调用增加选项卡的方法。
点击菜单时要动态生成tab选项卡。
需要给菜单添加点击事件，点击菜单时调用增加选项卡的方法。
示例代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
Insert title here
layui 后台布局
-
贤心
- 基本资料
- 安全设置
- 退了
- 首页
示例演示：
3、将选项卡名称换成对应的菜单名
在将选项卡名称换为对应的菜单名称的同时，将选项卡的内容等也进行更改。
在将选项卡名称换为对应的菜单名称的同时，将选项卡的内容等也进行更改。
看一下传过来的值里面是否含有title，url，id这三个数据，有的话就好办多了。
可以看到我们传过来的值有title和id，就差url，现在就需要想办法拿到url。
在数据库中可知这个菜单是有url的。
我们在permissionDao向前端返回了数据，看看有没有机会将url一并返回到前端。
可以看到我们返回的类型是treevo
而treevo中并没有url这个属性，我们可以将url存入节点属性中。
示例代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
Insert title here
layui 后台布局
-
贤心
- 基本资料
- 安全设置
- 退了
- 首页
示例效果展示：
4、重复出现的tab选项卡不添加，改为选中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
Insert title here
layui 后台布局
-
贤心
- 基本资料
- 安全设置
- 退了
- 首页
内容1
- 基本资料
- 安全设置
从上图的对比可知，多次点击length会发生变化。
示例代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
Insert title here
layui 后台布局
-
贤心
- 基本资料
- 安全设置
- 退了
- 首页
效果展示：
5、内置页面的跳转
二、登录功能优化
package com.zking.dao; import java.util.List; import com.zking.entity.User; import com.zking.util.BaseDao; public class UserDao extends BaseDao{ public User login(User user) throws Exception { String sql = "select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'"; List users = super.executeQuery(sql, User.class,null); return users == null || users.size() == 0 ? null : users.get(0); } }
package com.zking.web; 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{ private User user = new User(); private UserDao userDao = new UserDao(); public String login(HttpServletRequest req, HttpServletResponse resp) { try { User u = userDao.login(user); if(u != null) { // ResponseUtil.writeJson(resp, new R() // .data("code", 200) // .data("msg","成功") // ); ResponseUtil.writeJson(resp, R.ok(200, "成功")); }else { // ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误")); } } catch (Exception e) { e.printStackTrace(); try { ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误")); } catch (Exception e1) { // TODO Auto-generated catch block e1.printStackTrace(); } } return null; } @Override public User getModel() { return user; } }
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
Insert title here
新用户注册
忘记密码
