（二）React Ant Design Pro + .Net5 WebApi：前端環境搭建

Nodejs，這些基礎就不說了，沒有這方面知識的小夥伴能夠在園子裏搜索cnpm yarn等關鍵字，內容繁多，此不贅述，參考連接

1、 簡介

1. Ant Design Pro v5 開箱即用的中臺前端/設計解決方案，沒有用過的小夥伴先擼一遍文檔。基於React，須要必定的基礎。

2. Ant Design 配套組件，另外Antd還設計了超級組件 ProComponents，看着有點麻煩，不過我猜用起來應該很爽。💪

3. v5是預覽版默認ts，目前不可選js版本。前端ts是一個趨勢，以前沒接觸過，一直用的v4js版本，此次拼了，現學現賣（很菜的那種，勿噴😂）。

2、 環境

1.按照官方文檔使用umi腳手架建立項目，cmd到文件夾，運行命令：yarn create umi，選ant-design-pro，選v5版本，噼裏啪啦一頓操做猛如虎，效果以下。

2.新建一個終端，運行命令：yarn，噼裏啪啦又一頓操做（安裝依賴包）。

3.運行命令：yarn start，噼裏啪啦再一頓操做（啓動項目）。

3、 登陸

假設你已經擼了一遍文檔，但我依然從一個新手角度出發（其實我也不熟😂），截圖部分代碼，仔細看配文，後臺接口在下一篇。
項目跑起來登陸進去，接口、數據展現都是Mock完成的，文檔裏說了。接下來我們小試牛刀，實現登陸功能，看看都須要改哪裏。

1.常規思路，你們都是先找到登陸頁，可是，須要稍微講一下，src->app.tsx，這個文件至關因而前臺程序的入口，先到這裏判斷了登陸狀態，沒有登陸用戶信息跳轉登陸頁。

2.而後再順藤摸瓜(仔細看文檔話目錄結構裏有😂)找到這個登陸頁，user->login->index.tsx，有個表單，handleSubmit就是登陸按鈕事件，請求了fakeAccountLogin方法。返回值是我後臺自定義類，因此這裏改成了msg.responseState。稍加修改，後臺暫時沒數據，把Mock裏數據直接拿來用。

3.修改登陸fakeAccountLogin，services->login.ts，修改url爲後臺對應方法，自定義接受參數用戶名account，密碼password。注意接口地址不能跟Mock裏的同樣。

4.找到退出登陸的接口，退出時把用戶信息刪除。

5.調用後臺接口是須要配置後臺地址，config->proxy.ts，這是前臺設置代理的地方，修改dev請求地址，由於前臺運行默認是dev。須要注意的是，這是本地調試的配置文件，發佈後就會失效，部署服務器時咱們會用Nginx，如何安裝使用請看上一篇，如何部署請看[還沒寫呢。。。😂]

6.效果圖