day02【后台】管理员登录

红太狼 2022-12-08 14:15 389阅读 0赞

# day02【后台】管理员登录 #

## 1、创建常量类 ##

*  创建常量类，用于管理整个系统中所用到的常量

![image-20200610183202132][]

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_EXCEPTION = "exception";
    	public static final String ATTR_NAME_LOGIN_ADMIN = "loginAdmin";
    	public static final String ATTR_NAME_PAGE_INFO = "pageInfo";
    
    }

## 2、管理员登录页面 ##

### 2.1、创建管理员登录页面 ###

#### 2.1.1、引入前端静态资源 ####

![image-20200610200650075][]

#### 2.1.2、添加登录页面 ####

*  在`WEB-INF`文件夹下添加`admin-login.jsp`页面，注意如下几点：
    
     *  修改字符集
     *  添加`base`标签
     *  修改`form`表单的一些属性值
 *  页面代码如下

### 2.2、跳转至管理员登录页面 ###

*  在`SpringMVC`配置文件中配置`view-controller`，用于管理员登录页面跳转

![image-20200610215332782][]

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

*  测试：能正常访问

![image-20200610215513503][]

## 3、layer弹层组件 ##

### 3.1、引入layer组件 ###

*  引入`layer`组件的资源文件，将其放在`webapp`目录下

![image-20200610220909942][]

*  添加对`layer.js`的引用，注意：放在`jQuery`的引用之后

![image-20200610221039687][]

### 3.2、测试 ###

*  添加一个`button`按钮

*  按钮的单击时间处理过程

$("#btn5").click(function() {
        
    	layer.msg("我出来了~");
    });

*  弹层效果

![image-20200610221420095][]

## 4、好看的错误页面 ##

*  修改`WEB-INF`下`system-error.jsp`页面中的代码

*  页面效果

![image-20200610222626007][]

## 5、管理员登录 ##

### 5.1、管理员登录思路 ###

![image-20200919182409547][]

### 5.2、MD5加密 ###

*  在`util`工程下的`CrowdUtil`工具类中添加`MD5`加密方法

![image-20200610225135654][]

/**
     * 尚筹网项目通用工具方法类
     * 
     * @author 吴彦祖
     *
     */
    public class CrowdUtil {
        
    
    	/**
    	 * 对明文字符串进行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);
    		}
    		try {
        
    			// 3.获取MessageDigest对象
    			String algorithm = "md5";
    			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).toUpperCase();
    			return encoded;
    		} catch (NoSuchAlgorithmException e) {
        
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    	/**
    	 * 判断当前请求是否为Ajax请求
    	 * 
    	 * @param request 请求对象
    	 * @return true：当前请求是Ajax请求 false：当前请求不是Ajax请求
    	 */
    	public static boolean judgeRequestType(HttpServletRequest request) {
        
    
    		// 1.获取请求消息头
    		String acceptHeader = request.getHeader("Accept");
    		String xRequestHeader = request.getHeader("X-Requested-With");
    
    		// 2.判断
    		return (acceptHeader != null && acceptHeader.contains("application/json"))
    				|| (xRequestHeader != null && xRequestHeader.equals("XMLHttpRequest"));
    	}
    
    }

*  测试：在`webui`工程下添加`StringTest`类，进行单元测试

![image-20200610225229281][]

public class StringTest {
        
    	
    	@Test
    	public void testMd5() {
        
    		String source = "123123";
    		String encoded = CrowdUtil.md5(source);
    		System.out.println(encoded);
    	}
    
    }

### 5.3、创建自定义异常 ###

*  在`util`工程下创建`LoginFailedException`类，用于处理用户登录异常信息

![image-20200610225932184][]

/**
     * 登录失败后抛出的异常
     * 
     * @author Lenovo
     *
     */
    public class LoginFailedException extends RuntimeException {
        
    
    	private static final long serialVersionUID = 1L;
    
    	public LoginFailedException() {
        
    		super();
    	}
    
    	public LoginFailedException(String message, Throwable cause, boolean enableSuppression,
    			boolean writableStackTrace) {
        
    		super(message, cause, enableSuppression, writableStackTrace);
    	}
    
    	public LoginFailedException(String message, Throwable cause) {
        
    		super(message, cause);
    	}
    
    	public LoginFailedException(String message) {
        
    		super(message);
    	}
    
    	public LoginFailedException(Throwable cause) {
        
    		super(cause);
    	}
    
    }

