四 管理员登录 - 2. 登录退出功能

2. 登录退出功能

分支: git checkout -b 4.2.0_login_logout

2.1 目标

• 识别操作系统对的人的身份, 控制它的行为

2.2 思路

2.3 代码

2.3.1 创建工具方法执行 MD5 加密

/**
     * MD5 加密
     *
     * @param source 明文字符串
     * @return 加密后的字符串
     */
    public static String md5(String source) {
        // 1. 判断 source 是否有效
        if (source == null || source.length() == 0) {
            // 2. 如果不是有效的字符串抛出异常
            throw new RuntimeException(CrowdConstant.MESSAGE_STRING_INVALIDATE);
        }

        // 3. 获取 MessageDigest 对象
        String algorithm = "md5";
        try {
            MessageDigest messageDigest = MessageDigest.getInstance(algorithm);

            // 4. 获取明文字符串对应的字节数组
            byte[] input = source.getBytes();

            // 5. 执行加密
            byte[] output = messageDigest.digest(input);

            // 6. 创建 BigInteger 对象
            int signum = 1;
            BigInteger bigInteger = new BigInteger(signum, output);

            // 7. 按照 16 进制将 bigInteger 的值转换为字符串
            int radix = 16;
            String encoded = bigInteger.toString(radix);

            return encoded;
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }

        return null;
    }

• 常量

package com.atguigu.crowd.constant;

public class CrowdConstant {
    
    public static final String MESSAGE_LOGIN_FAILED = "抱歉! 账号密码错误! 请重新输入!";
    public static final String MESSAGE_LOGIN_ACCT_ALREADY_IN_USE = "抱歉! 这个账号已经被使用了!";
    public static final String MESSAGE_ACCESS_FORBIDEN = "请登录以后再访问";
    public static final String MESSAGE_STRING_INVALIDATE = "字符串不合法!请不要传入空字符串!";
    
}

• 测试 StringTest.java

package com.atguigu.crowd.test;

import com.atguigu.crowd.util.CrowdUtil;
import org.junit.Test;

public class StringTest {

    /**
     * MD5 加密测试
     */
    @Test
    public void testMd5() {
        String source = "123456";
        String encoded = CrowdUtil.md5(source);
        // 结果 => e10adc3949ba59abbe56e057f20f883e
        System.out.println(encoded);
    }

}

2.3.2 创建自定义异常 - 登录失败的异常

package com.atguigu.crowd.exception;

/**
 * 登录失败后抛出的异常
 */
public class LoginFailedException extends RuntimeException {
    private static final long serialVersionUID = 1L;

    public LoginFailedException() {
        super();
    }

    public LoginFailedException(String message) {
        super(message);
    }

    public LoginFailedException(String message, Throwable cause) {
        super(message, cause);
    }

    public LoginFailedException(Throwable cause) {
        super(cause);
    }

    public LoginFailedException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

2.3.3 在异常处理类中增加登录失败异常的处理

• 失败后跳转到 登录页面

    /**
     * 登录失败异常的处理
     * 
     * @param exception
     * @param request
     * @param response
     * @return
     * @throws IOException
     */
    @ExceptionHandler(value = LoginFailedException.class)
    public ModelAndView resolveNullPointerException(
            LoginFailedException exception,
            HttpServletRequest request,
            HttpServletResponse response
    ) throws IOException {
        String viewName = "admin-login";
        return commonExceptionResolver(viewName, exception, request, response);
    }

• 将字符串 “exception” 改为 CrowdConstant.ATTR_NAME_EXCEPTION

package com.atguigu.crowd.mvc.config;

import com.atguigu.crowd.constant.CrowdConstant;
import com.atguigu.crowd.exception.LoginFailedException;
import com.atguigu.crowd.util.CrowdUtil;
import com.atguigu.crowd.util.ResultEntity;
import com.google.gson.Gson;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @ControllerAdvice: 表示当前类是一个基于注解的异常处理器类
 */
@ControllerAdvice
public class CrowdExceptionResolver {

