Asp.net Zero 應用實戰-官方示例PhoneBook學習1

適用Zero版本：ASP.NET Core & Angular 2+ （aspnet-zero-core-3.1.0）。該版本官方有兩個solution文件夾：Angular（前端）和 aspnet-core（後臺服務）。在開始以下步驟之前需要能夠成功發佈程式，對於後臺服務只要能運行即可，如有 ...

適用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 == "[email protected]");
            if (douglas == null)
            {
                _context.Persons.Add(
                    new Person
                    {
                        Name = "Douglas",
                        Surname = "Adams",
                        EmailAddress = "[email protected]"
                    });
            }

            var asimov = _context.Persons.FirstOrDefault(p => p.EmailAddress == "[email protected]");
            if (asimov == null)
            {
                _context.Persons.Add(
                    new Person
                    {
                        Name = "Isaac",
                        Surname = "Asimov",
                        EmailAddress = "[email protected]"
                    });
            }
        }
    }
}

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應用程式服務-新建一個介面類。

未完待續。。。