登錄注冊
首先荸哟,我們webapp要實現(xiàn)用戶登錄,必須得能新建用戶蛔翅。所以先把注冊用戶放在前面敲茄。
預期功能:打開注冊頁面
填寫注冊信息
點擊注冊
顯示注冊后的提示信息
一個web注冊頁面
web頁面能進行基本的數(shù)據(jù)效驗
服務器能存儲用戶的注冊信息
注冊動作完成后,返回提示頁面山析。
一般在開發(fā)中堰燎,有了大概樣子的功能模塊,需要整理一下業(yè)務流程和程序執(zhí)行流程
大概的流程圖如下所示:
[圖片上傳失敗...(image-5d396d-1536456883937)]
上圖說明:
在web頁面完成注冊信息的填寫后笋轨,需要在web頁面做一些基本的數(shù)據(jù)效驗秆剪。
注冊信息通過基本的驗證后,直接提交到服務器爵政,tomact → servelt → spring 仅讽。后端程序一切都被spring接管了,所以钾挟,需要在spring
中完成這些功能洁灵。
spring
和外界通信,我們都是在Controller
中完成掺出。所以我們在Controller
中處理數(shù)據(jù)徽千。
當數(shù)據(jù)通過了Controller
中的校驗后,需要在Controller
中來查找數(shù)據(jù)庫是否存在同樣的用戶名汤锨,通用的數(shù)據(jù)操作流程如:Controller → Service → Dao双抽。
Service是為我們的程序提供服務的,盡量每個Service
對應一個Dao
闲礼,只需要提供單一的數(shù)據(jù)驅(qū)動牍汹,在外層進行業(yè)務組裝,這樣就能達到目的柬泽,同樣也能將程序解耦慎菲,以后的維護也就相對簡單了。
在實際項目中主要是使用JSON數(shù)據(jù)聂抢,所以要寫一個返回json數(shù)據(jù)的實體
在domain包中新建一個ResponseObj類
public class ResponseObj <T>{
public final static int OK = 1, FAILED = 0, EMPUTY = -1;
public final static String OK_STR = "成功", FAILED_STR = "失敗", EMPUTY_STR = "數(shù)據(jù)為空";
private int code; // 狀態(tài)碼,0成功;1空數(shù)據(jù);-1請求失敗
private String msg;
private Object data;
省略code钧嘶,msg,data的set琳疏,get方法
}
要寫登錄注冊的接口有决,我們先創(chuàng)建一個mvc目錄闸拿,目錄下controller包
在controller
包中創(chuàng)建一個MainController
的類。
@Controller
@RequestMapping("/mvc")
public class MainController {
/**
* 登陸頁面
* @return
*/
@GetMapping("/login")
public String login(){
return "login";
}
}
在實際項目中主要是使用JSON數(shù)據(jù)书幕,所以不使用ModelAndView
JSON數(shù)據(jù)解析我用的是阿里巴巴的Fastjson
具體使用:http://www.reibang.com/p/3c45f4be2c90
MainController
主要是用于跳轉(zhuǎn)到登錄頁面
我們在Controller目錄下創(chuàng)建一個UserController
類
@Controller
@RequestMapping("/userAction")
public class UserController {
@Autowired
private UserServiceImpl userService; //自動載入Service對象
private ResponseObj responseObj; //返回json數(shù)據(jù)的實體
/**
* @param req http請求
* @param user 發(fā)起請求后新荤,spring接收到請求,然后封裝的bean數(shù)據(jù)
* @throws Exception
*/
@PostMapping("/reg")
@ResponseBody
public Object reg(HttpServletRequest request, User user, HttpSession session) throws Exception {
JSONObject jsonObject=new JSONObject();
responseObj = new ResponseObj<User>();
if (null == user) {
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用戶信息不能為空台汇!");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
if (StringUtils.isEmpty(user.getLoginId()) || StringUtils.isEmpty(user.getPwd())) {
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用戶名或密碼不能為空苛骨!");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
if (null != userService.findUser(user)) {
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用戶已經(jīng)存在!");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
try {
userService.add(user);
} catch (Exception e) {
e.printStackTrace();
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("其他錯誤苟呐!");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
userService.updateLoginSession(request.getSession().getId(), user.getLoginId());
responseObj.setCode(ResponseObj.OK);
responseObj.setMsg("注冊成功");
user.setPwd(session.getId()); //單獨設置密碼為sessionId 誤導黑客痒芝,前端訪問服務器的時候必須有這個信息才能操作
user.setNextUrl(request.getContextPath() + "/mvc/home"); //單獨控制地址
responseObj.setData(user);
session.setAttribute("userInfo", user);
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
/**
* 登錄接口
* @param req
* @param user
* @return
*/
@PostMapping("/login")
@ResponseBody
public Object login(HttpServletRequest request, User user,HttpSession session) throws Exception{
JSONObject jsonObject=new JSONObject();
responseObj = new ResponseObj<User>();
if (PublicUtil.isJsonRequest(request)) { //確認是否json提交
user = new GsonUtils().jsonRequest2Bean(request.getInputStream(), User.class); //轉(zhuǎn)換為指定類型的對象
return user.toString();
}
if (null == user) {
responseObj.setCode(ResponseObj.EMPUTY);
responseObj.setMsg("登錄信息不能為空");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
if (StringUtils.isEmpty(user.getLoginId()) || StringUtils.isEmpty(user.getPwd())) {
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用戶名或密碼不能為空");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
//查找用戶
User user1 = userService.findUser(user);
if (null == user1) {
responseObj.setCode(ResponseObj.EMPUTY);
responseObj.setMsg("未找到該用戶");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
} else {
if (user.getPwd().equals(user1.getPwd())) {
user1.setPwd(session.getId());
user1.setNextUrl(request.getContextPath() + "/mvc/home");
responseObj.setCode(ResponseObj.OK); //登錄成功,狀態(tài)為1
responseObj.setMsg(ResponseObj.OK_STR);
responseObj.setData(user1); //登陸成功后返回用戶信息
userService.updateLoginSession(request.getSession().getId(), user.getLoginId());
session.setAttribute("userInfo", user1);
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
} else {
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用戶密碼錯誤");
jsonObject= (JSONObject) JSON.toJSON(responseObj);
return jsonObject;
}
}
}
}
相關的登錄注冊頁面我就放在github上吧牵素,還有相關的js css image資源
我在使用過程中發(fā)現(xiàn)js严衬,css資源不生效,
提示Absolute paths not recommended in JSP
也就是
在JSP中不推薦使用絕對路徑
解決方法
在相對路徑前加上${pageContext.request.contextPath}
這樣JSP取得資源的絕對路徑了
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
這里可以做前后端分離笆呆,用純粹的html+js來調(diào)用Api接口實現(xiàn)前后端分離请琳。下一個part寫
action="<%=request.getContextPath()%>/userAction/reg" method="post"
<%=request.getContextPath()%>
這是指向應用的根路徑
mothod
是說明我們請求的方式
如果使用form表單提交時:
form表單中,每個input的name我們需要和后端的接口那邊的字段對應赠幕。
當我們的字段對應后俄精,spring可以自動把請求的內(nèi)容轉(zhuǎn)換為適應的對象。
存入數(shù)據(jù)庫的信息有亂碼
也就是說Form表單提交的時候出現(xiàn)亂碼
spring框架提供的字符集過濾器
spring Web MVC框架提供了org.springframework.web.filter.CharacterEncodingFilter
用于解決POST方式造成的中文亂碼問題
可以使用過濾器處理亂碼問題
需要在web.xml
中加入
<filter>
<filter-name>Set Character Encoding</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>Set Character Encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
這些是登錄注冊的頁面
主要參考于大牛Clone丶記憶的SSM集成之路