最近我为我自己的应用开发框架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框架案例应用相关推荐

ASP.NET Core开发-使用Nancy框架
Nancy简介 Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保持尽可能 ...
送福利 | 送书5本《ASP.NET Core项目开发实战入门》带你走进ASP.NET Core开发
<ASP.NET Core项目开发实战入门>从基础到实际项目开发部署带你走进ASP.NET Core开发. ASP.NET Core项目开发实战入门是基于ASP.NET Core 3.1 ...
ASP.NET Core的身份认证框架IdentityServer4（4）- 支持的规范
原文:ASP.NET Core的身份认证框架IdentityServer4(4)- 支持的规范 IdentityServer实现以下规范: OpenID Connect OpenID Connect ...
asp开发工具_VSCode搭建完美的asp.net core开发环境，看完这篇就够了
引言由于.net core的全面跨平台,我也在之前的一篇文章中介绍了如何在深度Deepin操作系统上安装并搭建.net core的开发环境,当时介绍的是安装.net core和使用Rider.net ...
基于ASP.Net Core开发的一套通用后台框架
基于ASP.Net Core开发一套通用后台框架写在前面这是本人在学习的过程中搭建学习的框架,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 知其然,知其所以然,并非重 ...
ASP.NET Core的身份认证框架IdentityServer4（3）-术语的解释
ASP.NET Core的身份认证框架IdentityServer4(3)-术语的解释原文:ASP.NET Core的身份认证框架IdentityServer4(3)-术语的解释 IdentityS ...
asp.net core 集成 log4net 日志框架
asp.net core 集成 log4net 日志框架 Intro 在 asp.net core 中有些日志我们可能想输出到数据库或文件或elasticsearch等,如果不自己去实现一个 Logg ...
dotnet watch+vs code提升asp.net core开发效率
在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp.net core 2.0的今天,部分用法已经不太一样,所以就再写一篇文 ...
基于Citus和ASP.NET Core开发多租户应用
Citus是基于PsotgreSQL的扩展,用于切分PsotgreSQL的数据,非常简单地实现数据"切片(sharp)".如果不使用Citus,则需要开发者自己实现分布式数据访问层 ...

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