使用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之前的版本中,官方就推出过类似的案例。今天,我使用最新的技术重新实现了这个案例,它有着全新的用户体验:
所使用的技术
我们攻城狮最关心的就是一个案例所使用的技术。这里大致罗列一下,以便大家能够根据自己的实际情况酌情考虑是否能够从本案例中学到一些知识。
- 前端
- 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容器:
sudo docker run -d -P --name mongo mongo
- 启动Task List容器:
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:
- 克隆代码库
git clone https://github.com/daxnet/apworks-examples
- 使用cd命令切换到src/TaskList目录
- 使用下面的命令创建可发布编译:
powershell -F publish-all.ps1
- 使用下面的命令启动应用程序:
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的支持》
使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用:Task List的更多相关文章
- ASP.NET Core开发-使用Nancy框架
Nancy简介 Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保持尽可能 ...
- 在 Mac OS 上使用 TypeScript 编写 ASP.NET Core 1.0 应用
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
- Angular 2的HTML5 pushState在ASP.NET Core上的解决思路
Angular 2的HTML5 pushState在ASP.NET Core上的解决思路 正如Angular 2在Routing & Navigation中所提及的那样,Angular 2是推 ...
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...
- Blazor——Asp.net core的新前端框架
原文:Blazor--Asp.net core的新前端框架 Blazor是微软在Asp.net core 3.0中推出的一个前端MVVM模型,它可以利用Razor页面引擎和C#作为脚本语言来构建WEB ...
- 《ASP.NET Core项目开发实战入门》带你走进ASP.NET Core开发
<ASP.NET Core项目开发实战入门>从基础到实际项目开发部署带你走进ASP.NET Core开发. ASP.NET Core项目开发实战入门是基于ASP.NET Core 3.1 ...
- [转]ASP.NET Core 开发-Logging 使用NLog 写日志文件
本文转自:http://www.cnblogs.com/Leo_wl/p/5561812.html ASP.NET Core 开发-Logging 使用NLog 写日志文件. NLog 可以适用于 . ...
- ASP.NET Core 开发-中间件(Middleware)
ASP.NET Core开发,开发并使用中间件(Middleware). 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件. 每个组件选择是否传递给管道中的下一个组件的请求,并能之前和下一组 ...
- ASP.NET Core开发-Docker部署运行
ASP.NET Core开发Docker部署,.NET Core支持Docker 部署运行.我们将ASP.NET Core 部署在Docker 上运行. 大家可能都见识过Docker ,今天我们就详细 ...
随机推荐
- 解决HTML textarea 标签出现大量空格
就是什么内容也不写,然后前面却有一堆空格 原因是 textarea标签换行了 <textarea cols=" id="serve_content" name=&q ...
- cuda编程学习3——VectorSum
这个程序是把两个向量相加 add<<<N,1>>>(dev_a,dev_b,dev_c);//<N,1>,第一个参数N代表block的数量,第二个参数1 ...
- 如何用photoshop把一张图片分割成几张图片呢?
今天情人节,祝大家节日快乐!朋友发来一张照片,我发现这张照片是几张照片组合起来的,是不是感觉每一张都是萌萌哒呢?为了体现单张的独特性,现在我要把它切分成单张,使用Photoshop CS5该怎么弄呢? ...
- iOS开发之视频播放
1.如何播放视频 iOS提供了MPMoviePlayerController.MPMoviePlayerViewController两个类,可以用来轻松播放视频和网络流媒体\网络音频. 提示:网络音频 ...
- iOS开发之数据存储之NSData
1.概述 使用archiveRootObject:toFile:方法可以将一个对象直接写入到一个文件中,但有时候可能想将多个对象写入到同一个文件中,那么就要使用NSData来进行归档对象. NSDat ...
- 【干货分享】sketch 前端开发常用技巧总结
sketch横空出世,移动端的应用越来越多的采用sketch来做,前端开发也需要掌握更多sketch技巧. (1) sketch导出图片时,如何快速选择多个图层? 1. 在画布上任一点单击并拖拽出一个 ...
- English Learn
English Learn 一直决定好好学习英语.越来越觉得英语的重要性,解决日常问题.学习新东西.使用google时都经常碰到英文.所以觉得在blog上记录些学习英语的文章,也算是对自己的一种监督. ...
- 简单实用的JQuery弹出层
效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...
- javaWEB与Session
HttpSession(*****)1. HttpSession概述 * HttpSession是由JavaWeb提供的,用来会话跟踪的类.session是服务器端对象,保存在服务器端!!! * ...
- 核心模块Path
核心模块Path 作用:用于帮助程序员来操作硬盘上的路径. 核心模块注意点:当引用核心模块的时候直接require('模块名'),不需要加任何路径或者后缀. Path中的常用API: dirname( ...