純前端 分支: 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
npm install -g pnpm
2. 安裝 nrm
npm install -g nrm
3. 使用 nrm 添加阿里鏡像
nrm add taobao https://registry.npmmirror.com/
4. nrm 查看鏡像列表
nrm ls
5. nrm 應用對應鏡像
nrm use taobao
安裝項目依賴
推薦使用 pnpm
pnpm install
或 yarn
yarn install
啟動
# 推薦使用 pnpm
pnpm dev
# 或 yarn
yarn dev
或 Makefile(需要自行配置系統環境,谷歌 make 命令環境搭建)
make dev
編譯
# 推薦使用 pnpm
pnpm run build
# 或 yarn
yarn run build
# 或 Makefile
make dist
瀏覽器支持
開發和測試平臺均在 Google 和最新版 EDGE 上完成,暫未測試 IE11 等其它瀏覽器,如有需求請自行測試與兼容。
Pro 部分功能展示
體驗地址: https://ai.goviewlink.com/saas/
0_init_db.sql
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進行部署
version: '3.4'# 公共日志配置
x-logging:&default-loggingdriver: "json-file"options:tag: "{{.ImageName}}/{{.Name}}/{{.ID}}"labels: "application.name,application.type"# 公共資源限制配置
x-resource:&default-resourceresources:limits:memory: 1536Mservices:ui:image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/go-view:latestrestart: alwaysdepends_on:- servebuild:context: ./uiports:- "7080:80"volumes:- ./ui/http.conf:/etc/nginx/conf.d/http.confserve:image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/go-view-serve:latestrestart: alwaysdepends_on:- dbbuild:context: ./serveenvironment: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: rootSPRING_DATASOURCE_DRUID_MASTER_PASSWORD: rootlogging: *default-loggingdeploy: *default-resourcedb:image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/mysql:5.7.44restart: alwaysports:- "3306:3306"environment:MYSQL_ROOT_PASSWORD: rootMYSQL_DATABASE: springbootv2volumes:- /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.sqllogging: *default-loggingdeploy: *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.基本使用
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異常