java學習筆記——衆籌項目練習——後臺manager程序的用戶模塊-管理員註冊功能、form表單校驗插件jquery-validation-1.13.1的使用、數據庫表保存唯一賬號設置

                                用戶模塊-管理員註冊功能

 

不管是前臺程序，還是後臺程序都是可以獨立運行web服務程序，只是面向的用戶不同而已，前臺的用戶更加廣泛（所有需要此功能的用戶）。後臺的用戶則是管理員，用於對整個程序平臺的管理。不管是前臺還是後臺都需要數據庫表存儲各種信息，都需要界面來與用戶進行互動，所以前邊我們介紹了數據建模工具（PowerDesigner）和前端框架bootstrap的簡單使用。

bootstrap用於界面樣式的繪製，很大的方便了我們的開發工作，可是bootstrap所繪製的原型界面我們是不能拿來直接用的，需要經過修改，比如編碼修改爲utf-8，html頁面改爲jsp。

好，現在我們先把整個原型界面中的index界面導入我們的項目中，在倒入之前需要先導入原型界面樣式依賴庫，至於bootstrap庫應該屬於插件，所以應該新建一個插件文件夾，放在插件文件夾中，之後再有插件也放在其中。

 

再將index界面的編碼轉爲utf-8和更改後綴爲jsp。轉碼時應該先將界面代碼中的GB18030替換爲UTF-8後，再轉碼；

轉碼後，將index.html拷入項目中修改後綴爲jsp，修改後綴的步驟是，先修改html的頭信息爲jsp的頭信息，再修改後綴爲jsp，這樣就可以了。

 

好了，index界面添加好了，我們打開看看能不能正常顯示。

我們發現頁面可以顯示，並且沒有亂碼，我們修改的沒有問題，可是佈局是亂的，這是因爲我們頁面中依賴bootstrap的路徑出了問題，還記得剛纔我們把bootstrap的庫放到plugin下了嘛，所以依賴的路徑需要修改。這裏我們的項目中使用的所有路都是絕對路徑，這裏推薦使用 ServletContextListener監聽器，監聽服務器的啓動和停止，在項目啓動的時候將我們的項目路徑放在application域中，這樣我們就可以隨時取得項目路徑了。

好，我們馬上來自定義一個監聽器來實現於ServletContextListener，並且添加項目路徑到application域中，在web.xml中加載這個自定義的監聽器。

 

好了，application域中已經有了我們的項目路徑，現在我們去頁面中修改所有的依賴資源路徑,將頁面中所有帶有herf=和src=的依賴資源的路徑統統修改。

再顯示看看效果。

好，這下完美了，萬事開頭難，index頁面已經搞定了，現在此頁面還不能跳轉到其他頁面，下面我們按照這個方法來添加用戶模塊的頁面，並讓index可以正確跳轉到用戶模塊的頁面。

添加  登錄、註冊 頁面，修改編碼爲utf-8，修改後綴爲jsp，修改頁面中的依賴路徑，並且將頁面中跳轉到.html的鏈接全部修改爲.jsp。再來顯示，並點擊登錄和註冊試試。。

 

好了，我們把index頁面到用戶登錄和註冊的頁面打通了，下面我們要把管理員註冊的代碼邏輯打通，讓註冊後可以跳轉到管理員可見的main頁面（控制面板）。

同樣的爲main.html修改編碼、修改後綴，由於這個頁面是不可以直接訪問的，必須要經過登錄和註冊，所以我們要把main頁面保護起來，如何保護起來呢，webapp下的頁面都是可以直接訪問的，而webapp下的WEB-INF文件夾下的頁面都是受保護的，外界不可以直接訪問，所以我們在WEB-INF下創建了一個jsps文件夾，用來保存那些我們不希望被外界直接訪問的頁面，併爲了防止界面過多影響查看，我們爲不同的模塊創建不同的文件夾，比如（main頁面屬於manager系統，他是整個manager系統的主界面，所以main就放在manager文件夾下，manager下又有其他小模塊，權限管理、業務審覈、業務管理、參數管理等，同時在manager下分別創建相應的模塊文件夾用於區分功能頁面）。

