系統(tǒng)基本功能實現(xiàn)01

系統(tǒng)基本功能實現(xiàn)2知識目標登錄注冊模塊基本信息模塊01能力目標掌握登錄注冊模塊掌握基本信息模塊02學(xué)習目標3目錄01登錄注冊模塊02基本信息模塊登錄注冊模塊4任務(wù)分解表任務(wù)序號任務(wù)內(nèi)容驗證方式任務(wù)3.1.1開發(fā)登錄功能使用用戶名和密碼登錄任務(wù)3.1.2開發(fā)注冊功能注冊新的用戶名和密碼登錄注冊模塊5開發(fā)登錄功能--相關(guān)知識本功能實現(xiàn)的技術(shù)原理如下：（1）視圖層：設(shè)計如圖3-2所示的登錄界面。（2）控制層：接收視圖層的消息，向業(yè)務(wù)層發(fā)送登錄信息，并將業(yè)務(wù)層返回的結(jié)果發(fā)送到視圖層。（3）業(yè)務(wù)層：負責業(yè)務(wù)模塊的邏輯設(shè)計，將控制層發(fā)過來的登錄信息傳遞給持久層，并將獲得的結(jié)果返回給控制層。（4）持久層：接收業(yè)務(wù)層傳過來的登錄信息，并對數(shù)據(jù)庫進行操作，驗證登錄信息與數(shù)據(jù)庫里的信息是否一致，并將得到的結(jié)果返回給業(yè)務(wù)層。登錄注冊模塊6開發(fā)登錄功能--實現(xiàn)步驟1.導(dǎo)入項目運行Eclipse，選擇“File”→“Import”，如圖1所示。選擇“ExistingProjectintoWorkspace”選項，進入導(dǎo)入工程界面，如圖2所示，點擊“Browser”選項導(dǎo)入工程car。登錄注冊模塊7開發(fā)登錄功能--實現(xiàn)步驟2.實現(xiàn)控制層在“/src/com/piesat/zyms/web/cms/IndexController.Java”增加如下代碼。/***登錄*@paramreq:請求*@paramusername:用戶名*@parampassword:密碼*/@RequestMapping("/loginfunction")publicvoidloginfunction(HttpServletRequestreq,HttpServletResponseresp)throwsIOException{ Stringusername=req.getParameter("username"); Stringpassword=req.getParameter("password"); Useruser=userService.getUserByUsername(username); Stringresult=""; Stringjsonp=""; Stringnpsword=""; Stringnewpassword=password; if(user!=null){ npsword=user.getPassword(); if(newpassword.equals(npsword)){ req.getSession().setAttribute("user",user); result=newGson().toJson("true"); jsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){result=jsonp+"("+result+")";

resp.getWriter().write(result); }else{

resp.getWriter().write(result); 登錄注冊模塊8開發(fā)登錄功能--實現(xiàn)步驟 resp.getWriter().write(result); }}else{ result=newGson().toJson("false"); jsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){ result=jsonp+"("+result+")";

resp.getWriter().write(result); }else{ resp.getWriter().write(result); }}}else{ result=newGson().toJson("false"); jsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){ result=jsonp+"("+result+")"; resp.getWriter().write(result); }else{ resp.getWriter().write(result); }}}登錄注冊模塊9開發(fā)登錄功能--實現(xiàn)步驟3.實現(xiàn)視圖層（1）在/WebContent/WEB-INF/page/ace/car文件夾下新建文件Login.jsp。登錄界面采用Bootstraplist-group及Ajax與JSON技術(shù)來實現(xiàn)。（2）列表組件用于以列表形式呈現(xiàn)復(fù)雜的和自定義的內(nèi)容。創(chuàng)建一個基本的列表組，只需要向<div>元素添加class.list-group和class.list-group-item即可，如下所示。<divclass="list-group"><divclass="list-group-item">

