当时初学 Web 开发的时候，除了写一个网页博客外，第二个选择无非就是一个后台管理系统，可以应用于多种需要数据管理类项目中。

基于**NestJs + TypeScript + TypeORM + Redis + MySql + Vben Admin**编写的一款前后端分离的权限管理系统

演示地址：[KzAdmin](https://admin.kuizuo.cn) 管理员账号：admin 密码：123456



![image-20220505171231754](https://img.kuizuo.cn/image-20220505171231754.png)

## 前端

**基于[Vben Admin](https://vvbin.cn/doc-next/)开发，使用 Vue3、Vite、TypeScript 等最新技术栈，内置常用功能组件、权限验证、动态路由。**

仓库地址：https://github.com/kuizuo/kz-vue-admin

### [项目结构](https://vvbin.cn/doc-next/guide/#%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E)

```bash
├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── logics # 逻辑
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   └── views # 页面
├── test # 测试
│   └── server # 测试用到的服务
│       ├── api # 测试服务器
│       ├── upload # 测试上传服务器
│       └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
```

### 启动项目

建议使用 pnpm 包管理器来管理 node 项目，使用`npm install -g pnpm`即可安装。

```bash
pnpm install

pnpm run dev
```

运行结果

```bash
  vite v2.9.5 dev server running at:

  > Network:  https://192.168.184.1:3100/
  > Local:    https://localhost:3100/

  ready in 5057ms.
```

> 注: 开发环境下首次载入项目会稍慢(Vite 在动态解析依赖)

更多关于前端项目规范可直接参考 [Vben Admin 文档 ](https://vvbin.cn/doc-next/guide/introduction.html)，非常详细了。

## 后端

**基于 NestJs + TypeScript + TypeORM + Redis + MySql 编写的前后端分离权限管理系统**

仓库地址：https://github.com/kuizuo/kz-nest-admin

### [项目结构](https://blog.si-yee.com/sf-admin-cli/nest/usage.html#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E)

```bash
|─setup-swagger.ts # Swaager文档配置
|─main.ts # 主入口
|─config # 配置文件
|─shared
| |─redis # redisModule
| | |─redis.module.ts
| | |─redis.interface.ts
| | |─redis.constants.ts
| |─shared.module.ts
| |─services # 全局通用Provider
|─app.module.ts
|─mission
| |─mission.module.ts
| |─mission.decorator.ts # 任务装饰器，所有任务都需要定义该装饰器，否则无法运行
| |─jobs # 后台定时任务定义
|─common # 系统通用定义
| |─dto # 通用DTO定义
| |─contants
| | |─error-code.contants.ts # 系统错误码定义
| | |─decorator.contants.ts # 装饰器常量
| |─filters # 通用过滤器定义
| |─interceptors # 通用拦截器定义
| |─decorators # 通用装饰器定义
| |─exceptions # 系统内置通用异常定义
| |─class # Class Model 不使用Interface定义，使用Interface无法让Swagger识别
|─modules
| |─admin
| | |─core # 核心功能
| | | |─interceptors # 后台管理拦截器定义
| | | |─decorators # 后台管理注解定义
| | | |─provider # 后台管理提供者定义
| | | |─guards # 后台管理守卫定义
| | |─system # 系统模块定义
| | |─account # 用户账户模块定义
| | |─login # 登录模块定义
| | |─admin.module.ts # 后台管理模块
| | |─admin.constants.ts # 后台管理模块通用常量
| | |─admin.interface.ts # Admin通用interface定义
| |─ws # Socket模块
|─entities # TypeORM 实体文件定义
```

### 启动项目

依赖安装与执行打包命令前端与后端一致，但需要提前修改.env.development 中数据库相关配置，并执行 sql/init.sql 来初始化数据。

### 实现

项目中大部分的目录结构设计参照与[sf-nest-admin](https://github.com/hackycy/sf-nest-admin)，但主要为了贴合自我的代码风格修改部分数据字段名，接口方法，接口响应格式等等。

同时对于大部分这类后台管理的 demo，通常都会定义用户，角色，菜单，部门。而我将部门相关代码删除，因为对于我后续项目大概率用不上这些部分，然后删了一些不相关的模块，主要写的这套模板还是用作自己后续的管理类项目。

#### 用户-角色-权限

这套系统中最为重要的一部分便是权限管理，不过在这套后台管理系统中这里的权限与菜单共用，前端路由渲染菜单，后端鉴权。后文的菜单表也就作为权限表而言。

在这三张表中关系如下（这里使用外键与数据库模型为例，实际项目并未用到外键，也不推荐使用）

![image-20220508235534026](https://img.kuizuo.cn/image-20220508235534026.png)

用户-角色 与 角色-权限都采用的多对多的关系，即新创建一个表用于映射两表关系。这些都属于 mysql 基础，不做过多赘述。

在权限管理中，最为重要的便是权限表了，由于这套后台管理系统中还涉及到前端的左侧菜单，所以将这里的 permission 表替换为 menu 表，字段 permission 表示权限值。数据库中的 menu 表如下

![image-20220508234343594](https://img.kuizuo.cn/image-20220508234343594.png)

对于主要字段介绍：

- **parent**：对于有父子关系的表，会创建一个 parent_id(这里为 parent)字段用于表示父节点，无则为顶级节点。

- **permission**：权限标识，根据后端接口而定，比如新增用户的 url 为`sys/user/add`，那么权限标识通常将/替换成:，也就是`sys:user:add`（主要防止和接口的 url 混淆）。
- **type**：0 目录 1 菜单(前端组件) 2 权限，由于是菜单与权限混用，所以用 type 来区分。
- **icon**：左侧菜单图标
- **order_no**：左侧菜单排序
- **component**：组件，目录为 LAYOUT，菜单则为对应组件，权限则无

有了这些数据，要做的是将他们拼接为**前端菜单管理**，**根据角色获取所有菜单**，**根据用户的所有权限**的树结构数据。

##### 前端菜单管理

获取所有的菜单列表数据，通过递归生成对应的菜单树结构，具体递归代码在`src/modules/core/permission/index.ts`中的`generatorMenu`方法中。

具体拼接数据过多，可自行打开控制台(F12)->网络 到菜单管理页中获取数据可得，这里便不做展示（后文拼接数据同理）。

##### 根据角色获取所有菜单

首先根据用户 id 找到该用户的所有角色 id，然后通过联表找到角色 id 所对应的菜单数据。

```typescript
  /**
   * 根据角色获取所有菜单
   */
  async getMenus(uid: number): Promise<string[]> {
    const roleIds = await this.roleService.getRoleIdByUser(uid);
    let menus: SysMenu[] = [];
    if (includes(roleIds, this.rootRoleId)) {
      menus = await this.menuRepository.find({ order: { orderNo: 'ASC' } });
    } else {
      menus = await this.menuRepository
        .createQueryBuilder('menu')
        .innerJoinAndSelect('sys_role_menu', 'role_menu', 'menu.id = role_menu.menu_id')
        .andWhere('role_menu.role_id IN (:...roldIds)', { roldIds: roleIds })
        .orderBy('menu.order_no', 'ASC')
        .getMany();
    }

    const menuList = generatorRouters(menus);
    return menuList;
  }
```

同样`generatorRouters`函数也在`src/modules/core/permission/index.ts`中。

##### 根据用户的所有权限

与上例一样，不过这里主要获取的是 permission 字段，所以在条件上添加了`menu.type = 2`与`menu.permission IS NOT NULL`，将 permission 拼接为一个数组。

```typescript
  /**
   * 获取当前用户的所有权限
   */
  async getPerms(uid: number): Promise<string[]> {
    const roleIds = await this.roleService.getRoleIdByUser(uid);
    let permission: any[] = [];
    let result: any = null;
    if (includes(roleIds, this.rootRoleId)) {
      result = await this.menuRepository.find({
        permission: Not(IsNull()),
        type: 2,
      });
    } else {
      result = await this.menuRepository
        .createQueryBuilder('menu')
        .innerJoinAndSelect('sys_role_menu', 'role_menu', 'menu.id = role_menu.menu_id')
        .andWhere('role_menu.role_id IN (:...roldIds)', { roldIds: roleIds })
        .andWhere('menu.type = 2')
        .andWhere('menu.permission IS NOT NULL')
        .getMany();
    }
    if (!isEmpty(result)) {
      result.forEach((e) => {
        permission = concat(permission, e.permission.split(','));
      });
      permission = uniq(permission);
    }
    return permission;
  }
```

permission 的值如

```json
["sys:user:add", "sys:user:delete", "sys:user:update", "sys:user:list", "sys:user:info"]
```

然后在 auth.guard.ts 守卫中获取 permission，然后每次请求需要鉴权的接口时，将权限标识转为接口 url，判断是否包含该 url，不包含则无访问权限。

在[菜单管理页](https://admin.kuizuo.cn/#/system/menu)中可操作菜单，具体可自测。

至此，菜单表的数据被拆分为这 3 部分数据，以实现权限管理，动态路由的目的。

#### 其他文档

你可以访问 [https://admin.kuizuo.cn/swagger-ui](https://admin.kuizuo.cn/swagger-ui 'https://admin.kuizuo.cn/swagger-ui') 来查看 nest-vben-admin 的 Swagger 文档

json 格式为 [https://admin.kuizuo.cn/swagger-ui/json](https://admin.kuizuo.cn/swagger-ui/json 'https://admin.kuizuo.cn/swagger-ui/json')，用于导入 ApiFox 中。

ApiFox 在线链接: [https://www.apifox.cn/apidoc/shared-7a07def2-5b82-4c71-bf57-915514f61f25](https://www.apifox.cn/apidoc/shared-7a07def2-5b82-4c71-bf57-915514f61f25 'https://www.apifox.cn/apidoc/shared-7a07def2-5b82-4c71-bf57-915514f61f25') 访问密码: nest-vben-admin

## 写后感

其实一年多前我就想写一套相对完善的后台管理系统的模板，供自己后续的一些项目中使用。然而迟迟没有动手写套模板，而是不断根据业务需求，修修改改写了一套乱七八糟的代码，以至于维护的时候究极痛苦。就在不久前正好也用到，然而也是把之前写的屎山一样的代码拿来修改。

**我所遇到的问题：项目结构乱，代码风格乱，维护代码极其折磨**

所以今年寒假于是准备完善这套模板，然而当时只是创建完工程结构，到现在才正式把功能实现以及测试相关，部署搞定。说真的，非常拖延，甚至都快让我放弃写这个模板的打算。但拖也对我有一定的好处，为什么这么说？因为当时有这个想法时，市面上关于这套技术栈的实现还很少，而等我寒假再去搜索相关实现的时候，却有相关开源的代码，而这便可供我学习，使项目更加完善。

回顾整体项目的编写过程，所花费的时间可能一个月不到，甚至更少，但往往就是各种各样的拖延导致项目逾期，或者是学习某个技术栈。难以将精力集中起来完成任务，至于原因，也许是目标过于庞大，或许是日常生活中的各种琐事，不过我想多半是自我的懒惰。

nest-vben-admin后台管理系统

虽然知道开源有个许可证 LICENSE，但一直没给自己写的一些开源项目选择开源许可证。于是准备系统了解一下开源许可证，以及如何为 Github 项目添加 LICENSE。



### OSI(Open Source Initiative)

即开发源代码组织，是一个旨在推动开源软件发展的非盈利组织。可以在 [Open Source Initiative](https://opensource.org/licenses/alphabetical) 中查看所有的开源协议。

## 开源许可证

关于开源许可证的简单区别

![img](https://www.ruanyifeng.com/blogimg/asset/201105/bg2011050101.png)

至于如何选择，下图更加通俗易懂

![快速选择协议](https://img.kuizuo.cn/2019-04-29-072557.png)

其中开源许可证可分为两大类

### 宽松式（permissive）许可证

宽松式许可证（permissive license）是最基本的类型，对用户几乎没有限制。用户可以修改代码后闭源。

它有三个基本特点。

**（1）没有使用限制**

用户可以使用代码，做任何想做的事情。

**（2）没有担保**

不保证代码质量，用户自担风险。

**（3）披露要求（notice requirement）**

用户必须披露原始作者。

#### 常见许可证

常见的宽松式许可证有四种。它们都允许用户任意使用代码，区别在于要求用户遵守的条件不同。

**（1）BSD（二条款版）**

分发软件时，必须保留原始的许可证声明。

**（2） BSD（三条款版）**

分发软件时，必须保留原始的许可证声明。不得使用原始作者的名字为软件促销。

**（3）MIT**

分发软件时，必须保留原始的许可证声明，与 BSD（二条款版）基本一致。

**（4）Apache 2**

分发软件时，必须保留原始的许可证声明。凡是修改过的文件，必须向用户说明该文件修改过；没有修改过的文件，必须保持许可证不变。

不难看出这类许可证要求相对宽松，市面上大部分的开源项目主要以 MIT 和 Apache 两者为主。使用 MIT 协议开源项目如 vue，react，bootstrap，vscode，electron，axios，terminal 等等，作为大多数开发者而言，MIT 无法是最好的选择。

### Copyleft 许可证

Copyleft 是[理查德·斯托曼](https://www.ruanyifeng.com/blog/2005/03/post_112.html)发明的一个词，作为 Copyright （版权）的反义词。

Copyright 直译是"复制权"，这是版权制度的核心，意为不经许可，用户无权复制。作为反义词，Copyleft 的含义是不经许可，用户可以随意复制。

但是，它带有前提条件，比宽松式许可证的限制要多。

> - 如果分发二进制格式，必须提供源码
> - 修改后的源码，必须与修改前保持许可证一致
> - 不得在原始许可证以外，附加其他限制

上面三个条件的核心就是：修改后的 Copyleft 代码不得闭源。

#### 常见许可证

常见的 Copyleft 许可证也有四种（对用户的限制从最强到最弱排序）。

**（1）Affero GPL (AGPL)**

如果云服务（即 SAAS）用到的代码是该许可证，那么云服务的代码也必须开源。

**（2）GPL**

如果项目包含了 GPL 许可证的代码，那么整个项目都必须使用 GPL 许可证。

**（3）LGPL**

如果项目采用动态链接调用该许可证的库，项目可以不用开源。

**（4）Mozilla（MPL）**

只要该许可证的代码在单独的文件中，新增的其他文件可以不用开源。

> 参考文章
>
> [开源许可证教程 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2017/10/open-source-license-tutorial.html)
>
> [如何选择开源许可证？ - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html)
>
> [五分钟看懂开源协议](https://juejin.cn/post/6844903925863153672)

## Github 项目添加 LICENSE

Github 官方专门制作了一个网站 [Choose a License](https://choosealicense.com/) 帮助大家选择合适的开源，License。中文版也有 [选择一个开源许可证](https://choosealicense.rustwiki.org/)。不过我更推荐下面在 Github 仓库页中来新增 LICENSE。

在仓库页中，Add file-> Create new file

![image-20220505190634653](https://img.kuizuo.cn/image-20220505190634653.png)

输入 LICENSE（建议大写），右侧将会弹出 Choose a license template，这里我选择 MIT 协议

![image-20220505190758791](https://img.kuizuo.cn/image-20220505190758791.png)

![image-20220505191409696](https://img.kuizuo.cn/image-20220505191409696.png)

点击 Review and submit，此时就会回到添加文件的地方，并且自动为你填写好 Message，接着点击 Commit new file 即可

![image-20220505200951047](https://img.kuizuo.cn/image-20220505200951047.png)

整个许可证内容如下

```
MIT License

Copyright (c) 2022 kuizuo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

再次刷新便可看到效果

![image-20220505201138476](https://img.kuizuo.cn/image-20220505201138476.png)

关于开源许可证

前段时间因为笔记本不在身边，导致一些本地磁盘代码数据没法直接同步过来。于是就准备把这些年写的代码重新整理一下，谈谈常用备份手段以及我的[最佳实现](#最佳实现)



## 备份手段

### 本地硬盘

大多数代码的存储方式，方便存取，我通常会新建一个驱动器 **代码 (F:)** 来将所有代码放在此处，可能还会自备一个移动硬盘来存储代码。

#### 优点

无需网络，保存时间久，**读写数据快**。

#### 缺点

数据同步不方便，难以做到跨端跨设备共享。万一硬盘出了点问题，代码将难以恢复。

### 网盘

例如某度网盘，Onedrive 等等，这类备份通常有一定的限制，例如下载限速严重，空间限制，保存期限等等，具体以实际使用网盘为例。

在某度网盘中，选择你的想备份的文件夹，是可以做到文件夹自动备份，但对于你项目中的依赖文件（例如 Node 的 node_module）那不小的空间也将备份，但有文件夹数量以及大小限制，如下图，这里只是简单一提，不作为备用手段。

![image-20220502153823417](https://img.kuizuo.cn/image-20220502153823417.png)

#### 优点

相比本地硬盘而已，**网盘更易分享**，在其他设备中只需要登录网盘账号或访问网盘所分享的链接。

#### 缺点

有些免费的网盘，必然有一定的限制，例如空间限制，下载限制，远不如本地硬盘。如果不付费的话，体验效果堪忧。

### 代码托管平台

代码托管平台有很多，例如 Github、Gitee 等等，甚至可以自建一个像 GItLab 的代码托管平台。

#### 优点

**代码实时性强**，并且基于 Git 版本管理工具可以很方便查看代码的历史操作，对于项目类的而言非常方便。

#### 缺点

对于一些公有项目而言，一些私密信息（密码）不易于上传，在其他设备拉取代码就不存在这部分数据。同时**对于大量代码就束手无策**。

## 最佳实现

介绍完上面的几种代码备份手段，各自都有优缺点，至于如何选择就因人而异，这里就说说我是如何备份代码的。

### 全部代码

对于全部代码而言，肯定是多备份远优于不备份的。所以我通常会在本地电脑硬盘中备份两份代码，一份就正常放在固态硬盘上，另一份则放在机械硬盘，同时再备份一份代码在网盘上。

但机械硬盘与网盘的备份时间一致，都是定期或阶段性的备份（甚至可能会忘记备份），所以这种对代码的实时性要求不高，通常这类代码为学习代码以及工具类相关代码。

### 项目代码

对于项目代码而言，我是毫不犹豫的选择代码托管平台，使用到版本管理工具 Git，可以很好的查看代码的全部历史记录以及修改追踪能力。易于维护的同时，代码分享与同步也比网盘来的高效。设置好.gitignore 也不会将非必要的文件（依赖文件，打包后的文件，生产环境下的配置文件）上传上去。而 Github 便是我最好的选择，里面存放了或多或少的开源与私有项目，每次在其他设备上只需要登录 github，然后 clone 项目，便可开始 coding。

**通常来说备份项目代码就已经足够了，毕竟这类代码往往会有一定的价值性。**

### 文章笔记备份

除了代码备份外，此外笔记也十分重要，毕竟有时候自己写的代码，自己甚至都不一定明白。对于文章数据以及笔记，我通常会使用云端协作平台，这类产品有 notion，wolai，语雀等等，不过我个人还是相对倾向于使用 [notion](https://www.notion.so/)，曾经 notion 在国内网络的体验下并不友好，我那时会选择 wolai 平替，但现在 notion 发展的越来越好，尤其对开发者而言，你完全可以在 notion 编写内容，通过 api 方式将文章展示给他人访问，

此外一些博客文章，就会同步在[个人博客](https://kuizuo.cn/)以及[掘金](https://juejin.im/user/1565318510545901/activities)上，当然博客的静态站点的代码仓库也是存放在[Github](https://github.com/kuizuo/blog)上。

### 不必要的代码不要备份

其实对于很多代码都没备份的必要，例如我在安卓学习的时候，涉及到的刷机包（少说 2 个 g），以及各种 apk。完全可以直接备份其下载地址，而不是选择备份。

像临时用脚手架创建的工程文件或是下载别人的代码，这类通常就临时使用（甚至不会再打开第二次），完全没有必要备份理由。

### 请压缩后在备份

如果不压缩文件夹，备份时将逐个读取文件特别耗时，同时压缩完代码还可以节省一定的空间。也许在一开始备份时会相对麻烦，但在上传与下载以及多次备份时就一举两便。

## 最后

**永远不要嫌备份麻烦，当你辛辛苦苦写的代码丢失时，那才是真正的麻烦。**

养成定期备份代码的习惯，因为你永远不知道什么突发情况会导致代码丢失。

代码备份方案

![image-20220414235645607](https://img.kuizuo.cn/image-20220414235645607.png)

我只要有代码的项目，都会放到 Github 上，无论公开还是私有项目。一是相当于在云端备份了一份代码，二是可以很方便的分享给别人。但对于私有项目而言存放在别人那总归不好，而且 Github 时常会出现无法访问的情况（即使搭了梯子）。所以就打算搭建一个私有的仓库，基于[GitLab](https://gitlab.com/)。

可以访问 [kuizuo · GitLab](https://gitlab.kuizuo.cn/kuizuo) 来查看搭建效果。



## 页面概览

![image-20220415013028002](https://img.kuizuo.cn/image-20220415013028002.png)

## 前提

一台服务器，系统 Linux，内存 >=4g

我的轻量应用服务器配置如下

![image-20220414210129510](https://img.kuizuo.cn/image-20220414210129510.png)

## 搭建

服务器我选择安装[宝塔面板](https://www.bt.cn/new/index.html)，对于个人项目，还是很推荐安装的，集成了一些软件商店，包括本次的主角，同时提供可视化页面操作，能省下很多敲命令的时间，~~同时也会增加忘记命令的记忆~~。

### 安装 GitLab

进入宝塔面板，点击软件商店，找到**GitLab 最新社区版**，点击安装

![image-20220414204808143](https://img.kuizuo.cn/image-20220414204808143.png)

实测等了 8 分钟，安装完毕即可查看 GitLab 的访问地址，账号密码。默认端口号 8099，记得在防火墙开放下该端口

![image-20220414213002293](https://img.kuizuo.cn/image-20220414213002293.png)

进入访问地址就可以看到 GitLab 的登录页面了。

### 修改密码

[Reset a user's password | GitLab](https://docs.gitlab.com/ee/security/reset_user_password.html#reset-the-root-password)

进入控制台（进入要稍等一段时间）

```bash
sudo gitlab-rails console
```

显示页面如下

```
[root@VM-4-5-centos ~]# sudo gitlab-rails console
--------------------------------------------------------------------------------
 Ruby:         ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-linux]
 GitLab:       14.9.3 (ec11aba56f1) FOSS
 GitLab Shell: 13.24.0
 PostgreSQL:   12.7
------------------------------------------------------------[ booted in 29.71s ]
Loading production environment (Rails 6.1.4.6)
irb(main):001:0>
```

输入如下代码

```bash
u=User.find(1)
u.password='a12345678'
u.password_confirmation = 'a12345678'
u.save!
```

输出结果

```bash
irb(main):001:0> u=User.find(1)
=> #<User id:1 @root>
irb(main):002:0> u.password='a12345678'
=> "a12345678"
irb(main):003:0> u.password_confirmation = 'a12345678'
=> "a12345678"
irb(main):004:0> u.save!
=> true
irb(main):005:0>
```

最后输入`exit`退出控制台，然后输入下方代码重启 gitlab，密码就设置完毕了

```bash
gitlab-ctl restart
```

:::info 若重启或修改端口等操作后出现 502 错误，您可能需要等待 3-5 分钟才能正常访问 GitLab

:::

### 修改语言

点击右上角的头像->Preferences 进入到设置，找到语言设置为简体中文，然后点击左小角的 Save changes。刷新网页语言就设置完毕了

![image-20220414215528543](https://img.kuizuo.cn/image-20220414215528543.png)

### 配置 HTTPS

gitlab 内部集成了 letsencrypt，因此，这里只需要启用 letsencrypt，并进行一些必要的配置

打开/opt/gitlab/etc/gitlab.rb.template，修改以下内容

1. 在 32 行左右，将 external_url 前面的#删掉，并在单引号中填写 gitlab 服务器的 https 地址，例如[https://gitlab.kuizuo.cn](https://gitlab.kuizuo.cn)

   ```
    external_url 'https://gitlab.kuizuo.cn'
   ```

2. gitlab 默认占用 nginx80 端口，所以需要更改下

   ```
   nginx['listen_port'] = 8100
   ```

3. 在 2434 行左右（可通过搜索 letsencrypt 定位），修改下面几项

   ```
   letsencrypt['enable'] = true #删除前面的#号，并将值修改为true
   letsencrypt['contact_emails'] = ['kuizuo12@gmail.com'] #删除前面的#号,修改为自己的邮箱
   letsencrypt['auto_renew'] = true #删除前面的#号  自动更新
   ```

然后重载配置（需要一点时间）

```
gitlab-ctl reconfigure
```

然后重启 gitlab 使配置生效

```
gitlab-ctl restart
```

gitlab 就会通过 letsencrypt 自动签发免费的 HTTPS 证书，等证书签发成功，就可以通过上面指定的域名访问代码仓库了。

**其实也可以在 nginx 创建一个站点，然后该站点配置 ssl，通过反向代理到 127.0.0.1:8099 也是能实现配置 HTTPS 的。（推荐）**

:::danger

如果上面的操作的话，可能会导致 gitlab 的 nginx 无法启动（原因应该是修改了 gitlab 自带的 nginx 服务，或者与自带的冲突）。修改`/opt/gitlab/sv/nginx/run`

```bash
exec chpst -P /opt/gitlab/embedded/sbin/nginx -p /var/opt/gitlab/nginx
# 改为
exec chpst -P /opt/gitlab/embedded/sbin/gitlab-web -p /var/opt/gitlab/nginx
```

重启 gitlab

```bash
gitlab-ctl start
```

:::

## 管理中心

点击左上角的菜单选择管理员，可在管理中心设置 GitLab 的相关设置。例如

### 禁止注册

在设置->通用->注册限制，取消勾选 **已启动注册功能**，这样就可以禁止注册（页面无注册按钮）。当然也可以允许，然后需要批准以及确认邮箱。

![image-20220415004207174](https://img.kuizuo.cn/image-20220415004207174.png)

在概览->用户中可以查看相关用户信息。

![image-20220415012817311](https://img.kuizuo.cn/image-20220415012817311.png)

至于其他设置自行研究了。

## 创建项目

点击新建项目，这里就导入我的 blog 项目。

![image-20220414220221480](https://img.kuizuo.cn/image-20220414220221480.png)

选择 Github 后，会提示使用 GitHub 身份验证，这里需要拿到 Github 的[Token](https://github.com/settings/tokens)

![image-20220414220333437](https://img.kuizuo.cn/image-20220414220333437.png)

访问https://github.com/settings/tokens，新建一个Token，选择token有效期，以及相关权限（我这边选择全选，token不过期）

![image-20220414220507016](https://img.kuizuo.cn/image-20220414220507016.png)

![image-20220414220738714](https://img.kuizuo.cn/image-20220414220738714.png)

生成完毕后复制该 Token 到 GitLab 上，就可以看到该 Github 账号下的所有仓库了，这里我选择 blog 进行导入（导入需要一点时间）。

![image-20220414220858379](https://img.kuizuo.cn/image-20220414220858379.png)

导入完毕后与原仓库无特别区别

![image-20220414224639573](https://img.kuizuo.cn/image-20220414224639573.png)

### 自动同步项目

点击项目中设置->仓库，找到镜像仓库。在 Git 仓库 URL 中填写格式如下

```js
// 原仓库git
https://github.com/kuizuo/blog
// 在https://后加上username@
https://kuizuo@github.com/kuizuo/blog
```

密码为上面的 Token（如果忘记的话，可以在 Github 的 Token 页中 Regenerate token），如下图所示

![image-20220414232028397](https://img.kuizuo.cn/image-20220414232028397.png)

---

基本上 github 能实现的操作 gitlab 也都能实现。

## 其他功能

### Web IDE（在线编辑代码）

![image-20220415001914123](https://img.kuizuo.cn/image-20220415001914123.png)

## 运行状态

放几张图

![image-20220414233435739](https://img.kuizuo.cn/image-20220414233435739.png)

输入 top 命令，按 M 按内存排序。

![image-20220414233416223](https://img.kuizuo.cn/image-20220414233416223.png)

还是挺吃内存的，毕竟安装的时候就要求 4g 内存以上。

有个轻量级的项目管理器 [gitea](https://github.com/go-gitea/gitea) 不妨也是一种选择，但功能上没有 Gitlab 这么丰富。

对于自建 git 服务的选择，这里有篇文章推荐阅读 [自建 Git 服务器：Gitea 与 Gitlab 部署踩坑经历与对比总结 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/486410391)

## 总结

其实回到一开始的问题，既然 Github 有可能访问不了，为啥不要迁移到国内的[Gitee](https://gitee.com/)上。

~~除了瞎玩瞎折腾外~~，对于一些公司而言，他们不一定会使用这类开源的代码托管平台，而是自建一个像 GitLab 这样的代码仓库管理系统。此外别人的东西，多半都会有一定的限制，例如项目成员数量等等，所以才会有这次的尝试，整体体验感觉可玩性很大。

搭建GitLab代码管理仓库

很早就了解与学习过微信小程序开发相关的技术栈与框架，小程序的账号也都已经申请过。但写过的 demo 项目也迟迟没有发布到小程序上。这主要的原因还是觉得不值得发布，加上各种审核相关的。而这次准备写一个搜题相关的小程序，也是时候实战发布一下，顺带记录下整个开发与发布过程。

在线体验：扫下图小程序二维码

![itopic](https://img.kuizuo.cn/itopic.jpg)

小程序的源码地址：[https://github.com/kuizuo/question-man](https://github.com/kuizuo/question-man)



## 技术栈

小程序所采用的是 Taro + Vue3 + NutUI，之所以选这套技术栈，主要是想上 Vue3，而 uniapp 对 Vue3 的支持并不友好，在我的上篇文章中也有说明到，同时支持 uniapp 的 vue3 屈指可数。所以便选用了这套技术栈来进行开发。

## 页面设计

![image-20220405213930313](https://img.kuizuo.cn/image-20220405213930313.png)

## 项目配置

### 项目搭建

[安装及使用 | Taro 文档 (jd.com)](https://taro-docs.jd.com/taro/docs/GETTING-STARTED)

```
taro init myApp
```

配置如下

![image-20220405214126617](https://img.kuizuo.cn/image-20220405214126617.png)

安装完依赖，使用`npm run dev:weapp`，在打开微信开发者工具，导入项目即可。

### axios 封装

web 端 http 请求使用最多的库就是 axios 了，但是在小程序中使用 axios 会提示 adapter 未定义，原因是小程序不能解析 package.json 中的 browser module 等字段。

要使用 axios 的话可以安装 axios-miniprogram 或者 taro-axios 库（我选择后者，但前者稍小 5kb），也就是会适配小程序的 axios 的 adapter，引入和使用与 axios 并不特别大的差异。以下是我封装后的代码

```typescript title=“utils/http.ts”
import axios from 'taro-axios'
import Taro from '@tarojs/taro'
import { useAuthStore } from '@/stores/modules/auth'

const showErrorToast = msg => {
  Taro.showToast({
    title: msg,
    icon: 'none',
  })
}

const instance = axios.create({
  baseURL: process.env.BASE_URL,
})

instance.interceptors.request.use(
  config => {
    Taro.showLoading({
      title: '加载中',
      mask: true,
    })
    let token = Taro.getStorageSync('token')
    if (typeof token == 'undefined') {
      token = ''
    }
    config.headers = {
      'Content-Type': 'application/json;charset=utf-8',
      Authorization: token,
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  },
)

// respone拦截器
instance.interceptors.response.use(
  (response: any) => {
    Taro.hideLoading()
    if (response.data.isError) {
      showErrorToast(response.data.error.message)
    } else {
      return response
    }
  },
  error => {
    if (error.response) {
      Taro.hideLoading()
      console.log('err', error)

      let res = error.response.data
      switch (res.code) {
        case 400:
          showErrorToast(res.message || '非法请求')
          break
        case 401:
          const authStore = useAuthStore()
          authStore.login()
          // showErrorToast(res.message || '当前登录已过期，请重新登录')
          // Taro.navigateTo({
          //   url: '/pages/login/index'
          // })
          break
        case 403:
          showErrorToast(res.message || '非法请求')
          break
        case 404:
          showErrorToast(res.message || '请求资源不存在')
          break
        case 500:
        case 502:
          showErrorToast(res.message || '服务器开小差啦')
          break
        default:
          showErrorToast(res.message || res.statusText)
      }
    } else {
      console.log(error)
      showErrorToast('请检查网络连接状态')
    }

    return Promise.reject(error)
  },
)

export default instance
```

没什么好说的，和网页端基本一致。主要是加了个 wx 的 Loading 与 Toast。然后在 token 失效的时候，应该是要跳转到登录页面，但我并没有编写登录页面，而是重新调用一遍 login，达到静默登录的效果。

### 获取用户唯一标识（openid）

借助微信小程序能十分方便的获取到微信用户。在微信中，为了识别用户，每个用户针对每个公众号或小程序等应用会产生一个安全的 openid，开发者可以通过这个标识识别出用户。

要获取 openid 有以下几种方法(这里以 Taro 为例子，而为 wx 官方文档)，具体代码可在官方文档中查看到。

[Taro.login(option) | Taro 文档 (jd.com)](https://taro-docs.jd.com/taro/docs/apis/open-api/login/)

首先调用`Taro.login()` 获取 5 分钟时长的 code，然向 api.weixin.qq.com 获取 openid 代码如下

```javascript
Taro.login({
  success(res) {
    let code = res.code
    let appId = '小程序->开发管理->开发设置->开发者ID获取'
    let appSecret = '小程序->开发管理->开发设置->开发者ID获取'
    Taro.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session',
      data: {
        appid: appId,
        secret: appSecret,
        js_code: res.code,
        grant_type: 'authorization_code',
      },
      method: 'GET',
      success(res) {
        console.log('openid', res.data.openid) // 得到openid
        console.log('session_key', res.data.session_key) // 得到 session_key
      },
    })
  },
})
```

但现在小程序是无法添加 api.weixin.qq.com 域名，所以上面的方案在小程序端失效，只能转到后端上。小程序官方有张实践图

![img](https://mmbiz.qpic.cn/mmbiz_jpg/JpltBJ31poWJDK7SWLI8Y52j3eL3jVicRyXKjo60OsUwcHb3BGm2YKvOF45TC4yVIWMT28pJO3YBvsiaGkGdEJDQ/640?wx_fmt=jpeg)

整个步骤

1、调用**wx.login 获取 code**，此时也可调用 wx.getUserInfo 来获取用户数据（昵称，头像）

2、由于**小程序后台授权域名无法授权微信的域名**，所以需要**将 code 与用户数据传入到自己的服务器**上。

3、服务器后台接收到 code，**后台将 appid+appsecret+code 向微信 api 服务获取用户的登录态信息（openid 与 session_key）**，服务器对这些登录态信息进行封装，如 session 或者 jwt 的 token 都可以（这里以 token 为例），返回给小程序端

4、小程序接收到 token 时，将其保存到本地存储上（wx.setStorage），每次携带该 token 请求向服务器发送请求。

不过如果使用云开发可以免去很多鉴权相关的，但由于数据库存储相关的，所以我是采用自建后台服务器，而后端暂不考虑开源，故具体逻辑代码就不演示了（考虑安全为主），自行编写后端 login 接口。

### 获取手机号

**注意：只有企业小程序才可以获取用户手机号，个人小程序没有办法获取的。**

在这篇文章中有说明到如何获取 [5 行代码获取小程序用户手机号 | 微信开放社区 (qq.com)](https://developers.weixin.qq.com/community/develop/article/doc/000c462925c610ecc899b11d751013)

[获取手机号 | 微信开放文档 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)

所以就没有然后了（因为我肯定是个人账号）。

### 获取用户信息

要获取用户信息的需要调用 getUserProfile，演示代码如下

```javascript
Taro.getUserProfile({
    desc: '获取用户个人信息',
    success: function(res) {
    const userInfo = res.userInfo
    console.log(res.userInfo)
    }
}
```

要注意的是 getUserProfile 必须通过按钮来触发，而不能通过生命周期的形式，弹出授权窗口，用户可接受与拒绝。说白了就是开发者无法在用户不知情的情况下获取到用户信息（考虑到用户隐私相关的）

同时有一个小坑，getUserInfo 获取到微信用户与灰色头像

由于小程序官方调整了接口，导致 getUserInfo 无法获取正确的用户信息。详情可看 [小程序登录、用户信息相关接口调整说明 | 微信开放社区 (qq.com)](https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=login)

一个正常的登录流程:

按理来说一般是要提供一个专门的登录页面，哪怕登录页面只有一个按钮，按钮名为一键登录。然后用户点击触发 getUserProfile 获取用户信息，如果用户拒绝则不允许使用软件，允许则进入主页，然后将用户信息保存置服务器上，以便下次用户访问时无需再次调用 getUserProfile 接口，直接从服务器上取。

而我的做法相对比较粗略，我是直接允许用户进入首页，但当他**使用搜索功能时**，则判断服务器是否存有该用户的信息，如果没有，调用 getUserProfile，弹出授权框给用户选择。同时在首页的时候通过 checkSession 来判断 session 是否过期，过期则调用 wx.login 静默登录，更新登录态。（不过如果后端不判断该用户信息是否完善的话，那么是有办法直接绕过这种方式来进行调用接口了）。

### 数据库搭建

实际上这个小程序最主要的依赖就是数据库了，而这个数据库与传统的关系型（Mysql）和文档型（MongoDB）不同，要做到搜索引擎式的搜索。举个例子，搜索“李白”，能得到 【李白的诗风是】【李白的称呼】有关李白的字样，并且要求返回的速度快。像上面举到的两种数据库实现起来不方便，如果涉及到千万级别的数据库，将是按秒，甚至数十秒的响应速度。

而我所选择的数据库是[Elasticsearch](https://www.elastic.co/cn/elasticsearch/)，能很轻松的实现上面的效果，并且有个很客观的响应速度。（具体实现自行了解，后端代码暂不考虑开源）

## 上传发布

当本地开发完毕时，点击右上角的上传，填写版本号相关以及项目备注，然后上传成功如下图

![image-20220403125339679](https://img.kuizuo.cn/image-20220403125339679.png)

在版本管理中的开发版本可以看到刚刚上传的代码

![image-20220403133323838](https://img.kuizuo.cn/image-20220403133323838.png)

点击提交审核后，会提示确保项目不是测试版与 Demo（否则将受到相应处罚）如下图

![image-20220403133707429](https://img.kuizuo.cn/image-20220403133707429.png)

### 测试版

或者选择体验版（只有管理员与体验者的账号才可以访问），扫描体验版的二维码，即可使用微信访问项目。

### 审核版本

如果是要发布正式版的话，还需要填写如下表格，接着静等 1-7 天即可（可选择加急，一年一次）

![image-20220406003544712](https://img.kuizuo.cn/image-20220406003544712.png)

等待审核完毕，实测一天内，审核版本如下

![image-20220406123345533](https://img.kuizuo.cn/image-20220406123345533.png)

### 线上版本

最终提交发布，线上版本如下

![image-20220406125311142](https://img.kuizuo.cn/image-20220406125311142.png)

至此，用户即可打开微信，通过小程序访问到该应用。

### 关于改名

可能有些人（这个人就是我）会担心自己上线小程序后，期间能否改名，有何影响。

首先是可以改名的，小程序的标识是 APPID，而不是一个名称。但**改名会直接影响到用户对小程序的认知，从而影响小程序用户流失**。同时改名要求很苛刻，会检索是否有相似同名小程序，以及是否有商标证明等等，并且一年只能修改两次名字，所以起名与改名都要慎重。

## 一些开发时的注意事项（坑）

### request:fail url not in domain list（跨域）

浏览器最烦躁之一跨域，在小程序上也不一意外，但小程序更加苛刻，即便后端允许跨域，小程序请求也会提示标题所示错误。这时候一般就如下几种做法。

[网络 | 微信开放文档 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html)

首先要确保是 https，同时开发时为了方便调试，一般会在本地设置中勾选，不效验合法域名选项，如下

![image-20220403012958069](https://img.kuizuo.cn/image-20220403012958069.png)

这时候开发环境下就能正常发送请求相关了（我这里后端是直接允许跨域了，不然需要在 config/index.js 中设置 devServer.proxy 的反向代理）。

但在生成环境下就需要在[小程序](https://mp.weixin.qq.com)中的开发管理中配置服务器域名了

![image-20220403013733314](https://img.kuizuo.cn/image-20220403013733314.png)

点击开始配置会提示身份认证相关，扫完码后将会到如下配置

![image-20220403013828824](https://img.kuizuo.cn/image-20220403013828824.png)

这里就是填写生产环境下要请求资源的域名了，并且是需要开启 https 的。

设置完毕，重启微信开发者工具或刷新项目配置，这里需使用小程序账号的 AppID 进行登录，测试号无效，然后项目配置就会设置好 request 合法域名，再次请求便能正常响应。

![image-20220403014345645](https://img.kuizuo.cn/image-20220403014345645.png)

### pinia 持久化

pinia 有个插件`pinia-plugin-persist`，可以对 store 状态进行持久化操作，在小程序中引入时则会提示 sessionStorage is not defined，原因是小程序中并无 sessionStorage 与 localStorag。所以还是得使用原生的数据缓存方法（getStorage，setStorage）来解决，或者将数据存至后端。

### 第三方组件修改样式

在 vue3 中要修改第三方组件库中的组件样式的话，需要使用 `:deep(css选择器)`，同时一般会在 style 加上 scoped，但如果在小程序中使用会发现子组件并不生效，而编译成 h5 却生效。我在这个 issues [taro 3.0 + Vue 中 scoped 在 h5 下生效，在微信小程序中无效](https://github.com/NervJS/taro/issues/6662) 下找到了解决问题

在 h5 模式下 scoped 会生成**[data-v-xxx]** 的属性，但是在小程序下则不会有，所以使用 scopd 在小程序中是无用的。就可以使用 cssModules，前提是需要在 config/index.js 中添加 cssModules 的支持，在上面 issues 中提到过，具体也就这样。

然后在 style 中添加 module 即可生效，都不用使用`:deep` 。

### invalid code, rid: 6249d588-48af462b-xxxxxxx

服务器将 wx.login 获取到的 code 向小程序 API 获取 openid 的时候，如果提示该错误，那么大概率是 APPID 有问题，使用了测试号或者填写了错误 APPID。

## 总结

由于小程序(h5 手机端)应用写的少，所以在页面布局方便写的相对简陋，但本质与前端开发无特别大致区别，无非就是自定义了些相关的标签与 api，遇到时在查阅即可。

但相比传统 Web 开发而言，网站是无需审核只需要有个公网服务器就能访问，而小程序必须要经过审核才可发布，同时对小程序名称有严格的审核。主要方便在于微信用户的获取，同时提供完备的开发以及部署环境（开发者工具，云开发），加上用户数据分析等等。

在我发布完以及写完本文章后，我的建议是：

> 如非必要，不建议上传小程序供他人访问，尤其对于个人开发者而言，网页版也许是个更好的选择。

在回到开发者的角度，Taro 对 Vue3 的体验远比 Uniapp 来的好（至少目前是这样的，个人感受），Uniapp 太依赖于自家的 Hbuilder，但目前 Taro 的 Vue3 无法编译成安卓（React Native），所以如果考虑安卓端与小程序的话，还是 Uniapp 略胜一筹，H5 两者区别不大。但如果只是写小程序，我还是会毫不犹豫使用的使用 Taro。