然後我們來創建業務代碼，因爲管理員登錄後的控制面板main頁面有幾個功能，所以爲了簡潔、清晰，我們也按照功能進行分包，分別是權限管理、業務審覈、業務管理、參數管理；並在權限管理包中創建用戶維護類（UserController.java）

接下來修改註冊頁面reg.jsp中的請求連接，應該向 permission/user/reg地址發送post請求。

運行一下看看。。

ok   完美！！！！！ 管理員註冊界面打通。。。。

 

這裏我要特別提示一下：

springMVC的視圖解析器InternalResourceViewResolver配置的時候一定要注意，一定一定一定要這樣配置：

千萬千萬不要手欠的添加“.”或者把“/”去掉，不然的話就會導致返回的路徑信息很奇怪《根路徑+類上接收請求的路徑+方法返回的路徑》最終404錯誤。。。

好了，這個bug只是個小插曲，但是也應該要引起重視，這裏記錄一下，免得日後再犯同樣的錯誤。接下來我們繼續，將註冊頁面傳過來的表單數據封裝成TUser對象用於我們想數據庫存儲，再將封裝好的TUser對象打印出來，看看是否封裝正確。

好了，頁面的數據已經可以傳輸到Controller中了，剩下的只是對數據的處理，並保存到數據庫中就可以了，不過我們也不是什麼數據都進行保存的，我們需要對頁面的數據進行一些必要的判斷，比如那些信息是必須填寫的，長度不得少於xx，email格式是否正確等，這些信息的校驗應該在頁面將數據傳輸到controller之前就做好，否則都拿到服務器做的話，用戶體驗會很差。

 

                                           form表單校驗插件的使用

這裏我們推薦一個jQuery的校驗插件jquery-validation-1.13.1，這個校驗插件使用起來很簡單，添加到工程後，在頁面導入jquery-validation-1.13.1/dist/jquery.validate.min.js就可以使用了，其他多餘的庫都可以刪掉，附上jquery-validation-1.13.1的下載地址：https://download.csdn.net/download/qq_25106373/11057391。先去的需要校驗的form表單，調用validate方法，並傳入需要的參數，rules參數是需要校驗的數據和校驗規則，messages參數是數據根據校驗規則顯示的校驗提示信息。具體使用方法請看下圖。。

 

運行後頁面已經有校驗信息了，但是效果不好，我們發現頁面顯示校驗信息後就亂了，圖標是歪的，所以還需要微調一下。我們打開頁面的源碼查看一下。

我們發現頁面填充的校驗信息 將用戶名的圖標給擠下去了，所以要從這裏入手，我們應該自定義效果。查看校驗插件說明文檔（demo文件夾中）查找自定義效果。

現在from表單中的每個div中添加一個空的<span>標籤，專門用來顯示我們的錯誤信息。

在校驗器設置策略中自定義錯誤信息的顯示策略，在list中取得每一項有校驗錯誤的表單項，獲取其錯誤信息並顯示到該項的errorinfo中，並且改變狀態，還要清理狀態。

好了  ，這下OK了。。

 

接下來我們要對頁面傳輸過來的數據進行一些處理，並保存到數據庫中，完成管理員註冊這個邏輯功能。

1，要對用戶的密碼進行加密存儲，不應該明碼存儲，加密算法這裏使用md5，也可以自定義加密算法或鹽值加密都可以。

2，頁面傳過來的信息有限，而我們存儲到數據庫時卻不應該讓你其他數據都爲空值，所以需要設定初始值。

3，操作數據庫的時候記得try。。catch一下，因爲我們數據庫表中的登錄賬號應該是不可重複的，如果已存在，數據庫會拋出異常，我們要利用這個異常提示用戶已存在錯誤信息。

4，用戶不存在，保存數據成功，這個時候應該將整個的用戶信息保存到session域中供後續頁面使用，跳轉到控制面板main.jsp頁面，這個時候的用戶信息一般是不包括主鍵id的，如果想要信息中自動保護主鍵信息，需要修改tUserMapper.xml中的自動獲取主鍵信息<insert id="insertSelective" useGeneratedKeys="true" keyProperty="id">。

5，用戶已存在，保存失敗，這個時候應該回顯用戶填寫的數據，並轉發回註冊reg.jsp頁面，再在頁面顯示用戶信息。

