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

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

所使用的技術(shù)

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

• 前端

• • Angular 4

  • Bootstrap 4

  • TypeScript 2.3

  • Angular Notifications

• 后端

• • ASP.NET Core Web API

  • Apworks框架

  • • MongoDB的倉儲實現(xiàn)

    • Hypertext Application Language（HAL）以及由HAL原生支持的服務(wù)端分頁（之前有朋友問，使用HAL有什么好處。這里就體現(xiàn)出來了：分頁信息和分頁鏈接直接包含在服務(wù)返回中，客戶端只需要簡單的綁定就行了）

• 運行環(huán)境

• • Docker

  • Docker Compose

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

運行Task List案例

Apworks Examples項目提供了三種方式運行Task List案例：從Docker運行，從本地運行，以及在開發(fā)環(huán)境中運行。

從Docker運行

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

啟動MongoDB容器：?

1	sudo? docker run -d -P --name mongo mongo

啟動Task List容器：?

1	sudo? docker run -d -p 5000:5000 --link mongo daxnet /apworks-examples-tasklist

打開瀏覽器，在地址欄輸入：http://<服務(wù)器地址>:5000，你就能看到上面的Task List應(yīng)用。試著新增一些任務(wù)項目看是否能夠正確地被添加到Task List中

從本地運行

如果你希望自己下載源代碼，并在自己的環(huán)境中直接運行Task List，首先需要確保你的電腦滿足以下條件，或者安裝了以下軟件：

• git

• Docker

• Docker Compose（如果你使用了Windows 10，并安裝了Docker for Windows，則無需額外安裝Docker Compose）

• Powershell for Linux（如果你使用的是Windows 10，則無需安裝）

• .NET Core SDK

• nodejs（推薦使用LTS版本）

• Angular CLI

然后，使用以下步驟運行Task List：

克隆代碼庫?

1	git clone https: //github .com /daxnet/apworks-examples

使用cd命令切換到src/TaskList目錄

使用下面的命令創(chuàng)建可發(fā)布編譯：?

1	powershell -F publish-all.ps1

使用下面的命令啟動應(yīng)用程序：?

1	sudo? docker-compose up

打開瀏覽器，在地址欄輸入：http://<服務(wù)器地址>:5000，你就能看到上面的Task List應(yīng)用。試著新增一些任務(wù)項目看是否能夠正確地被添加到Task List中

在開發(fā)環(huán)境中運行

如果你希望使用開發(fā)工具打開、編譯并運行本案例，你需要安裝：

• git

• Visual Studio 2017

• Visual Studio Code

• MongoDB

• nodejs（推薦使用LTS版本）

• Angular CLI

然后，執(zhí)行下面的步驟以在開發(fā)環(huán)境中運行本案例：

啟動MongoDB

在Visual Studio 2017中打開Apworks.Examples.sln

按F5執(zhí)行Apworks.Examples.TaskList

在命令提示符下，使用cd命令進入src/TaskList/client目錄，然后使用以下命令更新依賴庫：?

npm install

在client目錄下，使用以下命令啟動Task List應(yīng)用程序：?

ng serve

打開瀏覽器，在地址欄輸入：http://localhost:4200，你就能看到上面的Task List應(yīng)用。試著新增一些任務(wù)項目看是否能夠正確地被添加到Task List中

總結(jié)

怎么樣？是不是很簡單？今后還將會有更多的案例加入到這個項目中，下一步將添加基于Entity Framework Core的倉儲實現(xiàn)案例，屆時我還會使用Apworks框架重寫我之前已經(jīng)實現(xiàn)的we-text微服務(wù)，更為完善地演示微服務(wù)、CQRS、云架構(gòu)在企業(yè)系統(tǒng)設(shè)計中的應(yīng)用。

參考

• 《在ASP.NET Core中使用Apworks快速開發(fā)數(shù)據(jù)服務(wù)》

• 《基于.NET Core的Hypertext Application Language（HAL）開發(fā)庫》

• 《在ASP.NET Core中使用Apworks開發(fā)數(shù)據(jù)服務(wù)：對HAL的支持》

原文地址：http://www.cnblogs.com/daxnet/p/6822054.html

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關(guān)注

總結(jié)

以上是生活随笔為你收集整理的使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。