</div></div>登錄注冊模塊10開發(fā)登錄功能--實現(xiàn)步驟（3）在本實例中可以看到，除了列表主體部分以外還有一個列表標題，可以通過以下方式來添加列表標題：①使用“.list-group-itemactiveclass”向列表添加標題。②使用帶有“.list-group-item-headingclass”的<h1>-<h6>添加預(yù)定義樣式的標題。<aclass="list-group-itemactive"> <h4class="list-group-item-heading">用戶登錄</h4></a><divclass="list-group-item">登錄內(nèi)容區(qū)域</div>登錄注冊模塊11開發(fā)登錄功能--實現(xiàn)步驟（4）登錄內(nèi)容實現(xiàn)：本案例采用bootstrap實現(xiàn)用戶登錄界面，步驟如下：①向“<divclass="list-group-item"”添加“<divclass="row">”新建一個默認bootstrap網(wǎng)格。②把標簽和控件放在一個帶有“class.form-group”的<div>中。這是獲取最佳間距所必需的。③向所有的文本元素<input>、<textarea>和<select>添加“class="form-control"”。<divclass="row"><divclass="col-md-12"style="background-color:#124E76;float:right;margin-top:20px;"><divclass="form-group"style="margin-top:20px;margin-left:12%;"><labelclass="form-label"style="color:#ffffff;">用戶名：</label><inputtype="text"id="username"class="form-control"style="width:300px;margin-left:50px;"></div><divclass="form-group"style="margin-top:20px;margin-left:12%;"><labelclass="form-label"style="color:#ffffff;">密碼：</label><inputtype="password"id="password"class="form-control"style="width:300px;margin-left:50px;"></div></div><divclass="row"style="margin-top:10px;margin-bottom:10px;text-align:center;"><buttontype="button"onclick="login()"style="text-align:center;"class="btnbtn-primary">登錄</button></div>登錄注冊模塊12開發(fā)登錄功能--實現(xiàn)步驟④最后將登錄內(nèi)容嵌入到list-group-item區(qū)域中，登錄界面如圖5-4所示。<divclass="list-group"style="margin:0auto;width:800px;"><aclass="list-group-itemactive" style="background-color:#196BA2;"> <h4class="list-group-item-heading">用戶登錄</h4></a><divclass="list-group-item" style="background-color:#145885;border:0pxsolid;"> <divclass="row"> <divclass="col-md-12" style="background-color:#124E76;float:right;margin-top:20px;"> <divclass="form-group"style="margin-top:20px;margin-left:12%;"> <labelclass="form-label"style="color:#ffffff;">用戶名：</label><inputtype="text"id="username"class="form-control" style="width:300px;margin-left:50px;"> </div>登錄注冊模塊13開發(fā)登錄功能--實現(xiàn)步驟 <divclass="form-group"style="margin-top:20px;margin-left:12%;"> <labelclass="form-label"style="color:#ffffff;">密碼：</label><input type="password"id="password"class="form-control" style="width:300px;margin-left:50px;"> </div> </div> <divclass="row" style="margin-top:10px;margin-bottom:10px;text-align:center;"> <buttontype="button"onclick="login()"style="text-align:center;" class="btnbtn-primary">登錄</button> </div> </div></div></div>登錄注冊模塊14開發(fā)登錄功能--實現(xiàn)步驟4.實現(xiàn)前后臺數(shù)據(jù)交互在上一節(jié)內(nèi)容中，我們已經(jīng)完成了登錄界面的編寫，接下來就要與后端進行數(shù)據(jù)交互，本案例中我們采用Ajax與JSON來實現(xiàn)數(shù)據(jù)交互。在界面代碼Login.jsp中，找到<buttontype="button">的登錄按鈕，為其添加點擊事件login()方法：<scripttype="text/javascript"> functionlogin(){ varusername=$("#username").val(); varpassword=$("#password").val(); vardata={ username:username, password:password }登錄注冊模塊15開發(fā)登錄功能--實現(xiàn)步驟 $.ajax({ type:"post", url:'<%=path%>'+"/energy/loginfunction", data:data, dataType:"jsonp",//數(shù)據(jù)類型為json jsonp:"jsoncallback", success:function(data){ if(data=="true"){ window.location.href="http://"+location.host+'<%=path%>/'+'energy/index'; }else{ alert("賬戶不存在或用戶名密碼錯誤"); window.location.href="http://"+location.host+'<%=path%>/'+'energy/login'; }

} }) } </script>登錄注冊模塊16開發(fā)注冊功能--相關(guān)知識本功能實現(xiàn)的技術(shù)原理如下：（1）視圖層：設(shè)計如圖3-6的注冊界面。（2）控制層：接收視圖層的消息，向業(yè)務(wù)層發(fā)送信息，并將業(yè)務(wù)層返回的結(jié)果發(fā)送到視圖層。（3）業(yè)務(wù)層：負責業(yè)務(wù)模塊的邏輯設(shè)計，將控制層發(fā)過來的信息傳遞給持久層，并將獲得的結(jié)果返回給控制層。（4）持久層：接收業(yè)務(wù)層傳過來的信息，并對數(shù)據(jù)庫進行操作，將得到的結(jié)果返回給業(yè)務(wù)層。登錄注冊模塊17開發(fā)注冊功能--實現(xiàn)步驟1.實現(xiàn)控制層在“/src/com/piesat/zyms/web/cms/UserController.Java”中增加如下代碼。/** *注冊 *@paramreq:請求 *@paramusername:用戶名 *@parampassword:密碼*/ @RequestMapping("/adduser") publicvoidaddUser(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{ Stringusername=req.getParameter("username"); Useru=userService.getUserByUsername(username); Stringresult=null; if(u!=null){result=newGson().toJson("error"); }else{ Stringpassword=req.getParameter("password"); Stringnickname=req.getParameter("nickname"); intsex=Integer.parseInt(req.getParameter("val")); intusertype=Integer.parseInt(req.getParameter("item")); Stringbdate=req.getParameter("birthdate"); Stringdlt=req.getParameter("dltime"); DateFormatformat=newSimpleDateFormat("yyyy-MM-dd"); Datebirthdate=null; Datedltime=null; try{ birthdate=format.parse(bdate); dltime=format.parse(dlt); }catch(ParseExceptione){ e.printStackTrace(); }

登錄注冊模塊18開發(fā)注冊功能--實現(xiàn)步驟 Useruser=newUser(); Stringid=UUID.randomUUID().toString(); user.setId(id); user.setUsername(username); user.setPassword(password); user.setCreatetime(newDate()); user.setNickname(nickname); user.setBirthdate(birthdate); user.setSex(sex); user.setDltime(dltime); user.setUsertype(usertype); userService.saveUser(user); result=newGson().toJson(user); } Stringjsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){ result=jsonp+"("+result+")"; resp.getWriter().write(result); }else{ resp.getWriter().write(result); } }登錄注冊模塊19開發(fā)注冊功能--實現(xiàn)步驟2.實現(xiàn)業(yè)務(wù)層（1）在“/src/com/piesat/zyms/service/cms/UserService.java”中增加如下代碼。/** *保存注冊的用戶信息 *@paramuser:用戶實體類 */publicvoidsaveUser(Useruser){ userMapper.saveUser(user); }登錄注冊模塊20開發(fā)注冊功能--實現(xiàn)步驟3.實現(xiàn)持久層（1）在“/src/com/piesat/zyms/persistence/userMapper.java”中增加如下代碼。/** *添加保存信息 */ publicvoidsaveUser(Useruser);登錄注冊模塊21開發(fā)注冊功能--實現(xiàn)步驟（2）在“/src/com/piesat/zyms/persistence/userMapper.xml”中增加如下代碼。<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-////DTDMapper3.0//EN""/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.piesat.zyms.persistence.UserMapper"> <insertid="saveUser"parameterType="com.piesat.zyms.domain.core.User">insertintouser(id,username,password,createtime,nickname,birthdate,sex,dltime,hpic,usertype)values(#{id},#{username},#{password},#{createtime},#{nickname},#{birthdate},#{sex},#{dltime},#{hpic},#{usertype})</insert></mapper>登錄注冊模塊22開發(fā)注冊功能--實現(xiàn)步驟4.實現(xiàn)視圖層在/WebRoot/WEB-INF/page/ace/car文件夾下新建Registe.jsp。注冊界面采用Bootstraplist-group來實現(xiàn)。列表組件用于以列表形式呈現(xiàn)復(fù)雜的和自定義的內(nèi)容。創(chuàng)建一個基本的列表組，只需要向<div>元素添加class.list-group和class.list-group-item即可，內(nèi)容的添加需按下面的幾個步驟進行：（1）向“<divclass="list-group-item"”添加“<divclass="row">”新建一個默認bootstrap網(wǎng)格。（2）把標簽和控件放在一個帶有“class.form-group”的<div>中。（3）向標簽添加“class.control-label”。（3）向標簽添加“class.control-label”。登錄注冊模塊23開發(fā)注冊功能--實現(xiàn)步驟<divclass="list-group"style="margin:0auto;width:800px;"><ahref="#"class="list-group-itemactive"style="background-color:#196BA2;"><h4class="list-group-item-heading">賬號注冊</h4></a><divclass="list-group-item"style="background-color:#145885;border:0pxsolid;"> <divclass="row"> <divclass="col-md-6"style="background-color:#124E76;width:250px;height:360px;margin-top:20px;"> <divclass="img-circle"style="margin:0auto;padding-top:20px;background-color:#124E76;width:150px;height:150px;"> <imgsrc="resources/login/nlogin.jpg"class="img-circle"border="0"height="150"id="pic"width="150"/></div><buttontype="button"style="background-color:#196BA2;color:#F0F8FD;border:0px;margin-left:70px;margin-top:40px;height:30px;"class="btnbtn-default">上傳頭像</button><inputid="fileToUploadLink"type="file"onchange="previewFile()"style="cursor:pointer;opacity:0;margin-left:70px;margin-top:-25px;color:F0F8FD;"size="25"name="fileToUploadLink"/></div><divclass="col-md-6"style="background-color:#124E76;float:right;margin-top:20px;width:500px;height:360px;"><divclass="form-group"style="margin-top:20px;"><labelclass="form-label"style="color:F0F8FD;">用戶名：</label><inputtype="text"id="username"class="form-control"style="width:300px;margin-left:50px;"></div><divclass="form-group"style="margin-top:20px;"><labelclass="form-label"style="color:F0F8FD;">密碼：</label><inputtype="password"id="password"class="form-control"style="width:300px;margin-left:50px;"></div><divclass="form-group"style="margin-top:20px;"><labelclass="form-label"style="color:F0F8FD;">昵稱：</label><inputtype="text"id="nickname"class="form-control"style="width:300px;margin-left:50px;"></div><divclass="form-group"><labelclass="form-label"style="margin-top:5px;color:F0F8FD;">出生年月：</label><divclass="form-group">

