Ailot

Appearance

第十七章 适配前端和添加新服务 ​

前言 ​

这一章很简单，就是将我们分布式的服务接口跟之前的前端代码做适配，使其能够正常访问；再就是添加一个新的服务和新的数据库，使其能够正常访问。

一、前端代码修改 ​

修改登录和退出接口地址的前缀

js
export function login(data: LoginData): Promise<string> {
  return axios.post("/auth/login", {}, { params: data });
}

export function logout() {
  return axios.post("/auth/logout");
}

开发环境再加一个 auth 的代理

js
proxy: {
        '/auth': {
          target: loadEnv('development', '.').VITE_PROXY,
          rewrite: (path: string) => path.replace(/^\/auth/, '/auth'),
          configure: (server) =>
            // 拦截请求 打印地址。方便辨认重定向后的地址是否正确 没有端口信息
            server.on('proxyReq', (req: any) =>
              console.log(`${req.host}${req.path}`)
            ),
        },
        '/upms': {
          target: loadEnv('development', '.').VITE_PROXY,
          rewrite: (path: string) => path.replace(/^\/upms/, '/upms'),
          configure: (server) =>
            // 拦截请求 打印地址。方便辨认重定向后的地址是否正确 没有端口信息
            server.on('proxyReq', (req: any) =>
              console.log(`${req.host}${req.path}`)
            ),
        },
      },

测试是可以正常访问的

在这里插入图片描述

二、添加新服务 ​

这个主要用来介绍如何做自定义开发，比如接入新的业务。

新增一个 demo 的服务，然后新加一个 demo 的数据库，最小 pom 配置文件如下：

xml
    <dependencies>
        <!--注册中心客户端-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>
        <!--配置中心客户端-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
        </dependency>
        <!--web 模块-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.ailot</groupId>
            <artifactId>base-common</artifactId>
        </dependency>
        <dependency>
            <groupId>com.ailot</groupId>
            <artifactId>base-data</artifactId>
        </dependency>
    </dependencies>

在 nacos 新增名为 service-demo.yml 的配置文件

yml
# 数据源
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      username: root
      password: root
      url: jdbc:mysql://base-mysql:3306/demo?characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&allowMultiQueries=true&allowPublicKeyRetrieval=true
# Logger Config sql日志
logging:
  level:
    com.ailot.cloud.demo.mapper: debug

配置好相关菜单项和前端页面后启动测试 在这里插入图片描述

三、结束语 ​

权限管理系统的开发到这里就结束了，后面的章节将会在分布式架构的基础上做新的业务扩展，主要方向还是电商，所以后期的内容将会更加贴近实战，感兴趣的伙计们不要错过了。

当前版本 tag：2.0.2 代码仓库

四、 体验地址 ​

后台数据库只给了部分权限，报错属于正常！

想学的老铁给点点关注吧！！！

欢迎留言交流！！！

我是阿咕噜，一个从互联网慢慢上岸的程序员，如果喜欢我的文章，记得帮忙点个赞哟，谢谢！

Copyright © 2019-present Ailot