    /**
     * 登录失败异常的处理
     *
     * @param exception
     * @param request
     * @param response
     * @return
     * @throws IOException
     */
    @ExceptionHandler(value = LoginFailedException.class)
    public ModelAndView resolveNullPointerException(
            LoginFailedException exception,
            HttpServletRequest request,
            HttpServletResponse response
    ) throws IOException {
        String viewName = "admin-login";
        return commonExceptionResolver(viewName, exception, request, response);
    }

    @ExceptionHandler(value = ArithmeticException.class)
    public ModelAndView resolveNullPointerException(
            ArithmeticException exception,
            HttpServletRequest request,
            HttpServletResponse response
    ) throws IOException {
        String viewName = "system-error";
        return commonExceptionResolver(viewName, exception, request, response);
    }

    /**
     * @param exception
     * @param request
     * @param response
     * @return
     * @throws IOException
     * @ExceptionHandler: 将一个具体的异常类型和一个方法关联起来
     */
    @ExceptionHandler(value = NullPointerException.class)
    public ModelAndView resolveNullPointerException(
            NullPointerException exception,
            HttpServletRequest request,
            HttpServletResponse response
    ) throws IOException {
        String viewName = "system-error";
        return commonExceptionResolver(viewName, exception, request, response);
    }

    public static ModelAndView commonExceptionResolver(
            // 跳转的视图
            String viewName,
            // 实例捕获到的异常类型
            Exception exception,
            // 当前请求对象
            HttpServletRequest request,
            HttpServletResponse response
    ) throws IOException {
        // 1. 判断请求类型
        boolean judgeRequestType = CrowdUtil.judgeRequestType(request);

        // 2. 如果是 Ajax 请求
        if (judgeRequestType) {
            // 3. 创建 ResultEntity 对象
            ResultEntity<Object> resultEntity = ResultEntity.failed(exception.getMessage());

            // 4. 创建 Gson 对象
            Gson gson = new Gson();

            // 5. 将 ResultEntity 对象转换为 JSON 对象
            String json = gson.toJson(resultEntity);

            // 6. 将 JSON 字符串作为响应体返回
            response.getWriter().write(json);

            // 7. 由于上面已经通过原生的 response 对象返回了响应, 所以不提供 ModelAndView 对象
            return null;
        }

        // 8. 如果不是 Ajax 请求则创建 ModelAndView 对象
        ModelAndView modelAndView = new ModelAndView();

        // 9. 将 Exception 对象存入模型
        modelAndView.addObject(CrowdConstant.ATTR_NAME_EXCEPTION, exception);

        // 10. 设置对应的视图名称
        modelAndView.setViewName(viewName);

        // 11. 返回 ModelAndView 对象
        return modelAndView;
    }

}

• 常量

package com.atguigu.crowd.constant;

public class CrowdConstant {

    public static final String MESSAGE_LOGIN_FAILED = "抱歉! 账号密码错误! 请重新输入!";
    public static final String MESSAGE_LOGIN_ACCT_ALREADY_IN_USE = "抱歉! 这个账号已经被使用了!";
    public static final String MESSAGE_ACCESS_FORBIDEN = "请登录以后再访问";
    public static final String MESSAGE_STRING_INVALIDATE = "字符串不合法!请不要传入空字符串!";
    public static final String MESSAGE_SYSTEM_ERROR_LOGIN_NOT_UNIQUE = "系统错误: 登录账户不唯一！";

