1. 程式人生 > >ASP.NET Core Blazor WebAssembly實現一個簡單的TODO List

ASP.NET Core Blazor WebAssembly實現一個簡單的TODO List

## 基於blazor實現的一個簡單的TODO List 最近看到一些大佬都開始關注blazor,我也想學習一下。做了一個小的demo,todolist,僅是一個小示例,參考此vue專案的實現[http://www.jq22.com/code1339](http://www.jq22.com/code1339) 先看實現的效果圖 [![](https://pic.downk.cc/item/5edb68bec2a9a83be5a8ef20.gif)](https://pic.downk.cc/item/5edb68bec2a9a83be5a8ef20.gif) 不BB,直接可以去看 ### 原始碼與預覽地址 - 示例地址 [http://baimocore.cn:8081/](http://baimocore.cn:8081/) - 原始碼地址 [BlazorAppTodoList](https://github.com/luoyunchong/dotnetcore-examples/tree/master/blazor/BlazorAppTodoList) ### 原始碼介紹 我們這裡刪除了預設的一些原始碼。只保留最簡單的結構,在Pages/Index.razor中。 @code程式碼結構中寫如下內容 1. 建立一個類,裡面包含 id,label,isdone三個屬性值。 ``` public class TodoItem { public TodoItem () { } public TodoItem (int id, string label, bool isDone) { Id = id; Label = label; IsDone = isDone; } public int Id { get; set; } public string Label { get; set; } public bool IsDone { get; set; } } ``` 2. 我們可以通過override重寫初始化,並給Todos設定一些資料。 ``` private IList Todos; private int id = 0; protected override void OnInitialized () { Todos = new List () { new TodoItem (++id, "Learn Blazor", false), new TodoItem (++id, "Code a todo list", false), new TodoItem (++id, "Learn something else", false) }; } ``` 展示還有多少未完成的任務 ```

Todo List(@Todos.Count(todo => !todo.IsDone)) Get things done, one item at a time.

``` 當任務沒有時,我們展示預設效果,提示使用者無任務 ```

Your todo list is empty.

``` 新增一個任務 ``` ``` 這裡我們用了一個Label變數,一個onclick事件。 ``` private string Label; private void AddItem() { if (!string.IsNullOrWhiteSpace(Label)) { Todos.Add (new TodoItem { Id = ++id, Label = Label }); Label = string.Empty; } this.SortByStatus(); } ``` **this.SortByStatus** 因為我們這裡還實現一個功能,就是當勾選(當任務完成時,我們將他移到最下面) ```
``` 一個IsActive的變數,用於指示當前checkbox的樣式,是否開啟已完成的任務移動到最下面。當勾選時,改變IsActive的值。並呼叫排序的功能。 ``` private bool IsActive = false; private void ActiveChanged() { this.IsActive = !this.IsActive; this.SortByStatus(); } private void SortByStatus() { if (this.IsActive) { Todos = Todos.OrderBy(r =>
r.IsDone).ThenByDescending(r => r.Id).ToList(); } else { Todos = Todos.OrderByDescending(r => r.Id).ToList(); } } ``` 對於列表的展示我們使用如下ul li @for實現 ```
    @foreach (var item in Todos) {
  • @item.Label
  • }
``` 迴圈Todos,然後,根據item.IsDone,改變li的樣式,從而實現一箇中劃線的功能,二個按鈕的功能,一個是勾選任務表示此任務已完成,另一個是刪除此任務。同理,我們仍然通過IsDone來標識完成任務的圖示,標題等。 - 任務設定已完成/設定為未完成: @onclick呼叫方法MarkAsDoneOrUndone,並將當前的一行記錄item傳給方法,需要使用一個匿名函式呼叫@code中的方法,將isDone取相反的值,並重新排序。 ``` private void MarkAsDoneOrUndone(TodoItem item) { item.IsDone = !item.IsDone; this.SortByStatus(); } ``` - 刪除一個任務,同理,使用匿名函式,DeleteItemFromList直接通過IList的方法Remove刪除一個物件,並排序。 ``` private void DeleteItemFromList(TodoItem item) { Todos.Remove(item); this.SortByStatus(); } ``` 當然,我們可以 在ul,外包裹一層,根據Count判斷有沒有任務,從而顯示這個列表。 ``` 0?"":"none");">
    xxx
``` 其他的樣式與圖示,請看最上面的原始碼wwwroot/css目錄獲取。 ### deploy(部署) - 有興趣的可以看官網 [https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/?view=aspnetcore-3.1&tabs=visual-studio](https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/?view=aspnetcore-3.1&tabs=visual-studio) 在專案根目錄執行如下命令 ``` dotnet publish -c Release ``` 我們就能得到一個釋出包,他的位置在 **(BlazorAppTodoList\bin\Release\netstandard2.1\publish)** ,我們把他複製到伺服器上,這裡我放到/var/www/todolilst目錄中。 它相當於一個靜態檔案,你可以將他部署到任何一個web伺服器上。 這裡我們把他放到nginx中,並在目錄/etc/nginx/conf.d/ 新建一個檔案 todolist.conf,然後放入如下內容。 ``` server { listen 8081; location / { root /var/www/todolist/wwwroot; try_files $uri $uri/ /index.html =404; } } ``` 記得在etc/nginx/nginx.conf中配置gzip壓縮。 ``` gzip on; gzip_min_length 5k; #gzip壓縮最小檔案大小,超出進行壓縮(自行調節) gzip_buffers 4 16k; #buffer 不用修改 gzip_comp_level 8; #壓縮級別:1-10,數字越大壓縮的越好,時間也越長 gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/octet-stream; # 壓縮檔案型別 gzip_vary on; # 和http頭有關係,加個vary頭,給代理伺服器用的,有的瀏覽器支援壓縮,有的不支援,所以避免浪費不支援的也壓縮,所以根據客戶端的HTTP頭來判斷,是否需要壓縮 ``` 我遇到dll,wasm,字尾的檔案壓縮無效。因為gzip_types ,沒有配置他們的Content-Type。我們在瀏覽器中找到響應頭**Content-Type: application/octet-stream** 最後執行 ``` nginx -t nginx -s reload ``` ### 開啟網站看效果 #### [http://baimocore.cn:8081](http://baimocore.