ABP微服務系列學習-對接前端界面
前面我們把后端的微服務架子基本搭建完成并成功啟動了，現(xiàn)在我們可以對接前端界面了。
這里我們直接用ABP模板里面的Angular的前端界面。
創(chuàng)建應用程序模板#
使用ABPCli創(chuàng)建一個應用程序模板，前端選擇Angular，選擇參數(shù)--separate-identity-server，分離身份認證和API。其他參數(shù)隨意，因為我們只需要Angular的前端。
abp new FunShow -u angular --separate-identity-server
創(chuàng)建完后目錄會有兩個文件夾
把Angualr目錄賦值到我們微服務項目的APP目錄下。
修改Angular配置#
打開Angular的src/environments目錄下的environment.ts文件。
修改oAuth配置和API配置，改成我們微服務框架的認證服務器地址和網(wǎng)關地址。以及修改scope，授權需要訪問的服務資源。
import { Environment } from '@abp/ng.core';const baseUrl = 'http://localhost:4200';export const environment = { ?production: false, ?application: { ? ?baseUrl, ? ?name: 'FunShow', ? ?logoUrl: '', ?}, ?oAuthConfig: { ? ?issuer: 'https://localhost:44322/', ? ?redirectUri: baseUrl, ? ?clientId: 'FunShow_Angular', ? ?responseType: 'code', ? ?scope: 'offline_access AccountService IdentityService AdministrationService LoggingService', ? ?requireHttps: true, ?}, ?apis: { ? ?default: { ? ? ?url: 'https://localhost:44325', ? ? ?rootNamespace: 'FunShow', ? ?}, ?},} as Environment;
啟動項目#
啟動后端項目，執(zhí)行run-tye.ps1文件一件啟動微服務。
啟動angular項目，執(zhí)行angular目錄下的start.ps1文件。
可以看到訪問認證服務和API的接口都正常訪問。
點擊登錄會跳轉(zhuǎn)到認證服務進行登錄。
登陸后查看功能，正常顯示。
切換多語言也是正常的。
到這我們前端對接也完成了，后面就可以愉快的開發(fā)自己功能了。