    public static final String ATTR_NAME_LOGIN_ADMIN = "loginAdmin";
    public static final String ATTR_NAME_EXCEPTION = "exception";
}

2.3.4 在登录页面显示异常消息

• admin-login.jsp

${ requestScope.exception.message }
    <form id="loginForm" action="admin/do/login.html" method="POST"
          class="form-signin" role="form">
        <h2 class="form-signin-heading">
            <i class="glyphicon glyphicon-log-in"></i> 管理员登录
        </h2>
        ${ requestScope.exception.message }
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="floginacct"
                   name="loginAcct" value="tom" placeholder="请输入登录账号"
                   onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
                   onkeyup="value=value.replace(/[\u4e00-\u9fa5]/g,'') "
                   style="ime-mode: disabled"> <span
                class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="password" class="form-control"
                   onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
                   id="fuserpswd" name="userPswd" value="123456" placeholder="请输入登录密码"
                   style="margin-top: 10px;"> <span
                class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <button type="submit" class="btn btn-lg btn-success btn-block">登录</button>
    </form>

2.3.5 Handler

package com.atguigu.crowd.mvc.handler;

import com.atguigu.crowd.constant.CrowdConstant;
import com.atguigu.crowd.entity.Admin;
import com.atguigu.crowd.service.api.AdminService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpSession;

@Controller
public class AdminHandler {

    @Autowired
    AdminService adminService;

    @RequestMapping("/admin/do/login.html")
    public String doLogin(
            @RequestParam("loginAcct") String loginAcct,
            @RequestParam("userPswd") String userPswd,
            HttpSession session
    ) {
        // 调用 Service 方法执行登录检查
        // 这个方法如果能够返回 admin 对象说明登录成功,
        // - 如果账号、密码不正确则会抛出异常
        Admin admin = adminService.getAdminByLoginAcct(loginAcct, userPswd);

        // 将登录成功返回的 admin 对象存入 Session 域
        session.setAttribute(CrowdConstant.ATTR_NAME_LOGIN_ADMIN, admin);
        return "admin-main";
    }

}

• 常量

package com.atguigu.crowd.constant;

public class CrowdConstant {

    public static final String MESSAGE_LOGIN_FAILED = "抱歉! 账号密码错误! 请重新输入!";
    public static final String MESSAGE_LOGIN_ACCT_ALREADY_IN_USE = "抱歉! 这个账号已经被使用了!";
    public static final String MESSAGE_ACCESS_FORBIDEN = "请登录以后再访问";
    public static final String MESSAGE_STRING_INVALIDATE = "字符串不合法!请不要传入空字符串!";

    public static final String ATTR_NAME_LOGIN_ADMIN = "loginAdmin";
}

2.3.6 Service

package com.atguigu.crowd.service.api;

import com.atguigu.crowd.entity.Admin;

import java.util.List;

public interface AdminService {

    void saveAdmin(Admin admin);

    List<Admin> getAll();

    Admin getAdminByLoginAcct(String loginAcct, String userPswd);

}
package com.atguigu.crowd.service.impl;

import com.atguigu.crowd.constant.CrowdConstant;
import com.atguigu.crowd.entity.Admin;
import com.atguigu.crowd.entity.AdminExample;
import com.atguigu.crowd.exception.LoginFailedException;
import com.atguigu.crowd.mapper.AdminMapper;
import com.atguigu.crowd.service.api.AdminService;
import com.atguigu.crowd.util.CrowdUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Objects;

@Service
public class AdminServiceImpl implements AdminService {

    @Autowired
    private AdminMapper adminMapper;

    @Override
    public void saveAdmin(Admin admin) {
        adminMapper.insert(admin);

        throw new RuntimeException();
    }

    @Override
    public List<Admin> getAll() {
        return adminMapper.selectByExample(new AdminExample());
    }

