## 基於blazor實現的一個簡單的TODO List 最近看到一些大佬都開始關注blazor，我也想學習一下。做了一個小的demo，todolist，僅是一個小示例，參考此vue專案的實現[http://www.jq22.com/code1339](http://www.jq22.com/code1339) 先看實現的效果圖 [](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.

``` 新增一個任務 ``` Add to the todo list Add item ``` 這裡我們用了一個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** 因為我們這裡還實現一個功能，就是當勾選（當任務完成時，我們將他移到最下面） ``` Move done items at the end?

``` 一個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 @(item.IsDone ? "check_box" : "check_box_outline_blank") delete
}

``` 迴圈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.