*  在`component`工程下的`CrowdExceptionResolver`异常处理类中，增加登录失败异常的处理

![image-20200610230202144][]

@ExceptionHandler(value = LoginFailedException.class)
    public ModelAndView resolveLoginFailedException(
    			LoginFailedException exception,
    			HttpServletRequest request,
    			HttpServletResponse response
    		) throws IOException {
        	
    	String viewName = "admin-login";	
    	return commonResolve(viewName, exception, request, response);
    }

*  重新定位至登录页面时，需显示异常信息

![image-20200610230358900][]

<p>${requestScope.exception.message }</p>

### 5.4、AdminHandler ###

*  在`component`工程下创建`AdminHandler`类，用于处理管理员的相关请求

![image-20200610231444632][]

@Controller
    public class AdminHandler {
        
    
    	@Autowired
    	private 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";
    	}
    
    }

*  在`WEB-INF`下创建临时的登陆成功跳转页面：`admin-main.jsp`

![image-20200611102905463][]

<%@ 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>
    	<h1>临时主页</h1>
    	${sessionScope.loginAdmin.userName }
    </body>
    </html>

### 5.5、AdminService ###

*  在`component`工程中创建与`Service`相关的接口和实现类

![image-20200610231332966][]

*  在`component`工程中的`AdminServiceImpl`类中，添加`getAdminByLoginAcct`方法，用于处理用户的登录请求

@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对象
    		// ①创建AdminExample对象
    		AdminExample adminExample = new AdminExample();
    		// ②创建Criteria对象
    		Criteria criteria = adminExample.createCriteria();
    		// ③在Criteria对象中封装查询条件
    		criteria.andLoginAcctEqualTo(loginAcct);
    		// ④调用AdminMapper的方法执行查询
    		List<Admin> list = adminMapper.selectByExample(adminExample);
    
    		// 2.判断Admin对象是否为null
    		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);
    		}
    
    		// 3.如果Admin对象为null则抛出异常
    		Admin admin = list.get(0);
    		if (admin == null) {
        
    			throw new LoginFailedException(CrowdConstant.MESSAGE_LOGIN_FAILED);
    		}
    
    		// 4.如果Admin对象不为null则将数据库密码从Admin对象中取出
    		String userPswdDB = admin.getUserPswd();
    
    		// 5.将表单提交的明文密码进行加密
    		String userPswdForm = CrowdUtil.md5(userPswd);
    
    		// 6.对密码进行比较
    		if (!Objects.equals(userPswdDB, userPswdForm)) {
        
    			// 7.如果比较结果是不一致则抛出异常
    			throw new LoginFailedException(CrowdConstant.MESSAGE_LOGIN_FAILED);
    		}
    
    		// 8.如果一致则返回Admin对象
    		return admin;
    	}
    
    }

### 5.6、测试登录 ###

*  输入正确的用户名和密码后，跳转到临时主页~

![image-20200611102843560][]

### 5.7、管理员登录的改进 ###

#### 5.7.1、重写登陆成功页面 ####

*  重写`WEB-INF`下的登陆成功跳转页面：`admin-main.jsp`
    
     *  添加`base`标签
    
        <base
        	href="http://${
              pageContext.request.serverName }:${
              pageContext.request.serverPort }${
              pageContext.request.contextPath }/" />
    
     *  从`session`域中取出用户姓名，并显示
    
        <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>
 *  页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html lang="zh-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">
    <style>
    .tree li {
         
    	list-style-type: none;
    	cursor: pointer;
    }
    
    .tree-closed {
         
    	height: 40px;
    }
    
    .tree-expanded {
         
    	height: auto;
    }
    </style>
    <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>
    </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">3</span></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">3</span></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">7</span></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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

#### 5.7.2、重定向 ####

*  解决表单重复提交：使用重定向，而不是转发

@Controller
    public class AdminHandler {
        
    
    	@Autowired
    	private 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 "redirect:/admin/to/main/page.html";
    	}
    
    }

*  给目标地址配置`view-controller`

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

### 5.8、退出登录 ###

*  修改`admin-main.jsp`页面中退出登录的超链接

![image-20200611110628669][]

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

*  在`AdminHandler`中添加如下`doLogout`方法