    @Override
    public Admin getAdminByLoginAcct(String loginAcct, String userPswd) {
        // 1. 根据登录账号查询 Admin 对象
        // 1.1. 创建 AdminExample 对象
        AdminExample adminExample = new AdminExample();
        // 1.2. 创建 Criteria 对象
        AdminExample.Criteria criteria = adminExample.createCriteria();
        // 1.3. 在 Criteria 对象中封装查询条件
        criteria.andLoginAcctEqualTo(loginAcct);
        // 1.4. 调用 AdminMapper 的方法执行查询
        List<Admin> list = adminMapper.selectByExample(adminExample);

        if (list == null || list.size() == 0) {
            throw new LoginFailedException(CrowdConstant.MESSAGE_LOGIN_FAILED);
        }

        if (list.size() > 1) {
            throw new RuntimeException(CrowdConstant.MESSAGE_SYSTEM_ERROR_LOGIN_NOT_UNIQUE);
        }

        Admin admin = list.get(0);
        // 2. 判断 Admin 对象是否为空
        if (admin == null) {
            // 2.1 如果 Admin 对象为空, 抛出异常
            throw new LoginFailedException();
        }

        // 2.2 如果 Admin 对象存在
        // 2.2.1 将数据库密码从 Admin 对象中取出
        String userPswdDB = admin.getUserPswd();

        // 2.2.2 将表单提交的明文密码进行加密
        String userPswdForm = CrowdUtil.md5(userPswd);
        // 2.2.3 比较密码
        if (!Objects.equals(userPswdDB, userPswdForm)) {
            // 2.2.3.1 密码不一致 抛出异常
            throw new LoginFailedException(CrowdConstant.MESSAGE_LOGIN_FAILED);
        }

        // 2.2.3.2 密码一致 返回 Admin 对象
        return admin;
    }

}

• 常量

package com.atguigu.crowd.constant;

public class CrowdConstant {

    public static final String MESSAGE_LOGIN_FAILED = "抱歉! 账号密码错误! 请重新输入!";
    public static final String MESSAGE_LOGIN_ACCT_ALREADY_IN_USE = "抱歉! 这个账号已经被使用了!";
    public static final String MESSAGE_ACCESS_FORBIDEN = "请登录以后再访问";
    public static final String MESSAGE_STRING_INVALIDATE = "字符串不合法!请不要传入空字符串!";
    public static final String MESSAGE_SYSTEM_ERROR_LOGIN_NOT_UNIQUE = "系统错误: 登录账户不唯一！";

    public static final String ATTR_NAME_LOGIN_ADMIN = "loginAdmin";
}

2.3.7 测试登录, 先把数据库密码加密 - e10adc3949ba59abbe56e057f20f883e <123456>

2.3.8 重定向后台首页

为了避免跳转到后台主页再刷新浏览器导致重复提交表单, 重定向到目标页面

所以 handler 方法需要做相应的修改

• AdminHandler.java

