ABP微服務系列學習-對接前端介面

飯勺oO發表於2023-03-03

前面我們把後端的微服務架子基本搭建完成併成功啟動了,現在我們可以對接前端介面了。
這裡我們直接用ABP模板裡面的Angular的前端介面。

建立應用程式模板

使用ABPCli建立一個應用程式模板,前端選擇Angular,選擇引數--separate-identity-server,分離身份認證和API。其他引數隨意,因為我們只需要Angular的前端。

abp new FunShow -u angular --separate-identity-server 

建立完後目錄會有兩個資料夾


把Angualr目錄賦值到我們微服務專案的APP目錄下。

修改Angular配置

開啟Angular的src/environments目錄下的environment.ts檔案。
修改oAuth配置和API配置,改成我們微服務框架的認證伺服器地址和閘道器地址。以及修改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;

啟動專案

啟動後端專案,執行run-tye.ps1檔案一件啟動微服務。
啟動angular專案,執行angular目錄下的start.ps1檔案。


可以看到訪問認證服務和API的介面都正常訪問。
點選登入會跳轉到認證服務進行登入。
登陸後檢視功能,正常顯示。




切換多語言也是正常的。


到這我們前端對接也完成了,後面就可以愉快的開發自己功能了。

相關文章