UserController.java

package com.gome.scw.manager.controller.permission;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.gome.scw.manager.bean.tUser;
import com.gome.scw.manager.service.UserService;


@Controller
@RequestMapping(value="/permission/user")
public class UserController {
	private String managerString = "manager/";
	
	@Autowired
	UserService userService;
	
	@RequestMapping(value="/reg")
	public String reg(tUser tuser, Model model, HttpSession session){
		//管理員用戶註冊成功後來到控制面板main.jsp
		//1,用戶註冊
		boolean flag = userService.register(tuser);
		if(flag==true){
			//將用戶的全部信息存儲到session中，用於後序頁面的使用(爲了讓tuser中帶有主鍵信息，
			//所以需要修改tUserMapper.xml中的自動獲取主鍵信息<insert id="insertSelective" 
			//useGeneratedKeys="true" keyProperty="id">)
			session.setAttribute("login_user", tuser);
			//註冊成功，跳轉到控制面板
			return managerString + "main";
		}
		else {
			//註冊失敗，回顯信息
			model.addAttribute("regError", "用戶名已經被使用");
			//因爲tuser是從隱含模型中拿的，只要確定是pojo，系統會自動的存入隱含模型中，不需要我們手動存儲
			//使用的key名就是類名首字母小寫，頁面取值${tUser.loginacct}
			return "forward:/reg.jsp";
		}

	}
}

 

UserServiceImpl.java

package com.gome.scw.manager.service.impl;

import java.math.BigInteger;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.apache.ibatis.javassist.expr.NewArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.gome.scw.manager.bean.tUser;
import com.gome.scw.manager.dao.tUserMapper;
import com.gome.scw.manager.service.UserService;

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	tUserMapper tUserMapper;

	@Override
	public tUser getUserById(Integer id) {
		// TODO Auto-generated method stub
		
		return tUserMapper.selectByPrimaryKey(id);
	}

	@Override
	public boolean register(tUser tuser) {
		// TODO Auto-generated method stub
		//1,那到用戶信息，先加密，用戶密碼在數據庫中採用加密存儲
		tuser.setUserpswd(md5(tuser.getUserpswd()));
		//2,數據庫很多屬性字段默認是非空，所以我們要將用戶的其他信息設置默認值
		tuser.setUsername(tuser.getLoginacct());	
		tuser.setCreatetime(new SimpleDateFormat("yyyy-MM-dd").format(new Date()));
		//3,去數據庫保存用戶信息
		int i = 0;
		try {
			i = tUserMapper.insertSelective(tuser);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			//e.printStackTrace();
			return false;
		}
		return i==1?true:false;
	}
	
	//寫一個md5加密的方法 
	public static String md5(String plainText) {
		//定義一個字節數組 
		byte[] secretBytes = null; 
		try { 
			// 生成一個MD5加密計算摘要  
			MessageDigest md = MessageDigest.getInstance("MD5"); 
			//對字符串進行加密 
			md.update(plainText.getBytes()); 
			//獲得加密後的數據 
			secretBytes = md.digest(); 
			} 
		catch (NoSuchAlgorithmException e) { 
			throw new RuntimeException("沒有md5這個算法！"); 
			} 
		//將加密後的數據轉換爲16進制數字 
		String md5code = new BigInteger(1, secretBytes).toString(16);
		// 16進制數字 // 如果生成數字未滿32位，需要前面補0 
		for (int i = 0; i < 32 - md5code.length(); i++) { 
			md5code = "0" + md5code; 
			} 
		return md5code; 
		}
}

 

                                        數據庫表保存唯一賬號設置

 

修改用戶表t_user中登錄賬號唯一，不可重複

註冊成功後跳轉到控制面板，並從session域中取出用戶信息，將用戶名顯示出來。用戶信息中默認是沒有主鍵id的，想要拿到用戶的全部信息還需要設置自動獲取主鍵id的值，需要修改tUserMapper.xml中相應的插入方法。

 

註冊失敗，回顯數據，跳轉到註冊頁面，並從隱藏域中拿到用戶信息顯示。。

成功註冊：

 

註冊失敗：