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

系統(tǒng)基本功能實現(xiàn)2知識目標(biāo)登錄注冊模塊基本信息模塊01能力目標(biāo)掌握登錄注冊模塊掌握基本信息模塊02學(xué)習(xí)目標(biāo)3目錄01登錄注冊模塊02基本信息模塊基本信息模塊4頭像的上傳—相關(guān)知識本功能實現(xiàn)的技術(shù)原理如下：（1）視圖層本地選擇圖片，上傳到后臺。（2）控制層接受圖片MultipartFile，并將圖片上傳到服務(wù)器，將圖片路徑導(dǎo)入服務(wù)層。（3）服務(wù)層服務(wù)層接受圖片路勁，將其保存到數(shù)據(jù)庫相對應(yīng)的數(shù)據(jù)庫?；拘畔⒛K5頭像的上傳—實現(xiàn)步驟1.前臺頁面通過插件ajaxFileUpload提交圖片信息。$.ajaxFileUpload({ url:'<%=path%>'+"/user/adduploadLink", secureuri:false, fileElementId:'fileToUploadLink',//file控件id data:{ userid:userid }, success:function(data){ alert("保存成功!");

window.location.href="http://"+location.host+"<%=path%>/"+"energy/accset"; },});基本信息模塊6頭像的上傳—實現(xiàn)步驟2.圖片傳到控制層在文件src/com/piesat/zyms/web/cms/UserController.java添加如下代碼@ResponseBody@RequestMapping(value="/adduploadLink",method={RequestMethod.POST})publicvoidadduploadLink(@RequestParam("fileToUploadLink")MultipartFilefile, HttpServletRequestrequest,HttpServletResponseresponse,ModelMapmodel)throwsServletException{ try{ Stringuserid=request.getParameter("userid"); Useruser=userService.getUserById(userid); StringuploadName=UUID.randomUUID().toString(); StringoriginalFilename=file.getOriginalFilename(); Stringextend=originalFilename.substring(originalFilename.lastIndexOf(".")+1); //獲取文件后綴 Stringpath=request.getSession().getServletContext().getRealPath("/upload1")+separator+uploadName+'.'+extend; StringpathFile=request.getSession().getServletContext().getRealPath("/upload1"); FiledirPath=newFile(pathFile); FileuploadFile=newFile(pathFile+separator+uploadName+'.'+extend); 基本信息模塊7頭像的上傳—實現(xiàn)步驟

if(originalFilename!=null&&!originalFilename.equals("")){ if(!dirPath.exists()){ uploadFile.mkdirs();} try{//上傳文件上傳到服務(wù)器 file.transferTo(uploadFile); }catch(Exceptione){ System.out.println(e.getMessage()); }try{user.setHpic(path); userService.updateUser(user); }catch(Exceptione){ e.printStackTrace(); } }}catch(Exceptione){ e.printStackTrace();}}基本信息模塊8查看基本信息—相關(guān)知識本功能實現(xiàn)的技術(shù)原理如下：（1）視圖層視圖層接受用戶ID，將用戶ID傳入控制層。（2）控制層控制層接受用戶ID，將用戶ID傳入到服務(wù)層。（3）服務(wù)層調(diào)用方法getUserById獲取用戶信息返回到控制層，再返回到視圖層，顯示到頁面?；拘畔⒛K9頭像的上傳—實現(xiàn)步驟1.通過ajax提交，在Accset.jsp添加如下代碼：$(function(){varlocalid=$("#userid").val(); $.ajax({ type:"post", url:'<%=path%>'+"/user/accset", data:{ id:localid }, dataType:"jsonp",//數(shù)據(jù)類型為json jsonp:"jsoncallback", success:function(data){} }); });基本信息模塊10頭像的上傳—實現(xiàn)步驟2.在控制層接受參數(shù)src/com/piesat/zyms/web/cms/UserController.java中加如下代碼:@RequestMapping("/accset") publicvoidaccset(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{ Stringid=req.getParameter("id"); Useruser=userService.getUserById(id); SimpleDateFormatsdf=newSimpleDateFormat("yyyy-MM-dd"); Datebdate=user.getBirthdate(); Datedlt=user.getDltime(); Stringbirthdate=sdf.format(bdate); Stringdltime=sdf.format(dlt); Map<String,Object>map=newHashMap<String,Object>(); map.put("user",user); map.put("birthdate",birthdate); map.put("dltime",dltime); Stringresult=newGson().toJson(map); 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); } }基本信息模塊11頭像的上傳—實現(xiàn)步驟3.數(shù)據(jù)庫操作，在src\com\piesat\zyms\persistence的carmessagemapper.java和carmessage.xml添加如下代碼publicUsergetUserById(Stringuserid);<selectid="getUserById"parameterType="java.lang.String"resultType="com.piesat.zyms.domain.core.User"> select*fromuserwhereid=#{id}</select>基本信息模塊12對基本信息作更新—相關(guān)知識本功能實現(xiàn)的技術(shù)原理如下：（1）視圖層視圖層接受用戶ID，將用戶ID傳入控制層。（2）控制層控制層接受用戶ID，將用戶ID傳入到服務(wù)層。（3）服務(wù)層調(diào)用方法getUserById獲取用戶信息返回到控制層，再返回到視圖層，顯示到頁面。基本信息模塊13對基本信息作更新—實現(xiàn)步驟1.通過ajax提交，在Assect.jsp添加如下代碼：$.ajax({ type:"post", url:'<%=path%>'+"/user/updateuser", data:{ id:id, /*username:username,*/ password:password,nickname:nickname,val:val, item:item,birthdate:birthdate,dltime:dltime, }, dataType:"jsonp",//數(shù)據(jù)類型為json jsonp:"jsoncallback", success:function(data){ varuserid=data.id $.ajaxFileUpload({ url:'<%=path%>'+"/user/adduploadLink",secureuri:false, fileElementId:'fileToUploadLink',//file控件id data:{userid:userid}, success:function(data){ alert("保存成功!"); window.location.href="http://"+location.host+"<%=path%>/"+"energy/accset"; }, }); } });基本信息模塊14對基本信息作更新—實現(xiàn)步驟2.在控制層接受參數(shù)src/com/piesat/zyms/web/cms/UserController.java中加如下代碼:@RequestMapping("/updateuser") publicvoidupdateUser(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{ Stringid=req.getParameter("id");// Stringusername=req.getParameter("username"); 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(); } Useruser=userService.getUserById(id);// if(username!=null&&!username.equals("")){// user.setUsername(username);// }

基本信息模塊15對基本信息作更新—實現(xiàn)步驟 if(password!=null&&!password.equals("")){ user.setPassword(password); } if(nickname!=null&&!nickname.equals("")){ user.setNickname(nickname); } if(bdate!=null&&!bdate.equals("")){ user.setBirthdate(birthdate); } if(dlt!=null&&!dlt.equals("")){ user.setDltime(dltime); } user.setCreatetime(newDate()); user.setSex(sex); user.setUsertype(usertype); userService.updateUser(user); Stringresult=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); } }基本信息模塊16對基本信息作更新—實現(xiàn)步驟3.數(shù)據(jù)庫操作，在src\com\piesat\zyms\persistence的usermapper.java和usermapper.xml添加如下代碼publicvoidupdateUser(Useruser);<updateid="updateUser"parameterType="com.piesat.zyms.domain.core.User"> updateuserset id=#{id}, username=#{username}, password=#{password}, createtime=#{createtime}, nickname=#{nickname}, birthdate=#{birthdate}, sex=#{sex}, dltime=#{dltime}, hpic=#{hpic}, usertype=#{usertype} whereid=#{id} </update>基本信息模塊17地圖導(dǎo)航模塊—實現(xiàn)步驟相關(guān)知識百度地圖API相關(guān)文檔實現(xiàn)步驟加載百度地圖，在Map.jsp添加代碼如下：<scriptsrc="/api?v=2.0&ak=R6jiNdN7wEGdC4bskfGYuKMbGrUDOfhO" type="text/javascript"></script>相關(guān)秘鑰百度地圖平臺注冊獲取2.在Mao.jsp添加JavaScript代碼如下：基本信息模塊18地圖導(dǎo)航模塊—實現(xiàn)步驟varmap=newBMap.Map("map"); varpoint=newBMap.Point(120.291129,31.533538); map.centerAndZoom(point,15); map.enableScrollWheelZoom(); functionpos(){ vargeolocation=newBMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus()==BMAP_STATUS_SUCCESS){ varmk=newBMap.Marker(r.point); map.addOverlay(mk);map.panTo(r.point); }else{alert('failed'+this.getStatus()); } },{enableHighAccuracy:true}) }

//添加帶有定位的導(dǎo)航控件 varnavigationControl=newBMap.NavigationControl({ //靠左上角位置 anchor:BMAP_ANCHOR_TOP_LEFT, //LARGE類型 type:BMAP_NAVIGATION_CONTROL_LARGE, //啟用顯示定位 enableGeolocation:true }); map.addControl(navigationControl); //添加定位控件 vargeolocationControl=newBMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess",function(e){ //定位成功事件 varaddress=''; address+=e.addressCvince; address+=e.addressComponent.city; address+=e.addressComponent.district; address+=e.addressComponent.street; address+=e.addressComponent.streetNumber;

});基本信息模塊19地圖導(dǎo)航模塊—實現(xiàn)步驟 geolocationControl.addEventListener("locationError",function(e){ //定位失敗事件 alert(e.message); }); map.addControl(geolocationControl);

functionlocalsearch(){ map.clearOverlays(); $("#r-result").hide(); $("#dh").hide(); varloc=$("#localtion").val(); varlocal=newBMap.LocalSearch(map,{ renderOptions:{map:map,panel:"result"} }); local.search(loc); $("#result").show(); if(loc==""){$("#result").hide();

$("#dh").show();} }

functionclearsearch(){ $("#localtion").val(""); localsearch(); $("#result").hide(); $("#dh").show(); $("#r-result").empty(); $("#r-result").hide(); $("#end").val(""); $("#start").val(""); }vartype=0;

基本信息模塊20地圖導(dǎo)航模塊—實現(xiàn)步驟 functionselect(){ $("#r-result").empty(); vard=$("#drive").css("background-position-y"); varb=$("#bus").css("background-position-y"); varw=$("#walk").css("background-position-y"); if(d=="-84px"){drive(); }elseif(b=="-51px"){bus(); }elseif(w=="-119px"){walk(); }else{alert("請選擇出行方式！");

returnfalse;} //vartype=$("#choose").val(); varstart=$("#start").val(); varend=$("#end").val(); map.clearOverlays(); if(start!=""&&end!=""){ varroutePolicy1=[BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE,

BMAP_DRIVING_POLICY_AVOID_HIGHWAYS]; vardriving=newBMap.DrivingRoute(map,{ renderOptions:{map:map,

panel:"r-result"}, policy:0}); driving.clearResults(); varroutePolicy2=[BMAP_TRANSIT_POLICY_LEAST_TIME BMAP_TRANSIT_POLICY_LEAST_TRANSFER,

BMAP_TRANSIT_POLICY_LEAST_WALKING, BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];

基本信息模塊21地圖導(dǎo)航模塊—實現(xiàn)步驟 vartransit=newBMap.TransitRoute(map,{ renderOptions:{map:map,panel:"r-result"}, policy:0 }); transit.clearResults(); varwalking=newBMap.WalkingRoute(map,{ renderOptions:{map:map,panel:"