夏日生活打卡季#

半卷閑書半盞酒

8分鐘前

健康寶彈窗后這樣做解決不了購(gòu)票問(wèn)題。

目前正值學(xué)生入學(xué)報(bào)到和返校的高峰期。

由于各地陸續(xù)出現(xiàn)確診病例，不少人由于經(jīng)過(guò)或者處于風(fēng)險(xiǎn)地區(qū)，因此健康寶彈窗并被限制了購(gòu)票。

如處于低風(fēng)險(xiǎn)地區(qū)，可以進(jìn)行申訴解除彈窗。申訴成功的短信有時(shí)會(huì)在彈窗已經(jīng)解除后才會(huì)收到，所以申訴后要增加查詢自己健康寶狀態(tài)的頻率。

當(dāng)發(fā)現(xiàn)自己的彈窗解除后，第一時(shí)間登錄12306買票，如果仍是限制購(gòu)票，在出現(xiàn)的購(gòu)票失敗的頁(yè)面填寫申訴。
第二步進(jìn)入北京12345微信公眾號(hào)，選擇綠碼限制購(gòu)票提交申訴。

最后一步撥打01012345，一般選擇3容易接通，告訴人工客服自己急需買票的原因，請(qǐng)求盡快將個(gè)人彈窗已解除信息提交12306。
不需要撥打12306電話，他們沒(méi)有權(quán)限解決限制購(gòu)票問(wèn)題。

#夏日生活打卡季#

eact 是一個(gè)用于構(gòu)建用戶界面的 javascript 庫(kù)，是當(dāng)前前端主流框架之一。

這里主要是演示一下，用react搭建一個(gè)簡(jiǎn)易的登錄頁(yè)面。

演示準(zhǔn)備

本地安裝一下VSCode，在沒(méi)激活碼使用webstorm的情況下，vscode也是一個(gè)很好的選擇，而且vscode有很多插件，合理使用，也能用的很舒服。

準(zhǔn)備一個(gè)登錄用的接口，可以是mock接口，也可以隨便用某些后端框架寫一個(gè)本地運(yùn)行。

實(shí)操演示-創(chuàng)建工程

到工作目錄打開cmd界面，通過(guò)命令新建一個(gè)工程：

# report-pc是項(xiàng)目名稱，可以隨便寫
npx create-react-app report-pc

新建過(guò)程中會(huì)引入一些必要的包：

實(shí)操演示-配置sass環(huán)境

配置一下sass環(huán)境，sass是一種預(yù)編譯的css，作用類似于Less。由于React中內(nèi)置了處理sass的配置，所以在創(chuàng)建的React項(xiàng)目中，可以直接使用sass來(lái)寫樣式。

安裝用于解析sass的包：

創(chuàng)建一個(gè)全局樣式文件：

引用這個(gè)樣式文件：

將一些不會(huì)使用的文件和引用刪除：

實(shí)操演示-配置基礎(chǔ)路由

需要安裝路由的包：

準(zhǔn)備一個(gè)函數(shù)組件Login：

再準(zhǔn)備一個(gè)函數(shù)組件Layout：

將準(zhǔn)備的兩個(gè)組件進(jìn)行路由配置：

實(shí)操演示-Ant Design的引入

antd是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。antd有很多優(yōu)點(diǎn)，感興趣可以去官網(wǎng)看一下。

先安裝antd：

引用antd的樣式文件：

要確認(rèn)引入是否生效，可以直接從官網(wǎng)上找個(gè)組件，添加到頁(yè)面上，將工程運(yùn)行起來(lái)，可以直觀的看到。

從官網(wǎng)上找一個(gè)Button的組件：

將antd的Button添加到頁(yè)面上：

將工程運(yùn)行起來(lái)：

運(yùn)行起來(lái)的界面：

可以看到Button的樣式是正常的，說(shuō)明antd樣式文件引用沒(méi)問(wèn)題。

實(shí)操演示-配置別名路徑

配置別名路徑的目的是通過(guò)@符號(hào)簡(jiǎn)化路徑處理。

create-react-app這個(gè)工具創(chuàng)建的工程，將所有工程化配置，都隱藏在了react-scripts包中，所以在項(xiàng)目中看不到任何配置信息。

我們可以通過(guò)第三方庫(kù)來(lái)進(jìn)行修改。先安裝第三方庫(kù)：

創(chuàng)建一個(gè)craco的配置文件，并在這個(gè)文件中配置路徑別名：