    @RequestMapping("/admin/do/login.html")
    public String doLogin(
            @RequestParam("loginAcct") String loginAcct,
            @RequestParam("userPswd") String userPswd,
            HttpSession session
    ) {
        // 调用 Service 方法执行登录检查
        // 这个方法如果能够返回 admin 对象说明登录成功,
        // - 如果账号、密码不正确则会抛出异常
        Admin admin = adminService.getAdminByLoginAcct(loginAcct, userPswd);

        // 将登录成功返回的 admin 对象存入 Session 域
        session.setAttribute(CrowdConstant.ATTR_NAME_LOGIN_ADMIN, admin);
        return "redirect:/admin/to/main/page.html";
    }

• spring-web-mvc.xml

• • 给目标地址添加通过 view-controller

<mvc:view-controller path="/admin/to/main/page.html" view-name="admin-main"/>

2.3.9 后台首页 - admin-main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
DOCTYPE html>
<html lang="zn-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js">script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js">script>
    <script type="text/javascript" src="script/docs.min.js">script>
    <script type="text/javascript">
        $(function () {
            $(".list-group-item").click(function(){
                if ( $(this).find("ul") ) {
                    $(this).toggleClass("tree-closed");
                    if ( $(this).hasClass("tree-closed") ) {
                        $("ul", this).hide("fast");
                    } else {
                        $("ul", this).show("fast");
                    }
                }
            });
        });
    script>
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        .tree-closed {
            height : 40px;
        }
        .tree-expanded {
            height : auto;
        }
    style>
head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 控制面板a>div>
        div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user">i> ${ sessionScope.loginAdmin.userName }
                            <span class="caret">span>
                        button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog">i> 个人设置a>li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment">i> 消息a>li>
                            <li class="divider">li>
                            <li><a href="index.html"><i class="glyphicon glyphicon-off">i> 退出系统a>li>
                        ul>
                    div>
                li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign">span> 帮助
                    button>
                li>
            ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="查询">
            form>
        div>
    div>
nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <ul style="padding-left:0px;" class="list-group">
                    <li class="list-group-item tree-closed" >
                        <a href="main.html"><i class="glyphicon glyphicon-dashboard">i> 控制面板a>
                    li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon glyphicon-tasks">i> 权限管理 <span class="badge" style="float:right">3span>span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="user.html"><i class="glyphicon glyphicon-user">i> 用户维护a>
                            li>
                            <li style="height:30px;">
                                <a href="role.html"><i class="glyphicon glyphicon-king">i> 角色维护a>
                            li>
                            <li style="height:30px;">
                                <a href="permission.html"><i class="glyphicon glyphicon-lock">i> 许可维护a>
                            li>
                        ul>
                    li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-ok">i> 业务审核 <span class="badge" style="float:right">3span>span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="auth_cert.html"><i class="glyphicon glyphicon-check">i> 实名认证审核a>
                            li>
                            <li style="height:30px;">
                                <a href="auth_adv.html"><i class="glyphicon glyphicon-check">i> 广告审核a>
                            li>
                            <li style="height:30px;">
                                <a href="auth_project.html"><i class="glyphicon glyphicon-check">i> 项目审核a>
                            li>
                        ul>
                    li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-th-large">i> 业务管理 <span class="badge" style="float:right">7span>span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="cert.html"><i class="glyphicon glyphicon-picture">i> 资质维护a>
                            li>
                            <li style="height:30px;">
                                <a href="type.html"><i class="glyphicon glyphicon-equalizer">i> 分类管理a>
                            li>
                            <li style="height:30px;">
                                <a href="process.html"><i class="glyphicon glyphicon-random">i> 流程管理a>
                            li>
                            <li style="height:30px;">
                                <a href="advertisement.html"><i class="glyphicon glyphicon-hdd">i> 广告管理a>
                            li>
                            <li style="height:30px;">
                                <a href="message.html"><i class="glyphicon glyphicon-comment">i> 消息模板a>
                            li>
                            <li style="height:30px;">
                                <a href="project_type.html"><i class="glyphicon glyphicon-list">i> 项目分类a>
                            li>
                            <li style="height:30px;">
                                <a href="tag.html"><i class="glyphicon glyphicon-tags">i> 项目标签a>
                            li>
                        ul>
                    li>
                    <li class="list-group-item tree-closed" >
                        <a href="param.html"><i class="glyphicon glyphicon-list-alt">i> 参数管理a>
                    li>
                ul>
            div>
        div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">控制面板h1>

            <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
            div>
        div>
    div>
div>

body>
html>

2.3.10 退出功能

• admin-main.jsp

 <li><a href="admin/do/logout.html"><i class="glyphicon glyphicon-off">i> 退出系统a>li>

• AdminHandler.java

