(翻译)开始使用ABP.CORE模板 (ASP.NET Core with Angular)

前言

本文是翻译文章,如有翻译不正确的地方请指正。 其中内容大部分是官方原文,加上自己根据操作实现的心得。 官方 原文https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#source-code

简介(Introduction)

The easiest way of starting a new project using ABP with ASP.NET Core with Angular is to create a template on templates page. Remember to check "Include module zero". After creating and downloading your project, follow below steps to run your application.

开始一个新使用Angular和 ASP.NET Core 的ABP项目最简单的方法就是通过官方的模板页面来生成模板。切记包含zero模块。在官网完成创建和下载你的项目后,跟随后面的步骤来运行你的应用。

下载地址:https://aspnetboilerplate.com/Templates

这里写图片描述

ASP.NET Core项目介绍(ASP.NET Core Application)

  • Open your solution on Visual Studio 2017+ and build the solution.
  • Select the 'Web.Host' project as startup project.
  • Open Package Manager Console and run Update-Database command to create your database (ensure that Default project is selected as .EntityFrameworkCore in the Package Manager Console window).
  • Run the application. It will show swagger-ui if it is successfull:
  • 用vs2017及其以上版本打开解决方案,然后生成解决方案
  • 选择 'Web.Host' 为启动项目。
  • 打开程序包管理控制台,然后输入Update-Database 指令来创建你的数据库(确保程序包管理控制台中的默认项目选择的是‘EntityFrameworkCore’)。
  • 运行程序,如果成功将会显示 swagger-ui。

这里还有一点我要补充一下就是数据库连接需要根据实际情况进行修改,在‘Web.Host’工程项目下面的appsetting.json中。和以往的mvc项目不同。 下面是我按照上面方法启动后的效果:

这里写图片描述

In this template, multi-tenancy is enabled by default. You can disable it in Core project's module class if you don't need.

在这个模版中,multi-tenancy默认是启用的,如果需要,你可以在core项目中禁用他们

If you have problems with running the application, please try close and open your Visual Studio again. It sometimes fail on first package restore.

如果在运行过程中出现什么问题,请尝试关闭你的vs然后重新打开。往往在第一次还原包的时候容易失败。

Angular项目 (Angular Application)

Angular application needs to following tools be installed:

  • nodejs 6.9+ with npm 3.10+
  • Typescript 2.0+ We used angular-cli to develop the Angular application.

Angular 项目需要按照下面的工具:

  • nodejs 6.9版本及其以上,npm3.10版本及其以上
  • Typescript 2.0版本及其以上 我们是用angular-cli来构建的Angular项目。

Restore Packages Open a command prompt, navigate to angular folder which contains *.sln file and run the following command to restore npm packages:

还原包

打开命令提示符,并进入angular的文件夹,执行下面命令还原npm包。

npm install

Notice that npm install may show some warn messages, which is not related to our solution and generally it's not a problem. The solution can also configured to work with yarn and we suggest to use it if available on your computer.

注意,npm安装包时可能会出现一些警告信息,这不是我们的解决方案相关的一般没问题。该解决方案还可以配置在yarn上运行,如果你的电脑可以使用yarn,我们建议使用。

Run The Application In your opened command prompt, run the following command:

运行程序

在你的命令提示符中执行下面命令:

npm start

Once the application compiled, you can browse http://localhost:4200 in your browser. Be sure that Web.Host application is running at the same time. When you open the application, you will see the login page:

项目一旦编译完成,你可以在浏览器中输入http://localhost:4200 ,前提要确定与此同时你的.net项目中 Web.Host 工程正在运行。当你打开项目,你可以看见登录页面。

就翻译到这里把,因为npm编译出现错误,一时半会也解决不了。

这里写图片描述

早就听说java编程对版本的要求很严格,node这套开发显然和java开发很类似,对于我们新手总数莫名奇妙因为引用版本不同而导致错误。

于是我确保了下node版本,npm版本符合要求的情况下,重新安装了typescript,再执行npm install,npm start ,出乎意料的编译成功了。

这里写图片描述

Angular client app has also HMR (Hot Module Replacement) enabled. You can use the following command (instead of npm start) to enable HMR on development time: Angular 客户端程序同样支持HMR (Hot Module Replacement),在开发的时候,你可以用下面的指令来启动HMR

npm run hmr

