模塊七 用戶端-用戶登錄

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

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

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

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

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

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

jedisPool.getResource().setex(telephone+

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

......省略

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

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

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

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