译 ABP aspnetboilerplate ASP.NET Core with Angular

由于公司现有框架需要升级,借鉴学习ABP,特此翻译并逐行测试源码,力求理解

原文地址

介绍

点击 生成模板是创建一个 ASP.NET Core + Angular 的ABP项目最简单的方法.记得要点击勾选Include module zero(ABP的组织结构管理模块).创建完成后下载项目,并按照下面的步骤来运行你的项目

(译注:

  • vs2017下 社区版 就行了
  • 安装的时候记得勾选相关组件 比如.net core
  • 当然,由于abp使用的是core 2.0 所以你需要下载 并安装
  • 数据库方面需要先自己创建好库,库的名称在创建完项目模板的时候页面上会提示连接字符串.)

ASP.NET Core 应用程序

Visual Studio 2017+打开项目,并点击编译(build)
选择 'Web.Host' 项目 作为启动项
打开 nuget包管理控制台(Package Manager Console) 切换默认项目(Default project)为.EntityFrameworkCore, 输入Update-Database命令来创建数据库
运行程序,就会看到swagger-ui页面,表示成功运行

image.png

在这个模板中, 默认支持多租户. 你可以在 Core 项目的 module class 中关闭它

如果运行失败了,请重启你的VS,因为在首次还原nuget程序包的时候经常失败

Angular 应用程序

准备

Angular 应用程序需要安装下面几个工具:

  • nodejs 6.9+ with npm 3.10+
  • Typescript 2.0+
    我们使用 angular-cli 来开发 Angular 应用程序

恢复程序包

打开命令行,切换到 angular 文件夹 一般就是包含了 *.sln 文件的文件夹,然后运行下面的命令 来还原程序包

npm install

(译注:

  • npm装这个贼慢,推荐用cnpm,另外目前node的长期支持版本是6.1所以要用最新版不要用这个长期支持版本,node -v可以查看版本
  • VS2017安装的时候会带上Typescript 2.3 检查一下有没有 tsc -v 如果有问题 可以自己安装 npm install -g typescript
  • webpack安装 检查一下有没有webpack webpack -v 没有的话就安装一下 npm install -g webpack
  • 在执行 npm install 命令的时候 有个坑 需要手动安装 web-animations-js npm install --save web-animations-js
  • 这里给一个除了cnpm以外的方案:npm config set registry https://registry.npm.taobao.org 这样就把地址指向了淘宝的镜像了,下载可以快很多)

注意:npm 在安装的时候会显示一些警告信息,这没有关系.如果你想要解决 你可以去 yarn ,并且我们也建议在你的电脑中使用它

运行

在命令行输入下面的命令

npm start

打开 http://localhost:4200

image.png

Angular 客户端同样支持 HMR (热替换Hot Module Replacement) . 在开发的时候你可以使用下面的命令 (替换 npm start) 来开启HMR:

npm run hmr

登录

现在你可以使用默认凭证登录系统。用户名:admin 密码:123qwe 。如果你想要以租户的形式来登录,首先要切换到租户的登录页面。有一个默认的租户:Default。当你登录成功后,会看到一个仪表盘的页面。

image.png

这个仪表盘仅仅只是个demo你可以以这个为基础开发你的真实仪表盘

开发Angular应用程序

我们使用angular-cli工具来构建Angular解决方案。你可以使用 ng build命令来发布你的项目。它会发布到默认文件夹。然后你也可以使用IIS或者任何你喜欢的webserver来运行它。

解决方案的细节和一些其他特色功能

以Token为基础的权限验证

如果你想要在一个移动应用中自定义某些API/服务,你可以使用以Token为基础的验证机制就像我们为Angular客户端做的一样。模板包含了JwtBearer Token验证基础功能模块

这里会使用Postman(谷歌插件)来展示请求和响应

权限验证

发送一个POST请求到 http://localhost:21021/api/TokenAuth/Authenticate 头文件设置 Context-Type="application/json" 如图
(译注:选 body,点最右侧的text下拉切换到JSON(application/json))

image.png

我们发送了usernameOrEmailAddress 和 password,如上面所见,返回的结果中包含了 token和 有效时间 (默认24小时,可以被修改).我们可以保存它,并在下次请求的时候使用.

关于多租户

API会默认以用户来工作.你可以在发送请求的时候在header中 带上Abp.TenantId来指定租户.它是个数字,并且1是默认租户的编号.

使用API

通过验证并获取了token后,我们就可以访问所有需要认证的action了.所有的服务都能够被远程直接调用.比如我们可以直接通过User service获取到用户列表

image.png

发送一个GET请求到 http://localhost:21021/api/services/app/user/getAll 设置头 Content-Type="application/json" 和 Authorization="Bearer 你的Token" 所有之前界面上能用的功能,在这里都能通过API的方式使用
(译注:注意Bearer 后面的空格)

迁移工具

模板包含一个工具--Migrator.exe 可以简单的迁移你的数据库.你可以运行这个应用程序来 创建/迁移 主机和租户数据库

image.png

这个程序会 从 它自己的appsettings.json文件 去获取主机的链接字符串 .这个字符串会和开头介绍过的
Web.Host 项目中的appsettings.json是一样的.确保配置文件中的连接字符串是你想要的.在获取了主机连接字符串后,它会创建主机和数据库或者如果已经存在了就请求迁移.然后它会获取租户数据库的连接字符串并且执行迁移到这几个数据库.如果数据库没有指定,或者这个数据库已经迁移给了另外一个租户(出现在多租户共享数据库)则会跳过这个租户的数据库.
你可以同时在开发和生产环境使用这个工具来迁移数据库,替换EF本身的工具(它需要很多配置并且每次只能迁移一个)

单元测试

模板包含了测试基础框架.并且在Test项目中有一些测试.你可以查看他们并且很轻松地模仿.事实上,与其说他们是单元测试不如说是一些整合的测试,因为他们会调用所有的 ABP功能来 测试你的代码.(包括数据验证,权限验证,工作单元)

源码

这个模板是开源并且免费公布在Github: https://github.com/aspnetboilerplate/module-zero-core-template

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容