对于node开发项目有点了解的人都知道,有package.json这么一个文件,里面包含了一些信息,就包括上面这些指令,还有依赖的包及其版本

这里写图片描述

Login Now you can login the application using default credentials. User name is 'admin' and password is '123qwe' as default. If you want to login as a tenant, first switch to that tenant in login page. There is a tenant named "Default" by default. Once you login successfully, you will see a dashboard:

登陆

现在你可以用默认的证书登录应用。默认用户名是admin,密码是123qwe,如果你想作为一个租户登录,首先在登陆页面切换租户,这里提供一个名字叫做"Default"的默认租户,一旦你登陆成功,你会看见这样一个面板。

这里写图片描述

很明显我的样式出现了问题,后面再解决。继续翻译。

正常的应该是这样的

这里写图片描述

This dashboard is just for demonstration and to be a base for your actual dashboard.

这个面板只是一个demo,它只是你实际面板的基础。

Deployment of Angular Application We used angular-cli tooling to build Angular solution. You can use ng build command to publish your project. It publishes to dist folder by default. Then you can host this folder on IIS or any web server you like.

部署Angular项目

我们用 angular-cli 工具来生成Angular解决方案,你可以用ng build 指令来发布你的工程项目,发布内容默认放在dist文件夹下,然后你可以将这个文件夹部署到iis或者其他你喜欢的web服务器下面。

解决方案明细及其他特性( Solution Details & Other Features)

Token Based Authentication If you want to consume APIs/application services from a mobile application, you can use token based authentication mechanism just like we do it for Angular client. Startup template includes JwtBearer token authentication infrastructure.

基于令牌的认证

如果您想从移动应用程序中使用API /应用程序服务,您可以使用基于令牌的认证机制,就像我们为Angular 客户端那样做。启动模板包括jwtbearer令牌认证基础设施。

Here, Postman (chrome extension) will be used to demonstrate requests and responses.

这里,我们用Postman(Chrome的扩展)来演示请求和响应。

Authentication Just send a POST request to http://localhost:21021/api/TokenAuth/Authenticate with Context-Type="application/json" header as shown below:

认证

只需要向http://localhost:21021/api/TokenAuth/Authenticate发送一个头包含 Context-Type="application/json"的post请求,如下所示

这里写图片描述

We sent values usernameOrEmailAddress and password. As seen above, result property of returning JSON contains the token and expire time (which is 24 hours by default and can be configured). We can save it and use for next requests.

如上所示我们发送用户名和密码的值,结果返回JSON数据包含令牌和过期时间(默认是24小时,可以配置)。我们可以保存它并用于下一个请求。

About Multi Tenancy API will work as host users by default. You can send Abp.TenantId header value to work with a specified tenant. It's an integer value and 1 for default tenant by default.

关于多租户

默认情况下,api将作为主机用户工作。你可以把abp.tenantid头的值指定一个特殊租户。默认情况下,默认的租户是一个整型值1。

Use API After authenticate and get the token, we can use it to call any authorized action. All application services are available to be used remotely. For example, we can use the User service to get a list of users:

用户api

经过验证后得到令牌,我们可以用它来调用任何授权的方法。所有的应用服务可以远程使用。例如,我们可以使用用户服务获得用户列表:

这里写图片描述

Just made a GET request to http://localhost:21021/api/services/app/user/getAll with Content-Type="application/json" and Authorization="Bearer your-auth-token ". All functionality available on UI is also available as API.

我们只需要向http://localhost:21021/api/services/app/user/getAll 发送一个get请求,包含Content-Type="application/json"和Authorization="Bearer your-auth-token "UI上可用的所有功能API也可以实现。

Migrator Console Application Startup template includes a tool, Migrator.exe, to easily migrate your databases. You can run this application to create/migrate host and tenant databases.

控制台数据迁移

启动模板包括一个工具,migrator.exe,可以轻松迁移您的数据库。您可以运行此应用程序来创建/迁移主机和租户数据库。

这里写图片描述

This application gets host connection string from it's own appsettings.json file. It will be same in the appsettings.json in the .Web.Host project at the beggining. Be sure that the connection string in config file is the database you want. After getting host connection sring, it first creates the host database or apply migrations if it does already exists. Then it gets connection strings of tenant databases and runs migrations for those databases. It skips a tenant if it has not a dedicated database or it's database is already migrated for another tenant (for shared databases between multiple tenants).