登錄注冊模塊24開發(fā)注冊功能--實現(xiàn)步驟<selectclass="form-control"id="year"style="margin-left:50px;width:150px;"> <optionvalue="2017">2017</option></select><selectclass="form-control"id="month"onchange="getDay()"style="width:72px;"><optionvalue="12">12</option></select><selectclass="form-control"id="day"style="width:72px;"></select></div></div><divclass="form-group"> <labelclass="form-label"style="color:F0F8FD;">性別：</label> <labelclass="radio-inline"style="color:F0F8FD;margin-left:50px;"> <inputtype="radio"name="sex"id="man"value="1"checked="checked">男 </label> <labelclass="radio-inline"style="color:F0F8FD;"> <inputtype="radio"name="sex"id="won"value="0">女 </label></div><divclass="form-group"><labelclass="form-label"style="margin-top:5px;color:F0F8FD;width:120px;">初次申請駕照時間：</label> <divclass="form-group"> <selectclass="form-control"id="years"style="margin-left:10px;width:150px;"> <optionvalue="1909">1909</option> </select> <selectclass="form-control"id="months"onchange="getDays()"style="width:72px;"> <optionvalue="12">12</option> </select> <selectclass="form-control"id="days"style="width:72px;"></select></div></div></div></div><divclass="row"style="margin-top:10px;margin-bottom:10px;text-align:center;"><buttontype="button"onclick="save()"style="text-align:center;"class="btnbtn-primary">注冊</button></div></div></div>登錄注冊模塊25開發(fā)注冊功能--實現(xiàn)步驟5.實現(xiàn)前后臺數(shù)據(jù)交互在界面代碼中找到“<buttontype="button">”的注冊按鈕，為其