适用Zero版本：ASP.NET Core & Angular 2+ （aspnet-zero-core-3.1.0）。
该版本官方有两个solution文件夹：Angular（前端） 和 aspnet-core（后台服务）。
在开始以下步骤之前需要能够成功发布程序，对于后台服务只要能运行即可，如有报错可根据提示安装需要的插件。Angular 则比较麻烦，装的东西较多，官方建议用yarn，这个要下载，顺藤摸瓜都安装完即可。
我没有改解决方案名称，仍用的默认solution的名称MyCompanyName.AbpZeroTemplate，所以下面有的文件名跟官网的phonebook示例文档有区别。
步骤如下：
1、后台服务solution中的src/***.core/***CoreModule.cs文件中临时禁用多租户。
[DependsOn(typeof(AbpZeroCoreModule))]
public class PhoneBookCoreModule : AbpModule
{
public override void PreInitialize()
{
//some other code...
//Enable this line to create a multi-tenant application.
Configuration.MultiTenancy.IsEnabled = false;
//some other code...
}
}
2、增加一个新的菜单项。前端Angular solution中的app\shared\layout\side-bar.component.ts （展开side-bar.component.html文件）在dashboard下面加入如下代码
new SideBarMenuItem("PhoneBook", null, "icon-notebook", "/app/main/phonebook")
3、后台solution中src/***.core/Localization/AbpZeroTemplate/AbpZeroTemplate.xml （默认的英文字体）中加入代码。如有对应中文，可在对应的中文文件中加入中文名称。其他语言中没加的都默认用英文的。
<text name="PhoneBook">Phone Book</text>
4、在前端Angular solution中加路由app\main\main-routing.module.ts
{ path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } },
{ path: 'phonebook', component: PhoneBookComponent }
此时phoneBookComponent报错，先忽略不管。
5、在Angular solution的app/main中新建一个phonebook文件夹并创建phonebookcocomponent.ts文件,代码如下：
import { Component, Injector } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
@Component({
templateUrl: './phonebook.component.html',
animations: [appModuleAnimation()]
})
export class PhoneBookComponent extends AppComponentBase {
constructor(
injector: Injector
) {
super(injector);
}
}
6、解决第四步的报错问题。在main-routing.module.ts加入import代码：
import { PhoneBookComponent } from './phonebook/phonebook.component';
7、在Angular solution的app/main/phonebook中新建 phonebook.component.html文件，代码如下：
<div [@routerTransition]>
<div class="row margin-bottom-5">
<div class="col-xs-12">
<div class="page-head">
<div class="page-title">
<h1>
<span>{{l("PhoneBook")}}</span>
</h1>
</div>
</div>
</div>
</div>
<div class="portlet light margin-bottom-0">
<div class="portlet-body">
<p>PHONE BOOK CONTENT COMES HERE!</p>
</div>
</div>
</div>
8、在Angular solution的app/main/main.module.ts文件中添加下面有黄色标记的代码。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ModalModule, TabsModule, TooltipModule } from 'ng2-bootstrap';
import { UtilsModule } from '@shared/utils/utils.module'
import { AppCommonModule } from '@app/shared/common/app-common.module'
import { MainRoutingModule } from './main-routing.module'
import { MainComponent } from './main.component'
import { DashboardComponent } from './dashboard/dashboard.component';
import { PhoneBookComponent } from './phonebook/phonebook.component';
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule,
ModalModule.forRoot(),
TabsModule.forRoot(),
TooltipModule.forRoot(),
UtilsModule,
AppCommonModule,
MainRoutingModule
],
declarations: [
MainComponent,
DashboardComponent,
PhoneBookComponent
]
})
export class MainModule { }
保存后刷新前端页面点击phone book后可出来如下页面。
9、创建实体类person。在后台solution中的.Core内新建文件夹People，然后在People文件夹内新建如下Person.cs类。
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using Abp.Domain.Entities.Auditing;
namespace Acme.PhoneBook.People
{
[Table("PbPersons")]
public class Person : FullAuditedEntity
{
public const int MaxNameLength = 32;
public const int MaxSurnameLength = 32;
public const int MaxEmailAddressLength = 255;
[Required]
[MaxLength(MaxNameLength)]
public virtual string Name { get; set; }
[Required]
[MaxLength(MaxSurnameLength)]
public virtual string Surname { get; set; }
[MaxLength(MaxEmailAddressLength)]
public virtual string EmailAddress { get; set; }
}
}
10、在后台solution中的.EntityFramework内的****DbContext.cs文件增加如下黄色标记代码。
public class ******DbContext : AbpZeroDbContext<Tenant, Role, User>
{
public virtual IDbSet<Person> Persons { get; set; }
//...other code
}
11、用EntityFramework的code first迁移功能更新数据库创建PdPersons表。
在windows command prompt 命令行工具定位到.EntityFramework文件夹。输入：“dotnet ef migrations add "Added_Persons_Table”并回车。
这会在Migrations文件夹中增加一个***Added_Persons_Table.cs类。然后在命令行中输入：“dotnet ef database update”命令，即可在数据库中生成新表。
我在执行这步的时候报错了。提示C:\Program Files\dotnet\shared\Microsoft.NETCore.App 目录里没有1.1.0版本的。原来是我没安装command line版的
.net core 1.1 sdk.官网直接下载即可下载地址：https://www.microsoft.com/net/core#windowscmd 。安装好即可成功更新数据库。
12、为新创建的PdPersons表造点初始数据。
在后台solution的.EntityFramework空间内的Migrations/seed/host 内新建InitialPeopleCreator.cs类
类代码：
using System.Linq;
using Acme.PhoneBook.EntityFramework;
using Acme.PhoneBook.People;
namespace Acme.PhoneBook.Migrations.Seed.Host
{
public class InitialPeopleCreator
{
private readonly PhoneBookDbContext _context;
public InitialPeopleCreator(PhoneBookDbContext context)
{
_context = context;
}
public void Create()
{
var douglas = _context.Persons.FirstOrDefault(p => p.EmailAddress == "douglas.adams@fortytwo.com");
if (douglas == null)
{
_context.Persons.Add(
new Person
{
Name = "Douglas",
Surname = "Adams",
EmailAddress = "douglas.adams@fortytwo.com"
});
}
var asimov = _context.Persons.FirstOrDefault(p => p.EmailAddress == "isaac.asimov@foundation.org");
if (asimov == null)
{
_context.Persons.Add(
new Person
{
Name = "Isaac",
Surname = "Asimov",
EmailAddress = "isaac.asimov@foundation.org"
});
}
}
}
}
13、在.EntityFramework空间内的Migrations/seed/host 内的InitialHostDbBuilder.cs类里新增如下黄色标记代码。
public class InitialHostDbBuilder
{
//existing codes...
public void Create()
{
//existing code...
new InitialPeopleCreator(_context).Create();
_context.SaveChanges();
}
}
然后在命令行中执行代码：“dotnet ef database update ” 即可。查看PdPersons表里已有数据。
14、创建person应用程序服务-新建一个接口类。
未完待续。。。
