前言
前端在我眼里一直不是一個省油的燈艇潭，這近一個月，也讓我走盡了彎路，要不是同事有相關(guān)的經(jīng)驗蹋凝，不知還要陷在其中多久鲁纠。說幾句牢騷話，信息爆炸的時代鳍寂，最可怕的不是找不到改含，而是找到的太多，無從辨別而無從下手迄汛。同時捍壤，技術(shù)的更新太快，人家的教程鞍爱，你用最新的工具可能就會報錯鹃觉。踩了很多坑，總歸想要留點新坑睹逃，所以就有了這篇文章盗扇。
需求分析
第一步，我們先嘗試回想下一個常見的登錄項目的場景是什么?
1）有一個登錄界面沉填，界面要求輸入用戶名和密碼疗隶，如果可以，還需要驗證碼模塊翼闹。登錄界面也應(yīng)該可以包含注冊功能斑鼻。這是登錄界面最基礎(chǔ)的功能要求。
2）有一個展示的界面猎荠，也就說登錄成功后得有一個界面來展示用戶所需的信息坚弱，存儲用戶特定的信息。
3）當我們不注銷用戶的情況下法牲，下一次進入登錄界面史汗，可以直接進入用戶界面，或者說直接進入用戶界面的地址拒垃，可以進入自己的用戶界面停撞；如果是未登錄狀態(tài)，則無法直接進入展示界面
實現(xiàn)
設(shè)計
世界那么大悼瓮，我想要模板戈毒。這個模板，指的不是說完全可用的一個完整 demo 横堡，指的是組件 component 埋市。前輩們是寫了很多可用的組件并匯集起來了的。比如說官網(wǎng)命贴，在搜索框里面輸入要用的組件類型道宅，以 Form 為例食听，可以看到有不少的實例，最下面還有接口文檔污茵。而實例的第一個樱报，就是我們這個項目需要的登錄框。我的這個雛形項目就是使用了這個登錄框的源碼實現(xiàn)的泞当。
先說模板的事情是為了嘗試消除各位和我一樣的初學(xué)者的畏難心理迹蛤。其實我們更像是設(shè)計師，我們指定了一室一廳襟士，就可以找室的模板和廳的模板盗飒，將模板安裝上來，之后具體怎么造的陋桂，并不需要我們?nèi)リP(guān)心逆趣。
在有可用組件的基礎(chǔ)上，我們考慮下我們需要設(shè)計的東西：
1) 我們得有一個跳轉(zhuǎn)的系統(tǒng)章喉，當我們登錄成功之后汗贫，可以跳轉(zhuǎn)到展示的界面。同時秸脱，在展示界面得有一個注銷的按鈕落包，可以跳轉(zhuǎn)回登錄界面。
2）我們得有一個類似于 session 或者 cookie 的系統(tǒng)摊唇，不然的話當我們退出登錄后咐蝇，所有信息都會丟失。這個系統(tǒng)不能存儲在前端巷查，不然項目重啟意味著信息全部丟失有序。
初始化
vue 的下載，我參考的是菜鳥教程網(wǎng)站岛请，使用的方法是 npm 的下載方法旭寿。這個方法的好處是可以初始化一個項目模板，使用命令是 vue init webpack my-project 崇败。我寫文章的時候盅称，初始化的結(jié)果和網(wǎng)站上給的圖是一致的。
下載完成后后室，使用 idea 工具打開項目缩膝，配置運行的方式是:
配置完成后，就可以運行了岸霹，默認會打開 localhost 的 8080 端口疾层，可以使用瀏覽器訪問下默認效果。
界面的實現(xiàn)
界面的本質(zhì)是一個個的 vue 項目贡避，存儲地址是 /src/components 痛黎。打開這個目錄我們可以看到項目初始給的 HelloWorld.vue 予弧。可以清晰地看到項目分為三段結(jié)構(gòu)：第一段是 <template> 湖饱，決定了網(wǎng)頁的布局桌肴；第二段是 <script>, 存儲著網(wǎng)頁內(nèi)部的數(shù)據(jù)和方法；第三段是 <style>, 決定了網(wǎng)頁的樣式琉历。第一段布局的內(nèi)容，就是設(shè)計中提到的模板的內(nèi)容水醋，也是寫慣后端的人最不熟悉的部分旗笔，第二段的內(nèi)容和后端的代碼是同源的，語法角度略有不同拄踪，第三段暫時不做討論蝇恶。
設(shè)計的實現(xiàn)
1）跳轉(zhuǎn)的實現(xiàn)，主要借助于一個工具惶桐，名字叫做 vue-router 撮弧。安裝方法是在項目根目錄下安裝 vue-router。?
安裝命令是 npm install vue-router姚糊。顧名思義贿衍，這個工具主要是用來控制路由的。使用方法是修改 src 目錄下的 main.js 文件
上圖還是比較好理解的救恨，當我們啟動應(yīng)用后贸辈， 訪問? /? 和? /login? 會進入登錄界面， 訪問 /display 會進入展示界面肠槽。另外細心的讀者可能發(fā)現(xiàn) ivew 和 axios 出現(xiàn)比較頻繁擎淤，前者是 css相關(guān)的樣式，后者是 vue 向后端發(fā)送 http 請求的工具秸仙，暫時和基礎(chǔ)的本項目無關(guān)嘴拢。
路由變更的具體方法如下，很方便理解寂纪。mounted?是寫在第二段 <script> 的內(nèi)容席吴，是進入頁面就會執(zhí)行一次的內(nèi)容。我們可以用這個來初始化頁面的數(shù)據(jù)弊攘。
2) 存儲系統(tǒng)抢腐。我早先寫項目的時候，使用的 vuex襟交，參考了vuex學(xué)習(xí)迈倍。這個工具其實就是一個項目內(nèi)的全局變量，你可以在這個全局變量中存入數(shù)據(jù)捣域，這樣整個項目都可以取到啼染。比如說登錄成功后宴合，登陸的用戶名得從登錄組件傳遞到展示組件。而展示組件和登錄組件有沒有父子關(guān)系迹鹅，無法使用 emit 一類的方法卦洽，因此使用全局是比較方便的一種實現(xiàn)方法。但是這種方法有一個缺陷：每次新打開標簽斜棚，都相當于一個新的環(huán)境阀蒂，刷新也相當于一個新的環(huán)境，也就是說弟蚀，當你登錄后蚤霞，只要離開了當前標簽頁，所有信息都會丟失（當然如果你的項目本身要求就是這樣實現(xiàn)的义钉，那可以嘗試使用一下）昧绣。
我正式使用的是 localStorage 。 調(diào)用 SetItem 可以設(shè)置本地變量捶闸，然后調(diào)用 GetItem 可以獲取本地變量夜畴。這個變量是存在于本地的，因此即使關(guān)閉瀏覽器關(guān)閉服務(wù)删壮，數(shù)據(jù)依舊會存在贪绘。我設(shè)置了兩個變量，一個是用戶的名字醉锅，還有一個是登錄狀態(tài)兔簇。
細節(jié)
使用 mounted 在用戶進入具體的頁面時進行一次初始化，如果登錄狀態(tài)為登錄硬耍，則無論輸入什么地址都跳轉(zhuǎn)到當前用戶的展示頁面垄琐。如果狀態(tài)為未登錄，則無論如何跳轉(zhuǎn)到登錄界面经柴。設(shè)置注銷功能狸窘，可以設(shè)置登錄狀態(tài)為 false 且刪掉用戶。這些是實現(xiàn)的細節(jié)坯认。
代碼
有人需要了就放一下翻擒，git折騰了好久沒成，先把我修改過的src里的內(nèi)容上傳牛哺，用了度盤陋气。
