
纯前端 分支: master
👻 携带 后端 请求分支: master-fetch
📚 GoView 文档 地址:https://www.mtruning.club/
项目纯前端-Demo 地址:https://vue.mtruning.club/
项目带后端-Demo 地址:https://demo.mtruning.club/
Cloud IDE 代码在线预览地址:https://idegitee.com/dromara/go-view
🤯 后端项目看这里!
后端地址(社区实现,仅供参考):
JAVA https://gitee.com/MTrun/go-view-serve (当前使用)
.NET https://gitee.com/sun_xiang_yu/go-view-dotnet
NODE https://gitee.com/qwdingyu/led
Docker 镜像 https://gitee.com/AHEAD4/go-view-docker
GO-goframe https://gitee.com/bufanyun/go-view-server
GO-gin https://gitee.com/ls1990/go-view-serve
整体介绍
框架:基于 Vue3 框架编写,使用 hooks 写法抽离部分逻辑,使代码结构更加清晰;
类型:使用 TypeScript 进行类型约束,减少未知错误发生概率,可以大胆修改逻辑内容;
性能:多处性能优化,使用页面懒加载、组件动态注册、数据滚动加载等方式,提升页面渲染速度;
存储:拥有本地记忆,部分配置项采用 storage 存储本地,提升使用体验;
封装:项目进行了详细的工具类封装如:路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
可视化:基于开源图表库ECharts 和 VChart 编写,具有丰富的图表类型和适配大屏的主题效果;
入选 NaiveUI 社区精选资源推荐:查看 NaiveUI 推荐列表
安装
推荐使用 pnpm 管理项目,并使用 nrm 切换到阿里镜像,整体安装步骤如下:
1. 安装 pnpm
bash
npm install -g pnpm
2. 安装 nrm
bash
npm install -g nrm
3. 使用 nrm 添加阿里镜像
bash
nrm add taobao https://registry.npmmirror.com/
4. nrm 查看镜像列表
bash
nrm ls
5. nrm 应用对应镜像
bash
nrm use taobao
安装项目依赖
推荐使用 pnpm
bash
pnpm install
或 yarn
bash
yarn install
启动
bash
# 推荐使用 pnpm
pnpm dev
bash
# 或 yarn
yarn dev
或 Makefile(需要自行配置系统环境,谷歌 make 命令环境搭建)
bash
make dev
编译
bash
# 推荐使用 pnpm
pnpm run build
bash
# 或 yarn
yarn run build
bash
# 或 Makefile
make dist
浏览器支持
开发和测试平台均在 Google 和最新版 EDGE 上完成,暂未测试 IE11 等其它浏览器,如有需求请自行测试与兼容。
Pro 部分功能展示
体验地址: https://ai.goviewlink.com/saas/
0_init_db.sql
bash
DROP DATABASE IF EXISTS springbootv2;
CREATE DATABASE springbootv2;
CREATE USER 'root'@'%' identified by 'root';
GRANT ALL PRIVILEGES ON *.* to 'root'@'%';
FLUSH PRIVILEGES;
使用docker-compose.yml进行部署
bash
version: '3.4'
# 公共日志配置
x-logging:
&default-logging
driver: "json-file"
options:
tag: "{{.ImageName}}/{{.Name}}/{{.ID}}"
labels: "application.name,application.type"
# 公共资源限制配置
x-resource:
&default-resource
resources:
limits:
memory: 1536M
services:
ui:
image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/go-view:latest
restart: always
depends_on:
- serve
build:
context: ./ui
ports:
- "7080:80"
volumes:
- ./ui/http.conf:/etc/nginx/conf.d/http.conf
serve:
image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/go-view-serve:latest
restart: always
depends_on:
- db
build:
context: ./serve
environment:
SPRING_APPLICATION_JSON: '{"fuce":{"default-base-dir":"/data/files", "upload_img_url": "/static/file_upload/"}}'
SPRING_DATASOURCE_DRUID_MASTER_URL: 'jdbc:mysql://db:3306/springbootv2?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false'
SPRING_DATASOURCE_DRUID_MASTER_USERNAME: root
SPRING_DATASOURCE_DRUID_MASTER_PASSWORD: root
logging: *default-logging
deploy: *default-resource
db:
image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/mysql:5.7.44
restart: always
ports:
- "3306:3306"
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: springbootv2
volumes:
- /data/deploy/mysql:/var/lib/mysql
- ./0_init_db.sql:/docker-entrypoint-initdb.d/0_init_db.sql
- ./serve/src/doc/goview_v2.sql:/docker-entrypoint-initdb.d/goview_v2.sql
logging: *default-logging
deploy: *default-resource
使用发布到docker hub的镜像启动
首先clone源代码后进入项目根目录,命令git clone --recursive https://gitee.com/AHEAD4/go-view-docker --recursive是必须的否则会缺少源代码。
运行docker-compose pull,等待镜像拉取完成。
运行docker-compose up -d,启动服务后进入后台运行。
使用浏览器访问http://127.0.0.1:7080/
账号密码均为admin
注意:数据库未做持久化,如需持久化请挂载卷或宿主机目录(参考yml中被db备注的volume配置)
3.源码目录
./ui/src 前端源代码子模块
./serve/src 后台服务源代码子模块
4.基本使用
bash
docker-compose up -d 启动并进入后台运行
docker-compose build 基于配置文件指定的Dockerfile构建镜像
docker-compose ps 查看当前容器运行状态
docker-compose logs -f 容器名或ID 持续查看当前容器日志
docker-compose stop 容器名或ID 停止容器
docker-compose stop 容器名或ID 启动容器
docker-compose restart 容器名或ID 重启容器
docker-compose down 停止全部服务并销毁全部容器
5.注意事项
经测试在以下环境可成功构建并启动
macOS 12.5 X64 && Docker Desktop 3.4.0 && Engine 20.10.22
Centos 7.5 X64 && Docker Engine 19.03.12
Windows11 X64 && Docker Desktop 4.16.2 && Engine 20.10.7
注意:使用docker构建前端镜像,node环境在编译时需要大量内存,如果使用windows或者mac的桌面平台建议将Resouces中的内存分配设定高于16G,Linux平台内存不可低于16G,否则可能会出现JavaScript heap out of memory异常