使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core開發的Apworks框架案例應用:Task List


最近我為我自己的應用開發框架Apworks設計了一套案例應用程序,並以Apache 2.0開源,開源地址是:https://github.com/daxnet/apworks-examples,目的是為了讓大家更為方便地學習和使用.NET Core、最新的前端開發框架Angular,以及Apworks開發框架。今后會有越來越多的案例代碼加入到這個系列中,以更好地展示Apworks框架在基於.NET企業應用系統開發中的應用。今天,我向大家介紹這套代碼的第一個案例應用:Task List

Task List業務邏輯比較簡單,就是幫助用戶維護一張任務列表(TO-DO List),用戶可以根據目前的情況來勾選已經完成的任務,以了解還有哪些事情沒有做完。在AngularJS之前的版本中,官方就推出過類似的案例。今天,我使用最新的技術重新實現了這個案例,它有着全新的用戶體驗:

TaskListScreenshot

所使用的技術

我們攻城獅最關心的就是一個案例所使用的技術。這里大致羅列一下,以便大家能夠根據自己的實際情況酌情考慮是否能夠從本案例中學到一些知識。

  • 前端
    • Angular 4
    • Bootstrap 4
    • TypeScript 2.3
    • Angular Notifications
  • 后端
    • ASP.NET Core Web API
    • Apworks框架
      • MongoDB的倉儲實現
      • Hypertext Application Language(HAL)以及由HAL原生支持的服務端分頁(之前有朋友問,使用HAL有什么好處。這里就體現出來了:分頁信息和分頁鏈接直接包含在服務返回中,客戶端只需要簡單的綁定就行了)
  • 運行環境
    • Docker
    • Docker Compose

如果你對上面的任何一項感興趣,你都可以下載了解本案例。無論是前端還是后端,本案例的實現都是非常簡單的,能夠讓初學者很快速地入門。

運行Task List案例

Apworks Examples項目提供了三種方式運行Task List案例:從Docker運行,從本地運行,以及在開發環境中運行。

從Docker運行

從Docker運行Task List案例是非常容易的,你只需要確保你的電腦安裝了Docker。然后,使用以下步驟運行Task List:

  1. 啟動MongoDB容器:
    sudo docker run -d -P --name mongo mongo
  2. 啟動Task List容器:
    sudo docker run -d -p 5000:5000 --link mongo daxnet/apworks-examples-tasklist
  3. 打開瀏覽器,在地址欄輸入:http://<服務器地址>:5000,你就能看到上面的Task List應用。試着新增一些任務項目看是否能夠正確地被添加到Task List中

從本地運行

如果你希望自己下載源代碼,並在自己的環境中直接運行Task List,首先需要確保你的電腦滿足以下條件,或者安裝了以下軟件:

然后,使用以下步驟運行Task List:

  1. 克隆代碼庫
    git clone https://github.com/daxnet/apworks-examples
  2. 使用cd命令切換到src/TaskList目錄
  3. 使用下面的命令創建可發布編譯:
    powershell -F publish-all.ps1
  4. 使用下面的命令啟動應用程序:
    sudo docker-compose up
  5. 打開瀏覽器,在地址欄輸入:http://<服務器地址>:5000,你就能看到上面的Task List應用。試着新增一些任務項目看是否能夠正確地被添加到Task List中

在開發環境中運行

如果你希望使用開發工具打開、編譯並運行本案例,你需要安裝:

  • git
  • Visual Studio 2017
  • Visual Studio Code
  • MongoDB
  • nodejs(推薦使用LTS版本)
  • Angular CLI

然后,執行下面的步驟以在開發環境中運行本案例:

  1. 啟動MongoDB
  2. 在Visual Studio 2017中打開Apworks.Examples.sln
  3. 按F5執行Apworks.Examples.TaskList
  4. 在命令提示符下,使用cd命令進入src/TaskList/client目錄,然后使用以下命令更新依賴庫:
    npm install
  5. 在client目錄下,使用以下命令啟動Task List應用程序:
    ng serve
  6. 打開瀏覽器,在地址欄輸入:http://localhost:4200,你就能看到上面的Task List應用。試着新增一些任務項目看是否能夠正確地被添加到Task List中

總結

怎么樣?是不是很簡單?今后還將會有更多的案例加入到這個項目中,下一步將添加基於Entity Framework Core的倉儲實現案例,屆時我還會使用Apworks框架重寫我之前已經實現的we-text微服務,更為完善地演示微服務、CQRS、雲架構在企業系統設計中的應用。

參考


免責聲明!

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



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