![image-20200611110843206][]

@Controller
    public class AdminHandler {
        
    
    	@Autowired
    	private AdminService adminService;
    
    	@RequestMapping("/admin/do/logout.html")
    	public String doLogout(HttpSession session) {
        
    		// 强制Session失效
    		session.invalidate();
    		//重定向至页面
    		return "redirect:/admin/to/login/page.html";
    	}
    
    }

*  测试通过

![image-20200611111006121][]

## 6、抽取后台主页面 ##

### 6.1、抽取head部分 ###

*  在`WEB-INF`下新建`include-head.jsp`，用于抽取页面公共的`head`部分

![image-20200611111953355][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <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">
    <style>
    .tree li {
        
    	list-style-type: none;
    	cursor: pointer;
    }
    
    .tree-closed {
        
    	height: 40px;
    }
    
    .tree-expanded {
        
    	height: auto;
    }
    </style>
    <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>
    <title>尚筹网</title>
    </head>

### 6.2、抽取上方导航栏 ###

*  在`WEB-INF`下新建`include-nav.jsp`，用于抽取页面公共的上方导航栏

![image-20200611112220337][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <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>

### 6.3、抽取侧边栏 ###

*  在`WEB-INF`下新建`include-sidebar.jsp`，用于抽取页面公共的侧边栏

![image-20200611112409088][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <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">3</span></span>
    				<ul style="margin-top: 10px; display: none;">
    					<li style="height: 30px;"><a href="admin/get/page.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">3</span></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">7</span></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>

### 6.4、后台管理主页面 ###

*  抽取后，后台管理主页面的代码如下

![image-20200611112906551][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html lang="zh-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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</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>Label</h4>
    						<span class="text-muted">Something else</span>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

### 6.5、制作JSP模板 ###

*  JSP模板代码

*  创建`JSP`模板

![image-20200611112554731][]

*  使用模板

![image-20200611112943506][]

## 7、用户权限验证 ##

### 7.1、权限验证思路 ###

![image-20200919183614426][]

### 7.2、创建拦截器 ###

*  在`util`工程下创建`AccessForbiddenException`异常类：用户权限不足的异常

![image-20200611114410751][]

/**
     * 表示用户没有登录就访问受保护资源时抛出的异常
     * 
     * @author Lenovo
     *
     */
    public class AccessForbiddenException extends RuntimeException {
        
    
    	private static final long serialVersionUID = 1L;
    
    	public AccessForbiddenException() {
        
    		super();
    	}
    
    	public AccessForbiddenException(String message, Throwable cause, boolean enableSuppression,
    			boolean writableStackTrace) {
        
    		super(message, cause, enableSuppression, writableStackTrace);
    	}
    
    	public AccessForbiddenException(String message, Throwable cause) {
        
    		super(message, cause);
    	}
    
    	public AccessForbiddenException(String message) {
        
    		super(message);
    	}
    
    	public AccessForbiddenException(Throwable cause) {
        
    		super(cause);
    	}
    
    }

*  在`component`工程下创建`LoginInterceptor`拦截器，用于拦截用户请求，实现权限验证

![image-20200611114728655][]

public class LoginInterceptor extends HandlerInterceptorAdapter {
        
    
    	@Override
    	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
    			throws Exception {
        
    		// 1.通过request对象获取Session对象
    		HttpSession session = request.getSession();
    		
    		// 2.尝试从Session域中获取Admin对象
    		Admin admin = (Admin) session.getAttribute(CrowdConstant.ATTR_NAME_LOGIN_ADMIN);
    
    		// 3.判断admin对象是否为空
    		if (admin == null) {
        
    			// 4.抛出异常
    			throw new AccessForbiddenException(CrowdConstant.MESSAGE_ACCESS_FORBIDEN);
    		}
    
    		// 5.如果Admin对象不为null，则返回true放行
    		return true;
    	}
    
    }

### 7.3、注册拦截器类 ###

*  在`SpringMVC`的配置文件中注册拦截器，即注册`LoginInterceptor bean`

![image-20200611141150823][]

<mvc:interceptors>
      <mvc:interceptor>
        
        
        
        <mvc:mapping path="/**" />
    
        
        <mvc:exclude-mapping path="/admin/to/login/page.html" />
        <mvc:exclude-mapping path="/admin/do/login.html" />
        <mvc:exclude-mapping path="/admin/do/logout.html" />
    
        
        <bean class="com.atguigu.crowd.mvc.interceptor.LoginInterceptor" />
      </mvc:interceptor>
    </mvc:interceptors>

### 7.4、基于XML的异常映射 ###

*  在`SpringMVC`配置文件中，添加对`AccessForbiddenException`异常的映射；当发生此类异常，重定向至登录页面

![image-20200614221432536][]

<bean id="simpleMappingExceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
        
        <property name="exceptionMappings">
            <props>
                
                
                <prop key="java.lang.Exception">system-error</prop>
                <prop key="com.atguigu.crowd.exception.AccessForbiddenException">admin-login</prop>
            </props>
        </property>
    </bean>

*  测试成功~

![image-20200614222136891][]

[image-20200610183202132]: /images/20221123/28b434d227744055bac76661d5b7b2cb.png
[image-20200610200650075]: /images/20221123/6f1c153d7ebe4f1b85fd8cd2b3c42a4c.png
[image-20200610215332782]: /images/20221123/e8f4dce53445427fb89cba831b1bff3d.png
[image-20200610215513503]: /images/20221123/6fedc17760ff4247becfc2eecb60a42e.png
[image-20200610220909942]: /images/20221123/7aaa34f213954f04b8d393155cf0d56c.png
[image-20200610221039687]: /images/20221123/c87c06663dd94f918ed3c9441c0995f6.png
[image-20200610221420095]: /images/20221123/6d06db8ce98b48b9a7a93e0b170308d3.png
[image-20200610222626007]: /images/20221123/24cedde95bcf4a0683e47694bde970a6.png
[image-20200919182409547]: /images/20221123/414953f9f37b4340b7c992e18aad1d56.png
[image-20200610225135654]: /images/20221123/65e54fa44ced459bb85d72b2cd7a5ae4.png
[image-20200610225229281]: /images/20221123/857f371fb5cd4500b55d25c6ef402446.png
[image-20200610225932184]: /images/20221123/ae2caf834e9f4507a27a8a1966650ca8.png
[image-20200610230202144]: /images/20221123/2c390c67b8c7403ab25e9ae54c6bab13.png
[image-20200610230358900]: /images/20221123/53f4c3e481ca43aaafb33656e893dca5.png
[image-20200610231444632]: /images/20221123/7b1781a7de6a46ed98a74de8fec2b9af.png
[image-20200611102905463]: /images/20221123/a8c62ffdfac84269a22b8fad58133e25.png
[image-20200610231332966]: /images/20221123/fa8dbf0b6f6146b382bea0e6c5fcb7c4.png
[image-20200611102843560]: /images/20221123/3a003c0abd154240a76a5a3d7ec29967.png
[image-20200611110628669]: /images/20221123/0b29e81dc3744bf8bcadec15501cbed1.png
[image-20200611110843206]: /images/20221123/6e7bee4036944c6ab83e312b95ac63b6.png
[image-20200611111006121]: /images/20221123/50a26765bf9f4264a3cc60cab9f0badc.png
[image-20200611111953355]: /images/20221123/5f0f359797324e9d9cce71e89de45866.png
[image-20200611112220337]: /images/20221123/fcfcdeb90b9740c697eaaf7e5f091d21.png
[image-20200611112409088]: /images/20221123/7f4fa067aff44a65b6a5295880eded4e.png
[image-20200611112906551]: /images/20221123/f4bcc404a0a5401f960c9fd9890b29c2.png
[image-20200611112554731]: /images/20221123/8611111bb58b45daa53a337d84cd6925.png
[image-20200611112943506]: /images/20221123/ca0105acd11a464e887b6aa277fd4bbf.png
[image-20200919183614426]: /images/20221123/22f4407b7b81471fadfe46c58782a584.png
[image-20200611114410751]: /images/20221123/6aa66793ca344297976f343134a1a8e5.png
[image-20200611114728655]: /images/20221123/99ce7600046344bb8446dc73e6a20cc8.png
[image-20200611141150823]: /images/20221123/0ea2c512d99e49dc9a71dc9b762bf12f.png
[image-20200614221432536]: /images/20221123/b87fcc6c04c0426eb8f21080d0b23814.png
[image-20200614222136891]: /images/20221123/5cebffddfbc2496e9c9c45f98bfe1dec.png