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

news2025/7/23 15:48:03

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 added
    AuthorRoutingModule,
    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": "编辑作者"