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的介面都正常訪問。
點選登入會跳轉到認證服務進行登入。
登陸後檢視功能，正常顯示。




切換多語言也是正常的。


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

相關文章