整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
今日，北京地區(qū)部分網(wǎng)友發(fā)現(xiàn)，自己收到了健康寶彈窗。
哪些人會收到
北京健康寶彈窗
收到北京健康寶彈窗后
該怎么處理？
夏日生活打卡季#
半卷閑書半盞酒
8分鐘前
健康寶彈窗后這樣做解決不了購票問題。
目前正值學(xué)生入學(xué)報到和返校的高峰期。
由于各地陸續(xù)出現(xiàn)確診病例，不少人由于經(jīng)過或者處于風(fēng)險地區(qū)，因此健康寶彈窗并被限制了購票。
如處于低風(fēng)險地區(qū)，可以進(jìn)行申訴解除彈窗。申訴成功的短信有時會在彈窗已經(jīng)解除后才會收到，所以申訴后要增加查詢自己健康寶狀態(tài)的頻率。
當(dāng)發(fā)現(xiàn)自己的彈窗解除后，第一時間登錄12306買票，如果仍是限制購票，在出現(xiàn)的購票失敗的頁面填寫申訴。
第二步進(jìn)入北京12345微信公眾號，選擇綠碼限制購票提交申訴。
最后一步撥打01012345，一般選擇3容易接通，告訴人工客服自己急需買票的原因，請求盡快將個人彈窗已解除信息提交12306。
不需要撥打12306電話，他們沒有權(quán)限解決限制購票問題。
#夏日生活打卡季#
eact 是一個用于構(gòu)建用戶界面的 javascript 庫，是當(dāng)前前端主流框架之一。
這里主要是演示一下，用react搭建一個簡易的登錄頁面。
本地安裝一下VSCode，在沒激活碼使用webstorm的情況下，vscode也是一個很好的選擇，而且vscode有很多插件，合理使用，也能用的很舒服。
準(zhǔn)備一個登錄用的接口，可以是mock接口，也可以隨便用某些后端框架寫一個本地運行。
到工作目錄打開cmd界面，通過命令新建一個工程：
# report-pc是項目名稱，可以隨便寫
npx create-react-app report-pc新建過程中會引入一些必要的包：
新建react工程
配置一下sass環(huán)境，sass是一種預(yù)編譯的css，作用類似于Less。由于React中內(nèi)置了處理sass的配置，所以在創(chuàng)建的React項目中，可以直接使用sass來寫樣式。
安裝用于解析sass的包：
yarn add sass
創(chuàng)建一個全局樣式文件：
index.scss
引用這個樣式文件：
引用index.scss
將一些不會使用的文件和引用刪除：
刪除無用文件和引用
需要安裝路由的包：
yarn add react-router-dom
準(zhǔn)備一個函數(shù)組件Login：
再準(zhǔn)備一個函數(shù)組件Layout：
將準(zhǔn)備的兩個組件進(jìn)行路由配置：
進(jìn)行路由配置
antd是基于 Ant Design 設(shè)計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。antd有很多優(yōu)點，感興趣可以去官網(wǎng)看一下。
先安裝antd：
yarn add antd
引用antd的樣式文件：
引用antd樣式文件
要確認(rèn)引入是否生效，可以直接從官網(wǎng)上找個組件，添加到頁面上，將工程運行起來，可以直觀的看到。
從官網(wǎng)上找一個Button的組件：
官網(wǎng)上的Button組件
將antd的Button添加到頁面上：
引用antd的組件
將工程運行起來：
yarn start
運行起來的界面：
運行后的界面
可以看到Button的樣式是正常的，說明antd樣式文件引用沒問題。
配置別名路徑的目的是通過@符號簡化路徑處理。
create-react-app這個工具創(chuàng)建的工程，將所有工程化配置，都隱藏在了react-scripts包中，所以在項目中看不到任何配置信息。
我們可以通過第三方庫來進(jìn)行修改。先安裝第三方庫：
yarn add -D @craco/craco
創(chuàng)建一個craco的配置文件，并在這個文件中配置路徑別名：
修改package.json中腳本命令：
將原來代碼中的一些引用修改成帶@符的引用：
修改引用
重新啟動工程，在界面上是看不出區(qū)別的。
當(dāng)前在引用的時候，直接打@符號，是不會提示路徑的，為了方便使用，可以在根目錄創(chuàng)建一個配置文件：
編輯jsconifg.json文件
有了這個配置文件，后面在引用時打@符號就會有提示了。
在Login/index.js中創(chuàng)建登錄頁面基礎(chǔ)結(jié)構(gòu)，這里不需要自己一個組件一個組件的寫，直接到antd官網(wǎng)上抄案例：
找案例的源碼
將源碼復(fù)制過來：
粘貼源碼
Form的父組件Card主要是為了將登錄表單以卡片的形式展現(xiàn)。
在Login目錄下創(chuàng)建index.scss文件，指定組件樣式：
編輯login的index.scss文件
引用index.scss文件：
引用index.scss
將需要使用到的圖片資源放到assets目錄中：
根據(jù)實際需要，調(diào)整一下Form表單的結(jié)構(gòu)和樣式。這個validateTrigger參數(shù)是控制提示語觸發(fā)的時機(jī)的：
設(shè)置提示語出現(xiàn)時機(jī)
這個提示語是否觸發(fā)是根據(jù)這個rules的配置決定的：
校驗規(guī)則
rules不僅可以校驗是否有值，也可以校驗填入的值具體格式，比如手機(jī)號、郵箱等。
這個initialValues是控制默認(rèn)值的：
設(shè)置默認(rèn)值
這里使用axios來調(diào)用后端接口，先進(jìn)行安裝：
yarn add axios
創(chuàng)建一個http.js文件：
其中headers是為了解決瀏覽器的cors error進(jìn)行的配置。
為了方便管理，再新建一個index.js文件：
新建index.js文件
這里使用mobx來寫業(yè)務(wù)代碼，先安裝mobx：
yarn add mobx
再安裝mobx的連接工具mobx-react-lite：
yarn add mobx-react-lite
編輯登錄相關(guān)的業(yè)務(wù)代碼：
把所有模塊都做統(tǒng)一處理：
對store做統(tǒng)一處理
在Login組件中進(jìn)行調(diào)用：
調(diào)用mobx
其中message也是antd的組件，是一個頂部小彈窗。useNavigate是一個路由工具，用于登錄成功后跳轉(zhuǎn)到其他頁面，使用時的replace參數(shù)是用于控制不讓用戶通過回退返回到登錄頁面。
創(chuàng)建token.js文件，里面編寫幾個工具函數(shù)，并導(dǎo)出：
token.js
至于上面幾個工具函數(shù)的作用，可以直接從字面意思明白的吧。
到index.js中進(jìn)行統(tǒng)一管理：
index.js統(tǒng)一管理
回到業(yè)務(wù)代碼部分，使用token.js：
使用token.js
將工程運行起來，登錄后就能在本地瀏覽器的Storage中看到這個token值，就像這樣：
Storage中持久化的token
前面已經(jīng)獲取了token，之后需要鑒權(quán)的接口調(diào)用時都需要在請求頭中加上這個token，但是每一次接口調(diào)用都寫一遍這個請求頭，也挺麻煩的。這里就在請求攔截器中完成注入token的邏輯。
調(diào)整http.js中的邏輯：
注入token
創(chuàng)建一個高階函數(shù)組件，在這個組件中實現(xiàn)鑒權(quán)邏輯：
AuthComponent.js
鑒權(quán)的方式很簡單，就是判斷有沒有token，就就正常渲染，沒有就重定向到登錄頁面。
回到App.js，修改路由部分的邏輯：
使用AuthComponent組件
到這里，一個簡單的登錄頁面前端demo就已經(jīng)做好了。沒有什么特別難理解的內(nèi)容，都是一些現(xiàn)成的工具拼裝使用。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
