沒有SSM框架前項目分包分層是這樣的. (其中的命名不太規范,應省略_)
在有了框架之后項目使用SSM后sql語句都半封裝在了.....xml文件中.對應的Dao的接口中的方法,實現對數據庫的增刪改查操作.獲取JDBC鏈接寫在了mybatis的xml配置文件里了.
而servlet也變成了一個,並使用Spring,SpringMVC提供的IOC,DI,視圖解析等多工具,只使用指定的@...注解就可以實現生成bean的對象,指定哪個方法為哪個/*.do(action)路徑等.
總體代碼量減少了,需要配置的xml文件多了.大部分的事情好像都交給了框架去做.忽然感覺一下落了空.沒關系,還有重要的事情要處理.
上面的是一個簡單的用戶登陸的頁面,在類似 jq22 這樣的網站上可以找到類似的jquery的相關工具js,如驗證碼.頁面效果.
當判定用戶輸入的驗證碼與給出的一致后,進入用戶名及密碼的判定,從數據庫查詢該用戶名和密碼,如果核對正確,則登陸成功.反之.則反之.
具體注冊和登陸要使用ajax與json去傳遞數據,因為這樣可以預先判定用戶名是否已注冊,已經注冊的話,直接返回給用戶說已經注冊了,你就別用這個名字了,然后可以跟一系列的隨機數字在這個名字后面(但這樣是不是還是已經注冊了的,判定起來就略麻煩些)
<!-- 登陸驗證碼,判定后如果成功,再執行登陸方法 --> <script> $.idcode.setCode(); $("#loginButton").click(function (){ var IsBy = $.idcode.validateCode(); /* alert(IsBy); */ console.log(IsBy); if(!IsBy){ //如果驗證碼通過,則執行ajax的方法 event.preventDefault(); }else{ loginUser(); } }); </script>
登陸:
<!-- 登陸的ajax方法 --> <script> function loginUser(){ console.log("in loginUser() ~"); var user_name = $("#user_name").val(); var user_pwd = $("#user_pwd").val(); /* var passPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/; */ var namePattern = /^[a-zA-Z0-9_-]{4,16}$/; if(namePattern.test(user_name)){ console.log(user_name); console.log(user_pwd); //用戶名RegExp正確后,再判定其是否已經在數據庫中存在 $.ajax({ url:"<%=path%>/user/queryUserByNameAndPwd.do", //根據用戶名查詢用戶實例 type:"POST", data:{"user_name":user_name, "user_pwd":user_pwd}, dataType:"json", success:function(data){//響應回傳成功后到這里 if(data.code==1){//如果用戶名密碼正確,則登陸. console.log(data.message); document.forms["loginForm"].submit(); window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp"; /* return true; */ }else if(data.code==0){ alert(data.message); /* return false; */ }else{ //用戶實例不為空,但用戶名不等於該查詢的用戶名 (幾率微乎其微) alert("網絡錯誤,請稍后再試"); //發送BUG信息到管理員 /* return false; */ } } }) } } </script>
用戶登陸后返回首頁,如果不調用window.location.href方法回轉到index.jsp,會顯示.do路徑,我想還有別的方法可以解決這一問題.!
之后用戶需要退出時:
<!-- 清除session -->
<script>
function removeSessoin(){
console.log("清除session");
$.ajax({
url:"<%=path%>/user/removeSession.do", //清除用戶sessoin
type:"POST",
data:{},
dataType:"json",
success:function(data){//響應回傳成功后到這里
if(data.removeCode==1){//如果用戶名重復,則<
alert("您已退出登陸!歡迎下次光臨💗");
window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
}else if(data.removeCode==0){
alert("退出失敗!請聯系!");
}else{
//用戶實例不為空,但用戶名不等於該查詢的用戶名 (幾率微乎其微)
alert("網絡錯誤,請稍后再試");
//發送BUG信息到管理員
}
}
})
}
</script>
在用戶注冊時,將bootstrap的插件又get了幾個新方法.
<!-- 注冊用戶的ajax方法 --> <script> //注冊按鈕點擊執行注冊判定 $("#regButton").click(registerUser); //用戶名失去焦點時,執行查詢該用戶名是否已經存在的ajax操作 $("#user_nameReg").blur(userNameJudger); //密碼框失焦,執行密碼判定 $("#user_pwdReg").blur(pwdCompare); //密碼2變動時執行 $("#user_pwdReg2").change(pwdCompare); //用戶名的正則表達式 var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //密碼的正則表達式 var pPattern = /^.*(?=.{6,30})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/; //設定用戶名的判定boolean var nameFlag = false; var user_nameReg = $("#user_nameReg").val(); //用戶名判定 function userNameJudger(){ var user_nameReg = $("#user_nameReg").val(); if(user_nameReg != null && user_nameReg !=''){ //用戶名不為空 if(uPattern.test(user_nameReg)){ //用戶名格式正式 console.log("用戶名格式正確"); //格式正確后判定是否已經存在數據庫中 //ajax $.ajax({ url:"<%=path%>/user/queryUserInsByName.do", type:"POST", data:{"user_name":user_nameReg}, dataType:"json", success:function(data){ if(data.exist==1){ $("#nameSp").html(" <label class='text-danger'><strong>×用戶名已經重復</strong></label>"); nameFlag = false; /* alert(data.message); */ }else{ $("#nameSp").html(" <label class='text-success'><strong>√</strong></label>"); nameFlag = true; /* alert(data.message); */ } } }) }else{ nameFlag = false; console.log("用戶名格式不正確"); //用戶名格式不正確 /* alert("用戶名格式錯誤,應為4到16位（可使用 : 字母，數字，下划線，減號）"); */ /* <label data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip</label> */ $("#nameSp").html(" <label data-toggle='tooltip' data-placement='right' title='用戶名格式錯誤,應為4到16位.可使用 : 字母，數字，下划線，減號'><p class='text-warning'>💀用戶名格式錯誤,點我查看具體原因.</p></label>"); $("[data-toggle='tooltip']").tooltip(); } }else{ //用戶名不能為空 nameFlag = false; $("#nameSp").html(" <label class='text-danger'><strong>🚫用戶名不能為空</strong></label>"); } } /* tHIS FUNCTION IS SLOW function getNameBool(){ userNameJudger(); return nameFlag; } */ /* 設置密碼的判定boolean */ var pwdFlag = false; //密碼格式及相同比較,如果相同,pwdFlag為true function pwdCompare(){ pwdFlag = false; var user_pwd1Reg = $("#user_pwdReg").val(); var user_pwd2 = $("#user_pwdReg2").val(); if(user_pwd1Reg != null && user_pwd1Reg != ''){ //如果密碼1不為空,不為空字符串 if(pPattern.test(user_pwd1Reg)){ //密碼格式正確,繼續判定兩個密碼是否相同 console.log("密碼1格式正確");//ok $("#pwd1Sp").html(" <label class='text-success'><strong>√</strong></label>"); if(user_pwd1Reg===user_pwd2){ //兩個密碼相同,格式也正確 /* alert("密碼一致~可以注冊");//ok */ pwdFlag = true; $("#pwd1Sp").html(" <label class='text-success'><strong>√</strong></label>"); $("#pwd2Sp").html(" <label class='text-success'><strong>√</strong></label>"); return pwdFlag; }else{ //第一個密碼格式正確,第二個密碼跟第一個不相同 /* alert("兩個密碼不同~");//ok */ if(user_pwd2==''){ pwdFlag = false; $("#pwd2Sp").html(" <label class='text-warning'><strong>請輸入重復密碼.</strong></label>"); return pwdFlag; }else{ pwdFlag = false; $("#pwd2Sp").html(" <label class='text-danger'><strong>重復密碼錯誤.</strong></label>"); return pwdFlag; } } }else{ //密碼1格式錯誤 pwdFlag = false; /* alert("密碼格式錯誤,需求6-30位,包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符");//ok */ $("#pwd1Sp").html(" <label data-toggle='tooltip' data-placement='right' title='密碼格式錯誤,需求6-30位,包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符'><p class='text-warning'>💀密碼格式錯誤,點我查看具體原因.</p></label>"); $("[data-toggle='tooltip']").tooltip(); return pwdFlag; } }else{ //如果密碼1為空,為空字符串,判斷重復密碼是否空 if(user_pwd2 != null && user_pwd2 != ''){ pwdFlag = false; //如果密碼1為空,密碼2不空,則清空密碼2,關注密碼1輸入框提示先輸入密碼1 $("#user_pwdReg2").val('');//ok console.log("密碼2被清空,先填寫密碼1");//ok $("#user_pwdReg").focus();//ok /* alert("先要輸入密碼1~"); //ok */ $("#pwd2Sp").html(" <label class='text-warning'><strong>請先輸入上面的密碼.</strong></label>"); return pwdFlag; } } } //注冊新用戶的一系列focus,blur事件. /* function getRegsiterInfo(){ $() } */ //注冊新用戶 function registerUser(){ console.log("in registerUser() ~"); var user_nameTrue = $("#user_nameReg").val(); var user_pwdTrue = $("#user_pwdReg").val(); //執行用戶名判斷,是否已經存在或格式等. userNameJudger(); if(pwdCompare() && nameFlag){ $.ajax({ url:"<%=path%>/user/insertNewUser.do", type:"POST", data:{"user_name":user_nameTrue,"user_pwd":user_pwdTrue}, dataType:"json", success:function(data){ if(data.insertNum>0){ console.log("注冊成功"); //發送用戶名密碼到用戶郵箱(待添加) console.log("用戶名:"+user_nameTrue+".密碼:"+user_pwdTrue); //提交表單 document.forms["regForm"].submit(); /* 跳轉頁面並刷新獲取session及*/ window.location.href="http://localhost:8084/OrderSystemM/Test1/userinfo.jsp"; // }else{ console.log("注冊失敗"); } } }) }else{ console.log("🚫阻止提交"); event.preventDefault(); } } </script>
基本注冊的流程是這樣,口述的話簡單說明為,先判定注冊的用戶名是否已經存在於了數據庫中,如果是,則提示已經存在,並阻止提交 nameFlag = false
兩次重復密碼進行比對,格式正確並兩者相同,則返回true, 當這些具體滿足了條件,將用戶注冊信息通過ajax及json注冊到數據庫,並返回注冊狀態碼1or0,
1的話頁面假性submit提交讓注冊框消失,並跳轉如userinfo用戶信息頁面. (這里如果使用郵箱則可以發送郵件給注冊郵箱,當用戶點擊后再判斷操作)
基本的controller 更新用戶
//動態更新用戶數據 用戶信息界面 @RequestMapping("updateUser") @ResponseBody public Map<String,Object> updateUser(User user){ Map<String,Object> map = new HashMap<String,Object>(); int updateNum = us.updateByPrimaryKeySelective(user); map.put("updateNum",updateNum); if(updateNum>0){ map.put("message", "用戶數據更新成功💗"); } return map; }
注冊
//注冊新用戶,成功返回狀態碼1 @RequestMapping("insertNewUser") @ResponseBody public Map<String,Object> insertNewUser(User u,HttpSession session){ Map<String,Object> map = new HashMap<String,Object>(); int insertNum = us.insertUser(u); if(insertNum>0){ map.put("insertNum", insertNum); map.put("message", "注冊成功."); User user = us.queryUserByNameAndPwd(u); System.out.println(user); session.setAttribute("userID", user.getUser_id()); //剛注冊,昵稱為空,放入用戶名 session.setAttribute("userName", u.getUser_name()); return map; }else{ map.put("insertNum", insertNum); map.put("message", "注冊失敗,請聯系網站管理員."); return map; } }
根據session中的用戶id查詢用戶實例,將數據反填到用戶數據中
//根據用戶ID查詢用戶實例 從session中獲取ID @RequestMapping("getUserById") @ResponseBody public ModelMap getUserById(HttpSession session,ModelMap map){ System.out.println(">>>>>>>>>>>>>>>>"+(Long)session.getAttribute("userID")); User user = us.queryUserById((Long)session.getAttribute("userID")); map.addAttribute("userIns",user); /* return "redirect:/user/showUser.do";*/ return map; }
用戶退出
//用戶退出.清空session @RequestMapping("removeSession") @ResponseBody public Map<String,Object> removeSession(HttpSession session){ Map<String,Object> map = new HashMap<String,Object>(); session.removeAttribute("userID"); //清空session 並無返回類型 session.removeAttribute("userName"); System.out.println("觸發removeSession"); map.put("removeCode",1); return map; }
用戶名和密碼登陸
//用戶登陸進行ajax判定 如果登陸成功判斷狀態碼並展示用戶姓名鏈接,及退出按鈕 @RequestMapping("queryUserByNameAndPwd") @ResponseBody public Map<String,Object> queryUserByNameAndPwd(User user,HttpSession session){ Map<String,Object> map = new HashMap<String,Object>(); User u = us.queryUserByNameAndPwd(user); if(u!=null){ //用戶存在登陸成功放入1 map.put("message", "登陸成功💗"); map.put("code", 1); //sessoin放入用用戶名和密碼 session.setAttribute("userID", u.getUser_id()); //如果用戶昵稱不為空,則將用戶昵稱進行展示 if(u.getNick_name()!=null){ session.setAttribute("userName", u.getNick_name()); return map; }else{ //昵稱為空,放入用戶名 session.setAttribute("userName", u.getUser_name()); return map; } }else{ //如果用戶為空,則放入0 System.out.println("密碼錯誤"); map.put("message", "用戶名或密碼錯誤💀"); map.put("code", 0); return map; } }
...
接下來是對數據庫表的設計以及商家入駐及套餐內容展示.
感謝徐老大的xJsonBindView.js