⭐前后端共享代码

陈小皮
539 阅读1分钟

需求

公司的客户端分为小程序端和后台管理端，对应的代码仓库有 4 个：

  • 小程序
  • 管理后台
  • 小程序接口
  • 管理后台接口

而一个项目里的常量枚举和工具，各个仓库都会用到的，而大部分都是通用的，直接的复制粘贴肯定会出现某一仓库没有跟最新的代码统一的问题。

解决方案

因为公司用的 GitLab 来托管代码，所以可以用 git 的 submodule 功能，创建一个仓库作为子模块，这样所有代码仓库都可以引用该子模块。

P1 创建公用库

创建一个仓库作为公用库：

  • constant 放常量枚举
  • util 工具类
  • management-api 管理后台接口请求、响应的数据结构
  • wechat-mini-api 小程序接口请求、响应的数据结构

1.png

P2 拉取子模块的代码

在各个仓库代码中执行：

git submodule add http://${子模块仓库地址}.git src/module/cm-common

这样在项目根目录下就会出现一个.gitmodules的文件，里面会记录子模块的信息： 2.png 有了这个.gitmodules文件后，其他小伙伴要同步代码只需要执行一下该命令：

git submodule update --init --remote --recursive

这样就会拉取最新的子模块代码了。

P3 部署到 Jenkins

注意，执行了上面命令后，如果子模块的代码有更新，本地子模块里的commit_id会发生变更，这个要一并提交上去，我们后续在 Jenkins 部署的时候有用。

3.png

然后我们在 Jenkins 任务里的源码管理里新增一个Additional Behaviours，选择高级的子模块行为。

4.png

接着勾选下面的几个选项，这样 build 的时候 Jenkins 就会去拉取submodule里面的代码了。

5.png

ts 声明文件

除了常量枚举和工具可以放到公共库，我们还可以把接口的请求和响应的数据结构也写在公用库里，这样前端传参和拿数据都不会出现传错和拿错：

后端同学编写的声明文件：

// management-api/user.ts
import { Basic } from "./basic";

export interface GetSimpleListResult extends Basic {
  data: {
    rows: {
      id: number;
      username: string;
      phone: string;
    }[];
  };
}

export interface GetSimpleListParams {
  page: number;
  pageSize: number;
  name?: string;
  mobile?: string;
}

前端同学引入和使用：

import {
  GetSimpleListParams,
  GetSimpleListResult,
} from "@/module/cm-common/management-api/user";

export async function getUserList(
  params: GetSimpleListParams
): Promise<GetSimpleListResult> {
  return request("/api/v1/user/simple-list", {
    method: "GET",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: `${token.get()}`,
    },
    params: {
      ...params,
    },
    ...(options || {}),
  });
}

总结

目前这套方案还是挺舒服的，不过小程序接口和管理后台接口仓库还是会有很多service相关的代码重复，这一块就不太适合放到子模块里去了，应该用微服务比较好，以后再想了~

avatar
文章
阅读
粉丝