当前位置：首页 > ops >正文

ABP-Book Store Application中文讲解 - Part 9: Authors: User Interface

ops 2025/6/29 10:07:33

TBD

1. 汇总

ABP-Book Store Application中文讲解-汇总-CSDN博客

2. 前一章

ABP-Book Store Application中文讲解 - Part 8: Authors: Application Layer-CSDN博客

项目之间的引用关系。

1. 利用Angular Cli创建authors

2. 更改AuthorModule

3.1. 更改path为/book-store的requiredPolicy

3.2 新增path为/authors的菜单

3.3 route.provider.ts完整代码

4. ABP generate service proxy

5. 提示信息本地化

6. Author列表和新增、编辑、删除

7. 继续学习

1. 利用Angular Cli创建authors

右击app文件夹，选择Open in Integrated Terminal打开Terminal页面，输入以下命令，敲回车：

ng generate module author --module app --routing --route authors

命令结束后，生成文件结构如下图所示：

2. 更改AuthorModule

/src/app/author/author.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';import { AuthorRoutingModule } from './author-routing.module';
import { AuthorComponent } from './author.component';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';// new added
import { SharedModule } from '../shared/shared.module';// new added@NgModule({declarations: [AuthorComponent],imports: [CommonModule,SharedModule,// new addedAuthorRoutingModule,NgbDatepickerModule// new added]
})
export class AuthorModule { }

src/app/route.provider.ts

3.1. 更改path为/book-store的requiredPolicy

      {path: '/book-store',name: '::Menu:BookStore',iconClass: 'fas fa-book',order: 2,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books || BookStore.Authors',// 新增加|| BookStore.Authors}

3.2 新增path为/authors的菜单

      {path: '/authors',name: '::Menu:Authors',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 4,layout: eLayoutType.application,requiredPolicy: 'BookStore.Authors',// new added}

3.3 route.provider.ts完整代码

import { RoutesService, eLayoutType } from '@abp/ng.core';
import { APP_INITIALIZER } from '@angular/core';export const APP_ROUTE_PROVIDER = [{ provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
];function configureRoutes(routesService: RoutesService) {return () => {routesService.add([{path: '/',name: '::Menu:Home',iconClass: 'fas fa-home',order: 1,layout: eLayoutType.application,},{path: '/book-store',name: '::Menu:BookStore',iconClass: 'fas fa-book',order: 2,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books || BookStore.Authors',// 新增加|| BookStore.Authors},{path: '/books',name: '::Menu:Books',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 3,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books',// new added},{path: '/authors',name: '::Menu:Authors',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 4,layout: eLayoutType.application,requiredPolicy: 'BookStore.Authors',// new added}]);};
}

4. ABP generate service proxy

前置条件是需要保证Acme.BookStore.HttpApi.Host启动。

在angular根目录，然后ctrl+`新打开一个Terminal console，运行以下命令：

abp generate-proxy -t ng

生成完成后的目录结构如下图所示：

5. 提示信息本地化

打开Acme.BookStore.Domain.Shared，找到Localization/BookStore文件夹，编辑en.json和zh-Hans.json。添加内容如下：

en.json

    "Menu:Authors": "Authors","Authors": "Authors","AuthorDeletionConfirmationMessage": "Are you sure to delete the author '{0}'?","BirthDate": "Birth date","NewAuthor": "New author","EditAuthor": "Edit author"

zh-Hans.json

    "Menu:Authors": "作者管理","Authors": "作者","AuthorDeletionConfirmationMessage": "你确定要删除作者 '{0}'?","BirthDate": "生日","NewAuthor": "新建作者","EditAuthor": "编辑作者"