这个应用程序从主机的appsettings.json文件中获取连接字符串。开始它和Web.Host中的appsettings.json文件一样。确保在配置文件中的连接字符串是要数据库。获取主机的连接字符串后,它首先创建主数据库或应用的迁移,如果它已经存在。然后它就会获取租户数据库连接字符串和运行的数据库迁移。如果没有专用数据库,或者它的数据库已经迁移到另一个租户(用于多个租户之间的共享数据库),它就会跳过该租户。

You can use this tool on development or on product environment to migrate databases on deployment, instead of EntityFramework's own tooling (which requires some configuration and can work for single database/tenant in one run).

你可以在开发或生成环境迁使用这个工具来迁移数据,而不是使用EntityFramework自己的工具(这需要一些配置,而且可以在一个单个数据库/租户的工作)。

Unit Testing Startup template includes test infrastructure setup and a few tests under the .Test project. You can check them and write similar tests easily. Actually, they are integration tests rather than unit tests since they tests your code with all ASP.NET Boilerplate infrastructure (including validation, authorization, unit of work...).

单元测试

启动模板包括测试基础设施和一些测试例子在测试项目下。你可以查看,并且很轻松的写类似的测试。实际上,他们因为测试你的代码与所有的ASP.NET样板的基础设施,所以算是集成测试而不是单元测试(包括验证、授权、工作单位…)。

Source Code

This project template is developed as open source and free under Github: https://github.com/aspnetboilerplate/module-zero-core-template

源码

这个项目模板的作为开源免费项目,项目地址在 Github:https://github.com/aspnetboilerplate/module-zero-core-template

样式问题解决办法(一看就是因为样式缺失导致的)

在index.html中加入下面标签

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西安-晁州

Xss和Csrf介绍

Xss和Csrf介绍 Xss Xss(跨站脚本攻击),全称Cross Site Scripting,恶意攻击者向web页面中植入恶意js代码,当用户浏览到该页时...

3729
来自专栏前端黑板报

构建离线web应用(二)

本文由哔哩哔哩前端工程师 墨白 翻译分享 上一篇文章中,我们成功尝试使用 service workers。我们也可以在应用中缓存一些资源。这篇文章我们准备了解这...

2178
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南(二、进阶篇)

上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。  Sources面板几乎是我最常用到的Chrome功能面板,也是...

951
来自专栏Hadoop数据仓库

HAWQ技术解析(十五) —— 备份恢复

一、为什么还需要备份         HAWQ作为一个数据库管理系统,备份与恢复是其必备功能之一。HAWQ的用户数据存储在HDFS上,系统表存储在master节...

2479
来自专栏生信技能树

点击此文,无需转发,即可下载上千个免费R包

写在前面: 谨以此文献给那些“奋斗”在转发送别人资源,为了博人眼球,而践踏别人的辛勤的劳动成果的公众号们。 当然了,R包本来就是免费的,你只是不会下载而已,所以...

4218
来自专栏一“技”之长

分分钟搞定IOS远程消息推送 原

IOS中消息的推送有两种方式,分别是本地推送和远程推送,本地推送在http://my.oschina.net/u/2340880/blog/405491这篇博客...

901
来自专栏NetCore

怎样制作GHOST系统盘

制作Windows XP万能克隆镜像 战前分析:对于Windows XP,制作万能克隆时的一个重要问题就是系统激活,因为Windows XP为了防止盗版,采取...

4408
来自专栏微信终端开发团队的专栏

WCDB 的 WAL 模式和异步 Checkpoint

通过 A/B Test,最终相比传统 Rollback 模式写耗时减少 70% 以上,还稍稍降低了 DB 损坏率。

8446
来自专栏FreeBuf

护卫神主机大师提权漏洞利用分析

护卫神·主机大师支持一键安装网站运行环境(IIS+ASP+ASP.net+PHP5.2-5.6+MySQL+FTP+伪静态+PhpMyAdmin),并可在线开设...

2510
来自专栏小白课代表

软件分享 | 3DS MAX 2017安装教程

3D Studio Max,常简称为3d Max或3dsMAX,是Discreet公司开发的(后被Autodesk公司合并)基于PC系统的三维动画渲染和制作软件...

1263

扫码关注云+社区

领取腾讯云代金券