526互联

ABP微服务系列学习-对接前端界面

发布时间 2023-03-22 19:13:47作者: 饭勺oO

前面我们把后端的微服务架子基本搭建完成并成功启动了，现在我们可以对接前端界面了。
这里我们直接用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的接口都正常访问。
点击登录会跳转到认证服务进行登录。
登陆后查看功能，正常显示。




切换多语言也是正常的。


到这我们前端对接也完成了，后面就可以愉快的开发自己功能了。