项目概述

hippo 测试工具为前后端分离项目，前端 vue、后端 springboot、数据库 mysql、对象存储 minio、任务调度 xxl-job、Selenoid。

主要功能如下；

• 【自动化测试】统计图标、元素管理、变量管理、用例管理、执行计划、测试报告

• 【自动化管理】项目管理、告警管理、服务管理、脚本管理

• 【测试工具】数据生成、用例生成

• 【系统管理】用户管理、角色管理

环境部署

准备工作

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐8.0版本)
Maven >= 3.0
Node >= 14 (推荐14.x版本)

前端安装完 node 后，最好设置下淘宝的镜像源，不建议使用 cnpm（可能会出现奇怪的问题）

运行系统

前往Gitee下载页面 (gitee 地址) 下载解压到工作目录

建议使用Git克隆，因为克隆的方式可以和hippo随时保持更新同步。使用Git命令克隆。

git clone https://gitee.com/zhuzhanhao1/hippo.git

本地部署

后端运行

建议使用 IDEA，open back 目录，使用 maven 进行安装依赖。

创建数据库hippo，运行数据库初始化文件init/ init.sql。

配置 application-local.yaml。

server:
  port: 8080
spring:
  config:
    activate:
      on-profile: local
  datasource:
    url: 数据库地址
    username: 数据库账号
    password: 数据库密码
    druid:
      test-while-idle: false
      validation-query: SELECT 1
  servlet:
    multipart:
      max-file-size: 50MB
      max-request-size: 50MB
logging:
  config: classpath:logback-local.xml
minio: #安装方式自行百度           
  accessKey: admin
  secretKey: admin123
  bucket: hippo
  endpoint: http://127.0.0.1:9000
xxl: #安装方式自行百度 
  job:
    admin:
      addresses: http://127.0.0.1:8081/xxl-job-admin  #xxljob调度中心部署  例如：http://127.0.0.1:8080/xxl-job-admin
    executor:
      appname: hippo-local #xxljob配置的执行器名称，
      address: http://ip:9999
      ip: #执行器IP，默为空表示自动获取IP
      port: 9999 #xxljob配置的端口号，默认为9999
      logpath:   #执行器运行日志文件存储磁盘路径
      logretentiondays: -1  #调度中心日志表数据保存天数，过期日志自动清理；限制大于等于7时生效，否则, 如-1，关闭自动清理功能
    accessToken: default_token #调度中心通讯TOKEN [选填]：非空时启用

启动 MyApplication 文件，出现 Started MyApplication in 4.454 seconds (JVM running for 5.1)表示启动成功。

前端运行

1.安装前端依赖包，启动前端服务

# 进入项目目录
cd vue

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

2.打开浏览器，输入：(地址) 默认账户/密码 admin/123456）

若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

传统部署

1.前端打包（npm run build），将打包的 dist 文件夹放入 nginx 目录，修改 nginx.conf 配置文件。

server {
        listen       80;
        server_name  localhost;

        location / {
            root   E:\\nginx-1.20.1\\dist; #dist包目录地址
            index  index.html index.htm;
            #try_files    $uri $uri/ /index.html;     #url不可达时，逐个向后转发

        }

        #这里解决跨域问题，后端地址及端口号
        location /api {
            rewrite "^/api/(.*)$" /$1 break;   #对指定的路径进行转发到后台
            proxy_pass http://localhost:8080;  #后端服务地址
            proxy_redirect    off;
            proxy_set_header  Host $host;
            proxy_set_header  X-real-ip $remote_addr;
            proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

2.后端打包（mvn package）使用 application-prod.yaml 的配置文件，执行如下命令。

# 进入到jar目录
cd jar目录

# 启动后端服务
java -jar hippo-1.0.jar

3.启动 NGINX（启动前端）

# 启动nginx
nginx.exe start

# 优雅地停止Nginx服务（即处理完所有请求后再停止服务）
nginx.exe -s quit

# 重启Nginx服务
nginx.exe -s reload

Docker 部署

1.修改 docker-compose.yaml 配置文件

version: "3"
services:
 nginx: # 服务名称，用户自定义
  image: nginx:latest  # 镜像版本
  container_name: nginx
  ports:
    - "80:80"  # 暴露端口
  volumes: # 挂载
    - ./vue/dist:/usr/share/nginx/html
    - ./conf/nginx.conf:/etc/nginx/nginx.conf
  privileged: true # 这个必须要，解决nginx的文件调用的权限问题
 mysql:
  image: mysql:8.0.23
  container_name: mysql
  ports:
    - "3306:3306"
  environment:
    - MYSQL_HOST=localhost
    - MYSQL_PORT=3306
    - MYSQL_DATABASE=hippo
    - MYSQL_ROOT_PASSWORD=123456
  volumes:
    - /data/mysql/data:/var/lib/mysql      #本地MySQL数据目录映射容器数据存储目录
    - ./init:/docker-entrypoint-initdb.d/  #启动MySQL服务后执行初始化sql
#    - ./mysql/sql:/opt/sql
 hippo:
  image: hippo-1.0:latest
  container_name: hippo
  build: . # 表示以当前目录下的Dockerfile开始构建镜像
  volumes:
    - C:/driver:/driver/ #谷歌驱动
  ports:
    - "8080:8080"
  depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
    - nginx
    - mysql

2.启动服务

# 启动项目 自动完成 构建镜像、（重新）创建服务、按依赖顺序启动任何关联的服务。首次启动安装chrome时间较长 大概2分钟。
docker compose up -d

# 停止并删除docker-compose.yml中定义的所有服务容器和网络，但保留数据卷
docker compose down

致谢

​ Spring Boot-Shiro-Vue 提供一套基于 SpringBoot-shiro-vue 的权限管理

项目地址

• 项目地址：gitte 地址

• 会一致保持更新，欢迎 fork 和 Star 哦！

• 若对工具有任何疑问、建议的请提 issues，我看到都会回复。