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


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版本,噼里啪啦一頓操作猛如虎,效果如下。

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

3.運行命令:yarn start,噼里啪啦再一頓操作(啟動項目)。


三、 登錄

假設你已經擼了一遍文檔,但我依然從一個新手角度出發(其實我也不熟😂),截圖部分代碼,仔細看配文,后台接口在下一篇。
項目跑起來登錄進去,接口、數據展示都是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.效果圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM