使用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:

  1. 启动MongoDB容器: 

    1
    sudo  docker run -d -P --name mongo mongo
  2. 启动Task List容器: 

    1
    sudo  docker run -d -p 5000:5000 --link mongo daxnet /apworks-examples-tasklist
  3. 打开浏览器,在地址栏输入: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. 克隆代码库 

    1
    git clone https: //github .com /daxnet/apworks-examples
  2. 使用cd命令切换到src/TaskList目录

  3. 使用下面的命令创建可发布编译: 

    1
    powershell -F publish-all.ps1
  4. 使用下面的命令启动应用程序: 

    1
    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、云架构在企业系统设计中的应用。

参考

  • 《在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跨平台或扫描二维码关注

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325648.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#使用集合组织相关数据

一、为什么使用集合&#xff1f; 数组的长度是固定的&#xff0c;对数组中的元素进行动态添加和删除的时候很麻烦。集合可以更好的进行对元素添加和删除 二、ArrayList集合&#xff1a; 1.类似于数组&#xff0c;但是可以直观的动态维护。 2.位于System.Collections命名空间里面…

IntelliJ IDEA 最常用配置详细图解,新手入门必看

转载自 IntelliJ IDEA 最常用配置详细图解&#xff0c;新手入门必看 刚刚使用IntelliJ IDEA 编辑器的时候&#xff0c;会有很多设置&#xff0c;会方便以后的开发&#xff0c;磨刀不误砍柴工。 比如&#xff1a;设置文件字体大小&#xff0c;代码自动完成提示&#xff0c;版…

MyBatis(延迟加载 缓存)

mybatis目录 一对一延迟加载 1.在SqlMapConfig.xml中配置setting标签 2.在IAccoutDao.xml中配置association标签 3.测试类 4.成功运行 一对多延迟加载 2.在IUserDao.xml中配置collection标签 缓存 一级缓存 二级缓存 1.SqlMaoConfig.xml中 2.在需要使用二级缓存的实体类的mapp…

JS函数中的arguments

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">/** 在调用函数时&#xff0c;浏览器每次都会传递进两个隐含的参数&#xff1a;* 1.函数的上下文对象 this…

剑英的区块链学习手记(二)

孙子说&#xff0c;知己知彼&#xff0c;百战不殆。 咱是通过小蚁学习区块链技术的。 开工之前&#xff0c;先了解一下小蚁的资料家族。 小蚁网站 https://www.antshares.org/ 小蚁源码 https://github.com/AntShares 小蚁SDK源码 https://github.com/ANTSHARESSdk 比较集…

PhotoShop基础知识

一、PhotoShop&#xff1a; 1.是由Adobe Systems开发和发行的专门用于图形图像处理的软件 2.优点&#xff1a;绘制或者处理后的图像&#xff0c;颜色鲜明、形象生动&#xff0c;能够给观者很好的视觉效果。 二、PhotoShop软件应用领域&#xff1a; 1.在平面设计中的应用 2.在插…

跟我学 Java 8 新特性之 Stream 流(二)关键知识点

转载自 跟我学 Java 8 新特性之 Stream 流&#xff08;二&#xff09;关键知识点 我们的第一篇文章&#xff0c;主要是通过一个Demo&#xff0c;让大家体验了一下使用流API的那种酣畅淋漓的感觉。如果你没有实践&#xff0c;我还是再次呼吁你动手敲一敲&#xff0c;自己实实…

mybatis使用注解开发

Mybatis目录 注解开发的crud 1.IUserDao接口中使用注解 2.测试类 注解开发的多表查询 多对一&#xff08;一对一&#xff09; 1.IAccountDao接口中使用注解 2.Account类中&#xff08;从表类&#xff09; 3.测试类 一对多&#xff08;多对多&#xff09; 1.IUserDao接口中使用…

Build 2017 | 微软开发者大会临近,今年的主题是边缘计算

200 多家明星企业&#xff0c;20 位著名投资机构顶级投资人共同参与&#xff01;「新智造成长榜」致力于发掘 AI 领域有 “三年十倍” 成长潜力的创新公司&#xff0c;下一波 AI 独角兽&#xff0c;会有你么&#xff1f;点击加入&#xff01; 雷锋网按&#xff1a;微软首席执行…

Photoshop的基本操作

一、缩放工具 1.缩放工具相当于放大镜和缩小镜&#xff0c;从视觉上改变图像的大小&#xff0c;但实际尺寸并没有改变。 2.快捷键&#xff1a;z或者按住alt鼠标滑轮上滑&#xff08;放大&#xff09;、下滑&#xff08;缩小&#xff09; 二、抓手工具&#xff1a; 1.当图片放大…

JDBC8.0 URL配置

Spring中即成DBUtils <property name"jdbcUrl" value"jdbc:mysql://localhost:3306/eesy_mybatis?useUnicodetrue&amp;characterEncodingUTF-8&amp;serverTimezoneUTC"></property>

王者齐聚!Unite 2017 Shanghai 日程讲师全揭晓

汇聚了来自全球的 Unity开发者、发行商、培训家及爱好者的 Unite 2017 Shanghai 即将于于 5 月 11 日&#xff0d;13日在上海国际会议中心隆重举行。Unite 大会是由 Unity 举办的全球开发者大会&#xff0c;至今已有 10 年历史&#xff0c;并已成为游戏行业、VR/AR 行业最具权威…

批评?惩罚?

批评&#xff1f;惩罚&#xff1f;最近一直在听王晓春老师的《做一个专业的班主任》&#xff0c;并且上次在校内分享教学经验和技巧的时候&#xff0c;也推荐给其他的老师看了。我一般都是在上班的路上听&#xff0c;王老师的很多观点确实值得我们深思&#xff0c;但是&#xf…

屌炸天,Oracle 发布了一个全栈虚拟机 GraalVM,支持 Python

转载自 屌炸天&#xff0c;Oracle 发布了一个全栈虚拟机 GraalVM&#xff0c;支持 Python 前阵子&#xff0c;Oracle 发布了一个黑科技 "GraalVM"&#xff0c;号称是一个全新的通用全栈虚拟机&#xff0c;并具有高性能、跨语言交互等逆天特性&#xff0c;真有这么…

IDEA 配置Maven项目

https://blog.csdn.net/qq_41799219/article/details/90782162

就业形势如此的严峻,你为何不努力?

就业形势如此的严峻&#xff0c;你们有何理由不努力&#xff1f;今天&#xff0c;围绕就业的问题展开个话题吧。马上&#xff0c;18级1班就要出去就业了&#xff0c;以前带的17级3班三期的时候学生的状态都比较积极&#xff0c;自己知道自己的实力&#xff0c;我和就业老师、班…

涨姿势,图文带你了解 8 大排序算法

转载自 涨姿势&#xff0c;图文带你了解 8 大排序算法 排序算法可以分为内部排序和外部排序&#xff0c;内部排序是数据记录在内存中进行排序&#xff0c;而外部排序是因排序的数据很大&#xff0c;一次不能容纳全部的排序记录&#xff0c;在排序过程中需要访问外存。 常见…

React中分页错误

因为save是异步方法 直接从model中取最新的数据

OpenCV3.4.5带GPU编译error: #error This file requires compiler and library support for the ISO C++ 2011

error: #error This file requires compiler and library support for the ISO C 2011 standard. This support is currently experimental, and must be enabled with the -stdc11 or -stdgnu11 compiler op caffe c11编译问题 问题&#xff1a;error: #error This file req…

班级第一次问卷调查

135编辑器调差问卷终于&#xff0c;在班内做了一次问卷调查了&#xff0c;这是自同学们入学以来做的第一次调查&#xff0c;主要是从学生的对所学课程、班主任以及教员老师的角度出发的&#xff0c;所有的调查均采取匿名方式&#xff0c;以保证调查的民主性&#xff1a;调查的问…