模塊七 用戶端-用戶登錄

模塊七用戶端-用戶登錄《JavaEE企業(yè)級應(yīng)用開發(fā)項目教程（SSM）》知識目標(biāo)/Target了解第三方短信服務(wù)的設(shè)置與使用，能夠說出短信服務(wù)的設(shè)置步驟技能目標(biāo)/Target掌握短信驗證碼的實現(xiàn)方式，能夠使用短信驗證碼實現(xiàn)手機快速登錄的功能章節(jié)概述/

Summary傳智健康用戶端的適用人群是體檢用戶，其目的是方便體檢用戶預(yù)約體檢。體體檢用戶既可以使用計算機訪問用戶端，也可以使用手機端訪問用戶端，但是無論選擇哪種方式訪問，預(yù)約體檢之前都需要先登錄。接下來，本模塊將針對用戶端的用戶登錄進行詳細(xì)講解。目錄/Contents01手機快速登錄手機快速登錄7-1任務(wù)描述大多數(shù)系統(tǒng)都需要登錄以后才能使用，登錄方式有用戶名密碼登錄、郵箱密碼登錄、手機快速登錄等。其中，手機快速登錄的方式不需要用戶記憶密碼，只需要通過輸入手機號獲取驗證碼就可以完成登錄，與其他登錄方式相比，手機快速登錄可以避免賬號或密碼泄露的風(fēng)險。傳智健康的用戶端選擇使用手機快速登錄的方式實現(xiàn)用戶登錄。任務(wù)描述在用戶登錄頁面login.html中，在手機號輸入框中填寫手機號，單擊“獲取驗證碼”按鈕后，驗證碼會以短信的形式發(fā)送到對應(yīng)的手機號，將收到的驗證碼填寫到驗證碼輸入框中，單擊“登錄”按鈕即可實現(xiàn)用戶登錄。在用戶登錄頁面，按鍵盤【F12】進入開發(fā)者工具模式，單擊“，”按鈕，切換到手機瀏覽器模式。任務(wù)描述在頁面中，通過“Dimensions:Responsive”下拉列表框可以選擇使用不同的手機型號進行測試。在之后的開發(fā)測試中，可以使用瀏覽器模擬手機端頁面。手機快速登錄可以分解為2個功能，分別是獲取驗證碼、完成用戶登錄。接下來對這2個功能的實現(xiàn)思路進行分析。任務(wù)分析任務(wù)分析為login.html頁面的“獲取驗證碼”按鈕綁定單擊事件，在單擊事件觸發(fā)后提交獲取驗證碼的請求。（1）提交獲取驗證碼的請求由控制器類ValidateCodeController的send4Login()方法接收頁面提交的請求，在方法中調(diào)用短信服務(wù)發(fā)送短信驗證碼。（2）接收和處理發(fā)送驗證碼請求獲取驗證碼任務(wù)分析獲取驗證碼的實現(xiàn)過程任務(wù)分析為login.html頁面的“登錄”綁定單擊事件，并在單擊事件觸發(fā)后提交用戶登錄請求。（3）保存用戶登錄數(shù)據(jù)在MemberServiceImpl類重寫MemberService接口的findByTelephone()和add()方法。（2）接收和處理用戶登錄請求用戶登錄時，首先會查詢該用戶是不是會員，如果不是，校驗登錄信息后將這個用戶自動新增為會員；如果是，則校驗用戶登錄信息。（4）顯示用戶登錄結(jié)果如果登錄成功，跳轉(zhuǎn)到用戶端首頁index.html；如果登錄失敗，在login.html頁面中提示登錄失敗信息。（1）提交用戶登錄的請求任務(wù)分析完成用戶登錄的實現(xiàn)過程知識進階短信服務(wù)是為用戶提供的一種通信服務(wù)，支持快速發(fā)送短信驗證碼、短信通知等。目前，市面上有很多第三方提供的短信服務(wù)，需要注意的是這些短信服務(wù)都是收費的服務(wù)。阿里云的云通信和云市場中都提供了短信服務(wù)，其中，云通信在配置短信簽名時需要提供企業(yè)資質(zhì)或有效域名，并不適合個人開發(fā)測試使用；云市場中的其他第三方平臺提供的短信服務(wù)不需要提供企業(yè)資質(zhì)或有效域名，部分第三方平臺還提供免費試用的短信服務(wù)，可以允許個人使用。為了便于讀者進行測試，本書選擇阿里云云市場中其他第三方平臺提供的短信服務(wù)實現(xiàn)發(fā)送短信服務(wù)。短信服務(wù)接口知識進階（1）注冊阿里云賬號知識進階（1）注冊阿里云賬號知識進階使用注冊賬號登錄，登錄成功后，單擊阿里云首頁菜單欄中的“云市場”，進入阿里云的云市場頁面。（2）購買短信服務(wù)知識進階在阿里云的云市場頁面的搜索欄中輸入短信驗證碼，單擊“搜索云市場”按鈕，搜索短訓(xùn)驗證碼服務(wù)。（2）購買短信服務(wù)知識進階以列表第1個為例講解短信服務(wù)的使用，單擊列表第1個短信服務(wù)的超鏈接進入短信接口購買頁面。短信接口提供了可以免費試用的套餐。（2）購買短信服務(wù)知識進階（2）購買短信服務(wù)知識進階發(fā)送短信時需要進行身份認(rèn)證，只有認(rèn)證通過才能發(fā)送短信。在短信服務(wù)接口頁面中滑動頁面到最上端，選擇“買家中心”→“進入管理控制臺”查看已購買的短信服務(wù)的AppCode。（3）獲取AppCode知識進階對短信接口的測試用例進行改造，封裝成工具類SMSUtils，用于發(fā)送短信。在health_common子模塊下的com.itheima.utils包下創(chuàng)建SMSUtils類，在類中定義sendShortMessage()方法，用于執(zhí)行短信發(fā)送。用于發(fā)送短信驗證碼的工具類SMSUtils，不能直接調(diào)用，讀者需要按照自己購買短信包的使用文檔進行修改，需要修改的部分包含host、appCode、sign和skin。（4）封裝工具類SMSUtils知識進階發(fā)送短信的工具類封裝完成后，進行發(fā)送短信驗證碼的測試。在SMSUtils類中定義main()方法，在該方法中調(diào)用sendShortMessage()方法。publicstaticvoidmain(String[]args){

sendShortMessage("151****1927","123456");}驗證碼手機號（5）測試發(fā)送短信知識進階（5）測試發(fā)送短信知識進階在實際項目開發(fā)中驗證碼不會是固定的，一般會通過Random()方法隨機生成4位或者6位數(shù)字作為驗證碼發(fā)送給用戶。將生成隨機數(shù)的執(zhí)行過程封裝成工具類ValidateCodeUtils，用于生成隨機數(shù)驗證碼。publicclassValidateCodeUtils{publicstaticIntegergenerateValidateCode(intlength){Integercode=null;if(length==4){code=newRandom().nextInt(9999);//生成隨機數(shù)，最大為9999if(code<1000){code=code+1000;//保證隨機數(shù)為4位數(shù)字}}elseif(length==6){code=newRandom().nextInt(999999);//生成隨機數(shù)，最大為999999if(code<100000){code=code+100000;//保證隨機數(shù)為6位數(shù)字}}else{thrownewRuntimeException("只能生成4位或6位數(shù)字驗證碼");}returncode;}}（5）測試發(fā)送短信任務(wù)實現(xiàn)在login.html頁面中定義sendValidateCode()方法，用于發(fā)送短信驗證碼。<scriptsrc="../plugins/vue/axios-0.18.0.js"></script><scriptsrc="../plugins/healthmobile.js"></script>......sendValidateCode(){vartelephone=this.loginInfo.telephone;//獲取用戶輸入的手機號if(!checkTelephone(telephone)){this.$message.error("手機號輸入錯誤，請檢查后重新輸入！");//輸入不正確，彈出提示returnfalse;}validateCodeButton=$("#validateCodeButton")[0];//鎖定按鈕clock=window.setInterval(doLoop,1000);//60S倒計時效果

axios.get("/validatecode/send4Login.do?telephone="+telephone).then((res)=>{if(!res.data.flag){this.$message.error(res.data.message);//發(fā)送失敗，彈出提示}});}定義手機號校驗方法，導(dǎo)入js文件即可調(diào)用其中的方法。1.獲取驗證碼（1）提交獲取驗證碼的請求任務(wù)實現(xiàn)為“獲取驗證碼”綁定單擊事件，并設(shè)置在觸發(fā)單擊事件時調(diào)用sendValidateCode()方法。<inputid="validateCodeButton"type="button"style="font-size:12px"

@click="sendValidateCode()"value="獲取驗證碼">1.獲取驗證碼（1）提交獲取驗證碼的請求任務(wù)實現(xiàn)在進行獲取驗證碼的后端代碼開發(fā)之前，將開發(fā)過程中會使用的公共資源導(dǎo)入到health_common子模塊。RedisMessageConstant類：將驗證碼保存在Redis中，用于在頁面中輸入驗證碼時進行比對，即輸入的驗證碼與發(fā)送到手機上的驗證碼是否一致。MD5Utils類，用于進行密碼加密。在health_mobile子模塊的src/main/resources目錄下導(dǎo)入配置文件，具體如下。spring-redis.xml：配置Redis與Jedis連接池。springmvc.xml：配置Fastjson轉(zhuǎn)換器、Dubbo、包掃描、spring-redis.xml文件的引用等。1.獲取驗證碼（2）導(dǎo)入公共資源任務(wù)實現(xiàn)在health_mobile模塊的com.itheima.controller包下創(chuàng)建控制器類ValidateCodeController，在類中定義send4Login()方法，用于接收和處理發(fā)送短信驗證碼的請求。@RestController@RequestMapping("/validatecode")publicclassValidateCodeController{@AutowiredprivateJedisPooljedisPool;@RequestMapping("/send4Login")publicResultsend4Login(Stringtelephone){Stringcode=ValidateCodeUtils.generateValidateCode(6).toString();//獲取6位數(shù)驗證碼try{

SMSUtils.sendShortMessage(telephone,code);//發(fā)送短信

jedisPool.getResource().setex(telephone+

RedisMessageConstant.SENDTYPE_LOGIN,300,code);//驗證碼保存到redisreturnnewResult(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);//成功}catch(Exceptione){

......省略

失敗的返回信息}}}1.獲取驗證碼（3）實現(xiàn)發(fā)送驗證碼控制器任務(wù)實現(xiàn)依次啟動ZooKeeper服務(wù)、Redis服務(wù)、health_service_provider和health_mobile。訪問用戶登錄頁面，輸入手機號，單擊“獲取驗證碼”按鈕。1.獲取驗證碼（4）測試獲取驗證碼倒計時內(nèi)按鈕失效任務(wù)實現(xiàn)1.獲取驗證碼（4）測試獲取驗證碼任務(wù)實現(xiàn)在login.html頁面中定義login()方法，用于用戶登錄。......login(){vartelephone=this.loginInfo.telephone;//獲取用戶輸入的手機號if(!checkTelephone(telephone)){this.$message.error("手機號輸入錯誤，請檢查后重新輸入！");//輸入不正確，彈出提示returnfalse;}

axios.post("/member/login.do",this.loginInfo).then((res)=>{if(res.data.flag){

window.location.href="index.html";//登錄成功，跳轉(zhuǎn)到用戶端首頁}else{this.$message.error(res.data.message);//登錄失敗，彈出提示}});}2.完成用戶登錄（1）提交用戶登錄的請求任務(wù)實現(xiàn)為“登錄”綁定單擊事件，并設(shè)置在觸發(fā)單擊事件時調(diào)用login()方法。<divclass="btnyes-btn"><a@click="login()"href="#">登錄</a></div>2.完成用戶登錄（1）提交用戶登錄的請求任務(wù)實現(xiàn)在health_common子模塊的com.itheima.pojo包下創(chuàng)建Member類，在類中聲明會員的屬性，定義各個屬性的getter/setter方法。2.完成用戶登錄（2）創(chuàng)建會員類任務(wù)實現(xiàn)在health_mobile模塊的com.itheima.controller包下創(chuàng)建控制器類MemberController，在類中定義login()方法，用于接收和處理用戶登錄的請求。（1）校驗用戶輸入的短信驗證碼是否正確，如果驗證碼錯誤則登錄失??；（2）如果驗證碼正確，判斷當(dāng)前用戶是否為會員，如果不是會員則自動完成新增會員；（3）向客戶端寫入Cookie，內(nèi)容為用戶手機號；（4）將會員信息保存到Redis，使用手機號作為key。2.完成用戶登錄（3）實現(xiàn)會員登錄控制器任務(wù)實現(xiàn)在health_interface子模塊的com.itheima.service包下創(chuàng)建接口MemberService，在接口中定義findByTelephone()方法，用于根據(jù)手機號查找會員；定義add()方法，用于新增會員。publicinterfaceMemberService{publicMemberfindByTelephone(Stringtelephone);//根據(jù)手機號查詢會員publicvoidadd(Membermember);//新增會員}2.完成用戶登錄（4）創(chuàng)建會員登錄服務(wù)任務(wù)實現(xiàn)在health_service_provider子模塊的com.itheima.service.impl包下創(chuàng)建MemberService接口的實現(xiàn)類MemberServiceImpl，重寫MemberService接口的findByTelephone()方法，用于根據(jù)手機號查找會員。@Service(interfaceClass=MemberService.class)@TransactionalpublicclassMemberServiceImplimplementsMemberService{@AutowiredprivateMemberDaomemberDao;//根據(jù)手機號查詢會員信息publicMemberfindByTelephone(Stringtelephone){returnmemberDao.findByTelephone(telephone);}}2.完成用戶登錄（5）實現(xiàn)會員登錄服務(wù)任務(wù)實現(xiàn)在health_service_provider子模塊的MemberServiceImpl類中，重寫MemberService接口的add()方法，用于新增會員。//新增會員publicvoidadd(Membermember){//如果用戶設(shè)置了密碼，需要對密碼進行md5加密Stringpassword=member.getPassword();if(password!=null){password=MD5Utils.md5(password);member.setPassword(password);}

memberDao.add(member);}2.完成用戶登錄（5）實現(xiàn)會員登錄服務(wù)任務(wù)實現(xiàn)在health_service_provider子模塊的com.itheima.dao包下創(chuàng)建持久層接口MemberDao，用于處理與會員相關(guān)的數(shù)據(jù)庫操作。publicinterfaceMemberDao{publicMemberfindByTelephone(Stringtelephone);//根據(jù)手機號查詢會員信息publicvoidadd(Membermember);//新增會員}2.完成用戶登錄（6）實現(xiàn)持久層會員登錄任務(wù)實現(xiàn)創(chuàng)建映射文件MemberDao.xml，在文件中使用<insert>元素映射新增語句新增會員；使用<select>元素映射查詢語句，根據(jù)手機號查詢會員信息。......<mappernamespace="com.itheima.dao.MemberDao"><insertid="add"parameterType="com.itheima.pojo.Member"><selectKeyresultType="java.lang