gin vue admin
2024/10/20
영어 | 중국어 간체
온라인 문서: https://www.gin-vue-admin.com
초기화
환경부터 배포까지 교육 영상
개발 교육(기고자: LLemonGreen And Fann)
커뮤니케이션 커뮤니티
플러그인 시장
1. 이 프로젝트에는 시작부터 개발, 배포까지 문서와 자세한 비디오 튜토리얼이 있습니다.
2. 이 프로젝트에서는 golang과 vue에 대한 특정 기초가 필요합니다.
3. 튜토리얼과 문서를 통해 모든 작업을 완료할 수 있으므로 더 이상 무료 기술 서비스를 제공하지 않습니다. 서비스가 필요한 경우 유료 지원을 제공하세요.
4. 이 프로젝트를 상업적 목적으로 사용하는 경우 Apache2.0 계약을 준수하고 작성자의 기술 지원 설명서를 보관하십시오. 로그 및 코드에 포함된 저작권 설명 정보뿐만 아니라 다음 저작권 설명 정보도 유지해야 합니다. 필수 보유 정보는 카피라이팅 성격을 갖고 있으며, 상업적으로 이용하기로 결정하거나[수익을 창출하는 사업 활동은 모두 상업적 이용], 삭제해야 하는 경우에는 구매 승인을 받으시기 바랍니다.
Gin-vue-admin은 프론트엔드와 백엔드를 분리한 vue와 gin 기반의 풀스택 개발 플랫폼으로, jwt 인증, 동적 라우팅, 동적 메뉴, casbin 인증, 폼 생성기, 코드 생성기 등의 기능을 통합하고 제공합니다. 다양한 기능을 제공하므로 비즈니스 개발에 더 많은 시간을 집중할 수 있습니다.
온라인 미리보기: http://demo.gin-vue-admin.com
테스트 사용자 이름: admin
테스트 비밀번호: 123456
안녕하세요! 먼저 gin-vue-admin을 이용해 주셔서 감사합니다.
Gin-vue-admin은 신속한 연구 및 개발을 위해 준비된 프런트엔드 및 백엔드 분리 아키텍처를 갖춘 오픈 소스 프레임워크 세트입니다.
Gin-vue-admin의 성장은 모든 사람의 지원과 분리될 수 없습니다. 코드를 기여하거나 gin-vue-admin에 대한 제안을 제공하려는 경우 다음 내용을 읽어보십시오.
이슈는 버그나 기능을 제출하는 데에만 사용되며 기타 콘텐츠는 바로 종료될 수 있습니다.
문제를 제출하기 전에 해당 내용이 제기되었는지 검색해 보세요.
먼저 자신의 프로젝트에 복사본을 포크하세요. 웨어하우스 바로 아래에 브랜치를 만들지 마세요.
커밋 정보는 README.md: fix xxx bug 와 같은 [文件名]: 描述信息형식으로 작성해야 합니다.
버그를 수정하는 경우 PR에 설명 정보를 제공해 주세요.
코드를 병합하려면 두 명의 관리자가 참여해야 합니다. 한 사람은 검토하고 승인하고 다른 한 사람은 다시 검토하며 검토를 통과한 후 병합할 수 있습니다.
- node版本 > v16.8.3 - golang版本 >= v1.22 - IDE推荐：Goland
Goland 와 같은 편집 도구를 사용하여 서버 디렉터리를 엽니다. gin-vue-admin 루트 디렉터리를 열지 마십시오.
# 프로젝트를 복제합니다 git clone https://github.com/flipped-aurora/gin-vue-admin.git# 서버 폴더를 입력합니다. cd server# go mod를 사용하여 go 의존성 패키지를 설치합니다 go generate# 실행 go run.
# 웹 폴더를 입력하세요 cd web # 종속성 설치 npm install # 웹 프로젝트 시작 npm run Serve
github.com/swaggo/swag/cmd/swag@latest 설치로 이동하세요.
CD 서버 장식 초기화
위 명령을 실행하면 docs 폴더에 있는
docs.go,swagger.json,swagger.yaml세 파일이 서버 디렉터리에 나타납니다. go 서비스를 시작한 후 http://localhost:8888/swagger 를 입력합니다. browser. /index.html을 사용하여 Swagger 문서를 확인하세요.
VSCode 사용하여 루트 디렉터리에 있는 작업 공간 파일 gin-vue-admin.code-workspace 엽니다. 사이드바에 3개의 가상 디렉터리( backend , frontend , root 가 표시됩니다.
실행 및 디버깅에서 Backend , Frontend , Both (Backend & Frontend) 세 가지 작업을 볼 수도 있습니다. Both (Backend & Frontend) 실행하면 프런트엔드와 프런트엔드 프로젝트를 동시에 시작할 수 있습니다.
작업 공간 구성 파일에는 VSCode 자체에 사용되는 go 도구 환경 변수인 go.toolsEnvVars 필드가 있습니다. 또한 여러 go 버전이 있는 시스템에서는 gopath 및 go.goroot 통해 실행 중인 버전을 지정할 수 있습니다.
"go.gopath": null, "go.goroot": null,
프런트 엔드: Vue 기반 요소를 사용하여 기본 페이지를 구축합니다.
백엔드: Gin을 사용하여 기본적인 Restful 스타일 API를 빠르게 구축하세요. Gin은 Go 언어로 작성된 웹 프레임워크입니다.
데이터베이스: MySql > (5.7) 버전 데이터베이스 엔진 InnoDB를 사용하고 gorm을 사용하여 데이터베이스에 대한 기본 작업을 구현합니다.
캐싱: Redis 사용하여 현재 활성 사용자의 jwt 토큰을 기록하고 다중 지점 로그인 제한을 구현합니다.
API 문서: Swagger 사용하여 자동화 문서를 작성하세요.
구성 파일: fsnotify 및 viper를 사용하여 yaml 형식의 구성 파일을 구현합니다.
로깅: zap을 사용하여 로깅을 구현합니다.
├── server ├── api (api层) │ └── v1 (v1版本接口) ├── config (配置包) ├── core (核心文件) ├── docs (swagger文档目录) ├── global (全局对象) ├── initialize (初始化) │ └── internal (初始化内部函数) ├── middleware (中间件层) ├── model (模型层) │ ├── request (入参结构体) │ └── response (出参结构体) ├── packfile (静态文件打包) ├── resource (静态资源文件夹) │ ├── excel (excel导入导出默认路径) │ ├── page (表单生成器) │ └── template (模板) ├── router (路由层) ├── service (service层) ├── source (source层) └── utils (工具包) ├── timer (定时器接口封装) └── upload (oss接口封装) web ├── babel.config.js ├── Dockerfile ├── favicon.ico ├── index.html -- 主页面 ├── limit.js -- 助手代码 ├── package.json -- 包管理器代码 ├── src -- 源代码 │ ├── api -- api 组 │ ├── App.vue -- 主页面 │ ├── assets -- 静态资源 │ ├── components -- 全局组件 │ ├── core -- gva 组件包 │ │ ├── config.js -- gva网站配置文件 │ │ ├── gin-vue-admin.js -- 注册欢迎文件 │ │ └── global.js -- 统一导入文件 │ ├── directive -- v-auth 注册文件 │ ├── main.js -- 主文件 │ ├── permission.js -- 路由中间件 │ ├── pinia -- pinia 状态管理器，取代vuex │ │ ├── index.js -- 入口文件 │ │ └── modules -- modules │ │ ├── dictionary.js │ │ ├── router.js │ │ └── user.js │ ├── router -- 路由声明文件 │ │ └── index.js │ ├── style -- 全局样式 │ │ ├── base.scss │ │ ├── basics.scss │ │ ├── element_visiable.scss -- 此处可以全局覆盖 element-plus 样式 │ │ ├── iconfont.css -- 顶部几个icon的样式文件 │ │ ├── main.scss │ │ ├── mobile.scss │ │ └── newLogin.scss │ ├── utils -- 方法包库 │ │ ├── asyncRouter.js -- 动态路由相关 │ │ ├── btnAuth.js -- 动态权限按钮相关 │ │ ├── bus.js -- 全局mitt声明文件 │ │ ├── date.js -- 日期相关 │ │ ├── dictionary.js -- 获取字典方法 │ │ ├── downloadImg.js -- 下载图片方法 │ │ ├── format.js -- 格式整理相关 │ │ ├── image.js -- 图片相关方法 │ │ ├── page.js -- 设置页面标题 │ │ ├── request.js -- 请求 │ │ └── stringFun.js -- 字符串文件 | ├── view -- 主要view代码 | | ├── about -- 关于我们 | | ├── dashboard -- 面板 | | ├── error -- 错误 | | ├── example --上传案例 | | ├── iconList -- icon列表 | | ├── init -- 初始化数据 | | | ├── index -- 新版本 | | | ├── init -- 旧版本 | | ├── layout -- layout约束页面 | | | ├── aside | | | ├── bottomInfo -- bottomInfo | | | ├── screenfull -- 全屏设置 | | | ├── setting -- 系统设置 | | | └── index.vue -- base 约束 | | ├── login --登录 | | ├── person --个人中心 | | ├── superAdmin -- 超级管理员操作 | | ├── system -- 系统检测页面 | | ├── systemTools -- 系统配置相关页面 | | └── routerHolder.vue -- page 入口页面 ├── vite.config.js -- vite 配置文件 └── yarn.lock
권한 관리: jwt 및 casbin 기반의 권한 관리입니다.
파일 업로드 및 다운로드:七牛云,阿里云및腾讯云기반으로 파일 업로드 작업을 구현합니다(각 플랫폼의 해당 token 또는 해당 key 에 대한 자체 애플리케이션을 개발하십시오).
페이징 캡슐화: 프런트 엔드는 mixins 사용하여 페이징을 캡슐화하고 페이징 메서드는 mixins 호출합니다.
사용자 관리: 시스템 관리자는 사용자 역할과 역할 권한을 할당합니다.
역할 관리: 권한 제어를 위한 기본 개체를 생성하고 역할에 다양한 API 권한 및 메뉴 권한을 할당합니다.
메뉴 관리: 사용자 동적 메뉴 구성을 실현하고 다양한 역할에 대한 다양한 메뉴를 실현합니다.
API 관리: 사용자마다 호출할 수 있는 API 인터페이스에 대한 권한이 다릅니다.
구성 관리 : 구성 파일은 프런트에서 수정 가능합니다. (온라인 체험 사이트에서는 해당 기능이 제공되지 않습니다.)
조건 검색: 조건 검색 예시를 추가합니다.
편안한 예: 사용자 관리 모듈에서 샘플 API를 참조할 수 있습니다.
프런트엔드 파일 참조: web/src/view/superAdmin/api/api.vue
백그라운드 파일 참조: server/router/sys_api.go
다중 지점 로그인 제한 사항: config.yaml 에서 system 의 use-multipoint true로 변경해야 합니다(Config에서 Redis 및 Redis 매개 변수를 직접 구성해야 합니다. 테스트 단계에서 버그가 있으면 제때에 보고해 주세요).
멀티파트 업로드: 멀티파트 파일 업로드 및 대용량 파일의 멀티파트 업로드 예를 제공합니다.
양식 작성기: @Variant Form을 사용하는 양식 작성기입니다.
코드 생성기: 배경 기본 논리 및 간단한 커드 코드 생성기.
https://www.yuque.com/flipped-aurora
프론트엔드 프레임워크 교육 비디오가 포함되어 있습니다. 이 프로젝트가 도움이 된다고 생각하시면 제 개인 WeChat: shouzi_1994를 추가해 주세요. 귀중한 요청을 환영합니다.
(1) 단계별 지침 영상
https://www.bilibili.com/video/BV1Rg411u7xH/
(2) 백엔드 디렉토리 구조 조정 소개 및 사용법
https://www.bilibili.com/video/BV1x44y117TT/
(3) golang 기본 교육 영상
빌리빌리: https://space.bilibili.com/322210472/channel/detail?cid=108884
(4) 진 프레임워크의 기본 교습
빌리빌리: https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0
(5) gin-vue-admin 버전 업데이트 소개 영상
빌리빌리: https://www.bilibili.com/video/BV1kv4y1g7nT
