當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用

發布時間：2023/12/4 asp.net 40 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

所使用的技術

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

前端
- 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：

啟動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://<服務器地址>:5000，你就能看到上面的Task List應用。試著新增一些任務項目看是否能夠正確地被添加到Task List中

從本地運行

如果你希望自己下載源代碼，并在自己的環境中直接運行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目錄

使用下面的命令創建可發布編譯：?

1	powershell -F publish-all.ps1

使用下面的命令啟動應用程序：?

1	sudo? docker-compose up

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

在開發環境中運行

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

git
Visual Studio 2017
Visual Studio Code
MongoDB
nodejs（推薦使用LTS版本）
Angular CLI

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

啟動MongoDB

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

按F5執行Apworks.Examples.TaskList

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

npm install

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

ng serve

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

總結

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

參考

《在ASP.NET Core中使用Apworks快速開發數據服務》
《基于.NET Core的Hypertext Application Language（HAL）開發庫》
《在ASP.NET Core中使用Apworks開發數據服務：對HAL的支持》

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。