快速使用ABP+Zorro

ABP前台操作流程

下载

1. 前往ASP.NET Boilerplate Startup Templates下载例子
2. 下载完成后按照流程Startup-Template-Angular操作，或直接用angular前端部分衔接已有的后台（以下操作衔接南海项目现有API）

配置

1. 到项目目录下安装包npm i或者npm install或yarn add

   cd XXX
   npm i
   

2. 安装好后需更新NSwag生成的客户端调用代码

   • 更新nswag的后台api地址nswag路径nswag/service.config.nswag（注意，这个与本地的.net core版本有关）

     "documentGenerator": {
     "fromDocument": {
       "url": "http://salt1.gzwanlink.com.cn:8096/swagger/v1/swagger.json",
       "output": null
     }
     },
     

   • 更新完配置后运行refresh.bat,可见src/shared/service-proxies/service-proxies.ts已经更新

3. 更新配置中app运行的后台地址，位置src/assets/appconfig.json,

   {
     "remoteServiceBaseUrl": "http://salt1.gzwanlink.com.cn:8096",
     "appBaseUrl": "http://localhost:4200",
     "localeMappings": [
       {
         "from": "pt-BR",
         "to": "pt"
       },
       {
         "from": "zh-CN",
         "to": "zh"
       },
       {
         "from": "he-IL",
         "to": "he"
       }
     ]
   }
   

4. 运行npm start,可成功打开登录界面

添加ng-zorro

1. 为了不破坏ABP前端框架，选择手动添加ng-zorro,执行npm install ng-zorro-antd --save,参考https://ng.ant.design/docs/getting-started/zh

   • 在core.less中引入@import "~ng-zorro-antd/ng-zorro-antd.min.css"

   • 新建模块文件ng-zorro-antd.module.ts

   • 在需要用到zorro的组件所在的模块中引入DemoNgZorroAntdModule

     @NgModule({
     	imports: [
     	DemoNgZorroAntdModule,
     	],
     

   • 添加完成后如果报错Uncaught (in promise): ReferenceError: ImportNgZorroAntdModule is not defined,可重新npm start

创建组件和模块

1. 从api中选取一个模块Player,在src/shared/service-proxies/service-proxy.module.ts中添加模块ApiServiceProxies.PlayerServiceProxy,

2. ng g m player --routing和到指定的模块目录下添加组件ng g c player-list -m player,模块中需要引进ng-zorro、PlayerServiceProxy

     imports: [
       CommonModule,
       PlayerRoutingModule, 
       SharedModule,
       FormsModule,   //表单
       ReactiveFormsModule, //表单
       ServiceProxyModule,  // 后端生成的前端服务
       ImportNgZorroAntdModule, //zorro组件模块
     ],
   

3. 更新路由PlayerRoutingModule， 更新模块路由RootRoutingModule， 更新菜单

   • 模块路由player-routing.module.ts

     const routes: Routes = [
       {
         path: '',
         component: AppComponent,
         children: [
             { path: 'list', component: PlayerListComponent, },
         ]
     }
     ];
     

   • 总路由root-routing.module.ts

     const routes: Routes = [
      {
         path: 'player',
         loadChildren: () =>import('app/player/player.module').then(m => m.PlayerModule)
     }]
     

   • 添加进菜单src/app/layout/sidebar-menu.component.ts,添加new MenuItem('player', '/player/list', 'fas fa-info-circle'),

4. 运行，可以跳转到player-list页面

业务

1. 参考role页面
2. 页面继承抽象类PagedListingComponentBase，实现抽象方法