(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

冬先生 發表於 2021-01-17

Nodejs,這些基礎就不說了,沒有這方面知識的小夥伴可以在園子裡搜尋cnpm yarn等關鍵字,內容繁多,此不贅述,參考連結

一、 簡介

1. Ant Design Pro v5 開箱即用的中臺前端/設計解決方案,沒有用過的小夥伴先擼一遍文件。基於React,需要一定的基礎。
2. Ant Design 配套元件,另外Antd還設計了超級元件 ProComponents,看著有點麻煩,不過我猜用起來應該很爽。💪
3. v5是預覽版預設ts,目前不可選js版本。前端ts是一個趨勢,之前沒接觸過,一直用的v4js版本,這次拼了,現學現賣(很菜的那種,勿噴😂)。

二、 環境

1.按照官方文件使用umi腳手架建立專案,cmd到資料夾,執行命令:yarn create umi,選ant-design-pro,選v5版本,噼裡啪啦一頓操作猛如虎,效果如下。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

2.新建一個終端,執行命令:yarn,噼裡啪啦又一頓操作(安裝依賴包)。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

3.執行命令:yarn start,噼裡啪啦再一頓操作(啟動專案)。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建
(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

三、 登入

假設你已經擼了一遍文件,但我依然從一個新手角度出發(其實我也不熟😂),截圖部分程式碼,仔細看配文,後臺介面在下一篇。
專案跑起來登入進去,介面、資料展示都是Mock完成的,文件裡說了。接下來我們們小試牛刀,實現登入功能,看看都需要改哪裡。

1.常規思路,大家都是先找到登入頁,但是,需要稍微講一下,src->app.tsx,這個檔案相當於是前臺程式的入口,先到這裡判斷了登入狀態,沒有登入使用者資訊跳轉登入頁。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

2.然後再順藤摸瓜(仔細看文件話目錄結構裡有😂)找到這個登入頁,user->login->index.tsx,有個表單,handleSubmit就是登入按鈕事件,請求了fakeAccountLogin方法。返回值是我後臺自定義類,所以這裡改為了msg.responseState。稍加修改,後臺暫時沒資料,把Mock裡資料直接拿來用。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

3.修改登入fakeAccountLogin,services->login.ts,修改url為後臺對應方法,自定義接受引數使用者名稱account,密碼password。注意介面地址不能跟Mock裡的一樣。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

4.找到退出登入的介面,退出時把使用者資訊刪除。

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

5.呼叫後臺介面是需要配置後臺地址,config->proxy.ts,這是前臺設定代理的地方,修改dev請求地址,因為前臺執行預設是dev。需要注意的是,這是本地除錯的配置檔案,釋出後就會失效,部署伺服器時我們會用Nginx,如何安裝使用請看上一篇,如何部署請看[還沒寫呢。。。😂]

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

6.效果圖

(二)React Ant Design Pro + .Net5 WebApi:前端環境搭建

相關文章