本示例是AntDesign Blazor的入門(mén)示例，在學(xué)習(xí)的同時(shí)分享出來(lái)，以供新手參考。
示例代碼倉(cāng)庫(kù)：https://gitee.com/known/BlazorDemo
1. 學(xué)習(xí)目標(biāo)
- 重構(gòu)項(xiàng)目文件結(jié)構(gòu)
- 添加日期查詢(xún)條件
- 實(shí)現(xiàn)查詢(xún)業(yè)務(wù)邏輯
2. 重構(gòu)項(xiàng)目結(jié)構(gòu)
在實(shí)現(xiàn)列表查詢(xún)條件功能之前，我們先重構(gòu)一下項(xiàng)目結(jié)構(gòu)，創(chuàng)建天氣Model類(lèi)和Service類(lèi)地淀，在Service類(lèi)中處理查詢(xún)業(yè)務(wù)邏輯。
1）在項(xiàng)目中添加Models和Services文件夾
2）在Models中添加天氣的Model類(lèi)岖是，將頁(yè)面中的WeatherForecast類(lèi)剪切過(guò)來(lái)
3）在Services中添加天氣的Service類(lèi)帮毁，用于處理天氣的后端業(yè)務(wù)邏輯实苞，內(nèi)容如下：
- 創(chuàng)建靜態(tài)變量存儲(chǔ)天氣數(shù)據(jù)，正式項(xiàng)目請(qǐng)改成數(shù)據(jù)庫(kù)存儲(chǔ)
- 添加靜態(tài)構(gòu)造函數(shù)烈疚，默認(rèn)初始化預(yù)測(cè)10天的天氣數(shù)據(jù)
- 添加查詢(xún)方法黔牵，根據(jù)日期范圍查詢(xún)天氣數(shù)據(jù)
4）在_Imports.razor中添加Model和Service的命名空間
3. 日期查詢(xún)條件
1）打開(kāi)Weather.razor文件，在Table組件前添加RangePicker組件和Button查詢(xún)按鈕
- 定義一個(gè)
DateTime?[]變量綁定日期查詢(xún)條件 - 添加
RangePicker和Button組件 - 添加查詢(xún)按鈕的點(diǎn)擊事件
2）點(diǎn)擊運(yùn)行按鈕爷肝，查看頁(yè)面效果
4. 查詢(xún)業(yè)務(wù)邏輯
查詢(xún)業(yè)務(wù)主要有如下需求：
- 第一次打開(kāi)頁(yè)面的默認(rèn)查詢(xún)條件
- 輸入日期條件點(diǎn)擊查詢(xún)按鈕進(jìn)行查詢(xún)
1）首先刪除默認(rèn)示例代碼
2）實(shí)現(xiàn)查詢(xún)業(yè)務(wù)邏輯
- 添加
WeatherService實(shí)例 - 添加默認(rèn)查詢(xún)條件猾浦，默認(rèn)查詢(xún)當(dāng)天起5天內(nèi)天氣
- 調(diào)用
WeatherService的查詢(xún)方法返回天氣數(shù)據(jù)
3）點(diǎn)擊運(yùn)行按鈕，查看頁(yè)面效果
5. 總結(jié)
本示例只介紹了一個(gè)簡(jiǎn)單的查詢(xún)功能灯抛，實(shí)現(xiàn)了初次打開(kāi)頁(yè)面時(shí)金赦，添加默認(rèn)日期查詢(xún)條件，點(diǎn)擊查詢(xún)按鈕能根據(jù)日期條件進(jìn)行篩選对嚼。一開(kāi)始我們重構(gòu)項(xiàng)目結(jié)構(gòu)夹抗，這一步主要是為了實(shí)現(xiàn)前端和后端業(yè)務(wù)邏輯分離，也是為后續(xù)增刪改需求做準(zhǔn)備纵竖。
