Asp.net Zero 应用实战-官方示例PhoneBook学习1

适用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应用程序服务-新建一个接口类。

未完待续。。。