系統UI介面設計

為了實現許可權控制並提高安全性，我將所有的jsp頁面均放在WEB-INF的資料夾下，利用一個攔截器判斷使用者是否登入，未登入使用者不具備訪問的資格。攔截器程式碼如下：

package org.fkit.hrm.interceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.fkit.hrm.domain.User;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
/**
 * 判斷使用者許可權的攔截器
 * @author lenovo
 *
 */
public class AuthorizedInterceptor implements HandlerInterceptor {
	//定義無需攔截的url
    private static final String [] IGNORE_URI={"/loginForm","/login","/404.html",".js"};
	@Override
	public void afterCompletion(HttpServletRequest arg0,
			HttpServletResponse arg1, Object arg2, Exception arg3)
			throws Exception {
		/**
		 * 該方法用於用於檢視渲染之後進行，即在控制器將檢視返回給請求之後，
		 * 該方法一般用於對資源進行清理
		 */
	}

	@Override
	public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1,
			Object arg2, ModelAndView arg3) throws Exception {
		/**
		 * 該方法用於preHandle方法執行之後並且返回為true的情況下執行，
		 * 也就是在控制器執行完具體操作返回檢視之前
		 */
	}

	@Override
	public boolean preHandle(HttpServletRequest arg0, HttpServletResponse arg1,
			Object arg2) throws Exception {
		/**
		 * 該方法用於在控制器執行之前執行，進行一些初始化操作，比如驗證使用者許可權之類的
		 */
		//預設使用者沒有登入
		boolean flag=false;
		//獲取使用者的訪問路徑
	    String path=arg0.getServletPath();
	    for(String str:IGNORE_URI){
	    	if(path.contains(str)){
	    		flag=true;
	    		break;
	    	}
	    }
	    if(!flag){
	    	//先判斷session是否有登入資訊
	    	User user=(User)arg0.getSession().getAttribute("user");
	    	//判斷使用者是否已經登入
	    	if(user==null){
	    		//如果使用者為空，跳轉到登入介面
	    		arg0.setAttribute("message", "請先登入在訪問網站");
	    	    arg0.getRequestDispatcher("loginForm").forward(arg0, arg1);
	    	    return flag;
	    	}
	    	else{
	    		flag=true;
	    	}
	    }
		return flag;
	}

}

 

springmvc-config.xml配置檔案對攔截器的設定如下：

<!-- 定義spring mvc的攔截器 -->
       <mvc:interceptors>
         <mvc:interceptor>
           <!-- 攔截所有請求 -->
           <mvc:mapping path="/*"/>
           <!-- 設定攔截器不攔截js、css等檔案 -->
           <mvc:exclude-mapping path="/*.css"/>
           <mvc:exclude-mapping path="/*.js"/>
           <!-- 自定義判斷使用者許可權的攔截類 -->
           <bean class=" org.fkit.hrm.interceptor.AuthorizedInterceptor"/> 
         </mvc:interceptor>
       </mvc:interceptors>
 

先貼出系統的UI：

對於前端頁面的設計我沒有太多的經驗，因此借鑑了網上一般人事系統常用的介面構造，整體以一個框架劃分頁面各組成部分。框架部分的程式碼如下：

<frameset rows="66,*" cols="*" frameborder="yes" border="1" framespacing="1">
  <frame class="top"src="top" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset rows="*" cols="220,*" frameborder="yes" border="1" framespacing="1"">
    <frame src="MyHtml" name="mainFrame" id="mainFrame" scrolling="no"title="mainFrame" />
    <frame src="first" name="rightFrame" scrolling="no" noresize="noresize" id="rightFrame" title="rightFrame" />
  </frameset>
 

頁面的頂部（即topFrame）展示系統標誌，右邊的頭像可實現退出功能，日期影象可檢視日期與時間。

選單欄的框架我下載自網上，可進行上滑與下滑，我進行了細微的修改。

點選選單欄上的查詢與新增，在做右下角的框架部分（即rightFrame）彈出頁面如下：