    /**
     * 退出登录
     *
     * @param session
     * @return
     */
    @RequestMapping("/admin/do/logout.html")
    public String doLogout(HttpSession session) {
        // 强制 Session 失效
        session.invalidate();
        return "redirect:/admin/to/login/page.html";
    }

2.3.11 后台主页面 - 抽取公共页面

• include-head.jsp

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js">script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js">script>
    <script type="text/javascript" src="script/docs.min.js">script>
    <script type="text/javascript" src="layer/layer.js">script>
    <script type="text/javascript">
        $(function () {
            $(".list-group-item").click(function(){
                if ( $(this).find("ul") ) {
                    $(this).toggleClass("tree-closed");
                    if ( $(this).hasClass("tree-closed") ) {
                        $("ul", this).hide("fast");
                    } else {
                        $("ul", this).show("fast");
                    }
                }
            });
        });
    script>
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        .tree-closed {
            height : 40px;
        }
        .tree-expanded {
            height : auto;
        }
    style>
head>

• include-nav.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 控制面板a>div>
        div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user">i> ${ sessionScope.loginAdmin.userName }
                            <span class="caret">span>
                        button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog">i> 个人设置a>li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment">i> 消息a>li>
                            <li class="divider">li>
                            <li><a href="admin/do/logout.html"><i class="glyphicon glyphicon-off">i> 退出系统a>li>
                        ul>
                    div>
                li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign">span> 帮助
                    button>
                li>
            ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="查询">
            form>
        div>
    div>
nav>

• include-sidebar.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="col-sm-3 col-md-2 sidebar">
    <div class="tree">
        <ul style="padding-left:0px;" class="list-group">
            <li class="list-group-item tree-closed">
                <a href="main.html"><i class="glyphicon glyphicon-dashboard">i> 控制面板a>
            li>
            <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon glyphicon-tasks">i> 权限管理 <span class="badge"
                                                                                             style="float:right">3span>span>
                <ul style="margin-top:10px;display:none;">
                    <li style="height:30px;">
                        <a href="user.html"><i class="glyphicon glyphicon-user">i> 用户维护a>
                    li>
                    <li style="height:30px;">
                        <a href="role.html"><i class="glyphicon glyphicon-king">i> 角色维护a>
                    li>
                    <li style="height:30px;">
                        <a href="permission.html"><i class="glyphicon glyphicon-lock">i> 许可维护a>
                    li>
                ul>
            li>
            <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-ok">i> 业务审核 <span class="badge"
                                                                                style="float:right">3span>span>
                <ul style="margin-top:10px;display:none;">
                    <li style="height:30px;">
                        <a href="auth_cert.html"><i class="glyphicon glyphicon-check">i> 实名认证审核a>
                    li>
                    <li style="height:30px;">
                        <a href="auth_adv.html"><i class="glyphicon glyphicon-check">i> 广告审核a>
                    li>
                    <li style="height:30px;">
                        <a href="auth_project.html"><i class="glyphicon glyphicon-check">i> 项目审核a>
                    li>
                ul>
            li>
            <li class="list-group-item tree-closed">
                <span><i class="glyphicon glyphicon-th-large">i> 业务管理 <span class="badge" style="float:right">7span>span>
                <ul style="margin-top:10px;display:none;">
                    <li style="height:30px;">
                        <a href="cert.html"><i class="glyphicon glyphicon-picture">i> 资质维护a>
                    li>
                    <li style="height:30px;">
                        <a href="type.html"><i class="glyphicon glyphicon-equalizer">i> 分类管理a>
                    li>
                    <li style="height:30px;">
                        <a href="process.html"><i class="glyphicon glyphicon-random">i> 流程管理a>
                    li>
                    <li style="height:30px;">
                        <a href="advertisement.html"><i class="glyphicon glyphicon-hdd">i> 广告管理a>
                    li>
                    <li style="height:30px;">
                        <a href="message.html"><i class="glyphicon glyphicon-comment">i> 消息模板a>
                    li>
                    <li style="height:30px;">
                        <a href="project_type.html"><i class="glyphicon glyphicon-list">i> 项目分类a>
                    li>
                    <li style="height:30px;">
                        <a href="tag.html"><i class="glyphicon glyphicon-tags">i> 项目标签a>
                    li>
                ul>
            li>
            <li class="list-group-item tree-closed">
                <a href="param.html"><i class="glyphicon glyphicon-list-alt">i> 参数管理a>
            li>
        ul>
    div>
div>

• 最终主页面 - admin-main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
DOCTYPE html>
<html lang="zn-CN">
<%@include file="/WEB-INF/include-head.jsp" %>

<body>

<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">控制面板h1>
            <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/sky" class="img-responsive"
                         alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/vine" class="img-responsive"
                         alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/sky" class="img-responsive"
                         alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img data-src="holder.js/200x200/auto/vine" class="img-responsive"
                         alt="Generic placeholder thumbnail">
                    <h4>Labelh4>
                    <span class="text-muted">Something elsespan>
                div>
            div>
        div>
    div>
div>

body>
html>

2.4 Push