修改package.json中腳本命令：

將原來(lái)代碼中的一些引用修改成帶@符的引用：

重新啟動(dòng)工程，在界面上是看不出區(qū)別的。

當(dāng)前在引用的時(shí)候，直接打@符號(hào)，是不會(huì)提示路徑的，為了方便使用，可以在根目錄創(chuàng)建一個(gè)配置文件：

有了這個(gè)配置文件，后面在引用時(shí)打@符號(hào)就會(huì)有提示了。

實(shí)操演示-搭建靜態(tài)結(jié)構(gòu)

在Login/index.js中創(chuàng)建登錄頁(yè)面基礎(chǔ)結(jié)構(gòu)，這里不需要自己一個(gè)組件一個(gè)組件的寫，直接到antd官網(wǎng)上抄案例：

將源碼復(fù)制過(guò)來(lái)：

Form的父組件Card主要是為了將登錄表單以卡片的形式展現(xiàn)。

在Login目錄下創(chuàng)建index.scss文件，指定組件樣式：

引用index.scss文件：

將需要使用到的圖片資源放到assets目錄中：

根據(jù)實(shí)際需要，調(diào)整一下Form表單的結(jié)構(gòu)和樣式。這個(gè)validateTrigger參數(shù)是控制提示語(yǔ)觸發(fā)的時(shí)機(jī)的：

這個(gè)提示語(yǔ)是否觸發(fā)是根據(jù)這個(gè)rules的配置決定的：

rules不僅可以校驗(yàn)是否有值，也可以校驗(yàn)填入的值具體格式，比如手機(jī)號(hào)、郵箱等。

這個(gè)initialValues是控制默認(rèn)值的：

實(shí)操演示-后端交互封裝

這里使用axios來(lái)調(diào)用后端接口，先進(jìn)行安裝：

創(chuàng)建一個(gè)http.js文件：

其中headers是為了解決瀏覽器的cors error進(jìn)行的配置。

為了方便管理，再新建一個(gè)index.js文件：

實(shí)操演示-編寫業(yè)務(wù)代碼

這里使用mobx來(lái)寫業(yè)務(wù)代碼，先安裝mobx：

再安裝mobx的連接工具mobx-react-lite：

編輯登錄相關(guān)的業(yè)務(wù)代碼：

把所有模塊都做統(tǒng)一處理：

實(shí)操演示-組件中調(diào)用mobx

在Login組件中進(jìn)行調(diào)用：

其中message也是antd的組件，是一個(gè)頂部小彈窗。useNavigate是一個(gè)路由工具，用于登錄成功后跳轉(zhuǎn)到其他頁(yè)面，使用時(shí)的replace參數(shù)是用于控制不讓用戶通過(guò)回退返回到登錄頁(yè)面。

實(shí)操演示-token持久化

創(chuàng)建token.js文件，里面編寫幾個(gè)工具函數(shù)，并導(dǎo)出：

至于上面幾個(gè)工具函數(shù)的作用，可以直接從字面意思明白的吧。

到index.js中進(jìn)行統(tǒng)一管理：

回到業(yè)務(wù)代碼部分，使用token.js：

將工程運(yùn)行起來(lái)，登錄后就能在本地瀏覽器的Storage中看到這個(gè)token值，就像這樣：

實(shí)操演示-請(qǐng)求攔截器注入token

前面已經(jīng)獲取了token，之后需要鑒權(quán)的接口調(diào)用時(shí)都需要在請(qǐng)求頭中加上這個(gè)token，但是每一次接口調(diào)用都寫一遍這個(gè)請(qǐng)求頭，也挺麻煩的。這里就在請(qǐng)求攔截器中完成注入token的邏輯。

調(diào)整http.js中的邏輯：

實(shí)操演示-路由鑒權(quán)實(shí)現(xiàn)

創(chuàng)建一個(gè)高階函數(shù)組件，在這個(gè)組件中實(shí)現(xiàn)鑒權(quán)邏輯：

鑒權(quán)的方式很簡(jiǎn)單，就是判斷有沒(méi)有token，就就正常渲染，沒(méi)有就重定向到登錄頁(yè)面。

回到App.js，修改路由部分的邏輯：

總結(jié)

到這里，一個(gè)簡(jiǎn)單的登錄頁(yè)面前端demo就已經(jīng)做好了。沒(méi)有什么特別難理解的內(nèi)容，都是一些現(xiàn)成的工具拼裝使用。