# 我的工具箱-前端

**Repository Path**: LOVE0612/tools-ui

## Basic Information

- **Project Name**: 我的工具箱-前端
- **Description**: 自主研发、自己使用的工具箱。
欢迎来到我的博客：https://www.cnblogs.com/LOVE0612
欢迎来到我的慕课：https://www.imooc.com/u/5135129/courses?sort=publish
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-26
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1. 项目介绍

ToolBoxUI 是 ToolBox 微服务平台的前端 UI 项目，提供用户界面和交互功能。

基于 AdminLTE 3.2.0 管理模板开发，采用原生 JavaScript/jQuery，无前端框架依赖。

# 2. 技术栈

| 层级  | 技术 | 版本 |
|-----|------|------|
| UI 框架 | AdminLTE | 3.2.0 |
| CSS 框架 | Bootstrap | 4.6 |
| JavaScript | jQuery | - |
| Web 服务器 | Nginx | - |
| 部署 | Docker / Docker Compose | - |

# 3. 功能列表

1. 用户登录/登出
2. 基础功能：用户管理、角色权限、消息信件、脚本仓库
3. 数据管理：数据源、备份恢复、数据对比
4. 容器管理：Docker 宿主机、镜像、容器、网络
5. 云服务管理：vSphere 虚拟机、计算池、存储池、网络

待填的坑：不胜枚举...

# 4. 目录结构

```
ToolBoxUI/
├── login.html              # 登录页面（入口）
├── iframe.html             # 主应用框架
├── adminLTE/               # AdminLTE 模板资源
│   ├── css/
│   ├── js/
│   └── img/
├── cloud/                  # 应用页面
│   ├── html/               # 功能页面（数据、Docker、云、自动化）
│   ├── js/                 # 页面 JavaScript
│   ├── css/                # 自定义样式
│   └── image/              # 图片文件
├── plugins/                # 第三方插件
├── nginx.conf              # Nginx 配置
└── docker-compose.yml      # Docker 部署配置
```

# 5. 服务依赖

前端服务依赖后端 ToolBox 微服务，通过 Nginx 反向代理将 `/api` 和 `/gateway` 请求代理到 `gateway-center`。

```
浏览器 → Nginx (静态文件 + 反向代理) → gateway-center → 各业务服务
```

# 6. 快速部署

## 6.1 安装 docker-compose

以 centos 为例：

```shell
yum install epel-release
yum install docker
yum install docker-compose
```

## 6.2 创建容器网络

```shell
docker network create tool-box
```

## 6.3 部署前端服务

```shell
yum install git
git clone https://gitee.com/LOVE0612/tools-ui
cd tools-ui
docker-compose up -d
```

如果不想克隆整个仓库，仅需下载 `docker-compose.yml` 即可。

## 6.4 验证

```shell
docker ps
```

需要容器状态为 healthy。

## 6.5 访问

http://xxx.xxx.xxx.xxx