[Vue3 version branch address](https://github.com/flipped-aurora/gin-vue-admin/tree/vue3Develop): https://github.com/flipped-aurora/gin-vue-admin/tree/vue3Develop
[From the environment to the deployment of teaching videos](https://www.bilibili.com/video/BV1fV411y7dT)
[Development Steps](https://www.gin-vue-admin.com/docs/help) (Contributor: <ahref="https://github.com/LLemonGreen">LLemonGreen</a> And <ahref="https://github.com/fkk0509">Fann</a>)
- Web UI Framework：[element-ui](https://github.com/ElemeFE/element)
- Server Framework：[gin](https://github.com/gin-gonic/gin)
## 1. Basic Introduction
### 1.1 Project Introduction
[Online Demo](http://demo.gin-vue-admin.com/)
> Gin-vue-admin is a backstage management system based on [vue](https://vuejs.org) and [gin](https://gin-gonic.com), which separates the front and rear of the full stack. It integrates jwt authentication, dynamic routing, dynamic menu, casbin authentication, form generator, code generator and other functions. It provides a variety of sample files, allowing you to focus more time on business development.
> Gin-vue-admin is a full-stack (frontend and backend separation) framework designed for management system.
> It integrates multiple functions, such as JWT authentication, dynamic routing, dynamic menu, casbin authentication, form generator, code generator, etc. So that you can focus more time on your business Requirements.
### 1.2 Contributing Guide
Hi! Thank you for choosing gin-vue-admin.
@ -40,7 +47,6 @@ Gin-vue-admin is a full-stack (frontend and backend separation) framework for de
We are excited that you are interested in contributing to gin-vue-admin. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.
### 1.2 Contributing Guide
#### 1.2.1 Issue Guidelines
- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.
@ -72,81 +78,34 @@ We are excited that you are interested in contributing to gin-vue-admin. Before
- node version > v8.6.0
- golang version >= v1.14
- IDE recommendation: Goland
- We recommend you to apply for your own cloud service in QINIU. Replace the public key, private key, warehouse name and default url address with your own, so as not to mess up the test database.
- initialization project: different versions of the database are not initialized. See synonyms at initialization https://www.gin-vue-admin.com/docs/first
- Replace the Qiniuyun public key, private key, warehouse name and default url address in the project to avoid data confusion in the test file.
- If the internal ip of the server's 177.7.0.12 container is occupied, the place to be modified is
- Replace 177.7.0.12 on line 39 of [docker-compose.yaml](./docker-compose.yaml) with the ip you want
- Replace 177.7.0.12 in line 20 of [.docker-compose/nginx/conf.d/my.conf](./.docker-compose/nginx/conf.d/my.conf) with the ip you want
- docker-compose uses a custom docker network
- ```dockerfile
networks:
network:
ipam:
driver: default
config:
- subnet: '177.7.0.0/16'
```
- Subnet address, the default gateway is 177.7.0.1 (docker-compose V2 needs to write, V3 does not need),For specific information, see the [official document](https://docs.docker.com/compose/compose-file/#ipv4_address-ipv6_address)
- The default network name is gin-vue-admin_network, and the default is bridge mode
- If the subnet is modified, the ipv4_address of each service needs to be modified, and the ip of the server on line 20 of [.docker-compose/nginx/conf.d/my.conf](.docker-compose/nginx/conf.d/my.conf) also needs to be modified
> <fontcolor=red>**Use docker-compose to deploy this project need attention**</font>
- For mysql database, please use a local database installed on the server disk.
- Avoid using mysql in the docker container, there may be write problems, io is lower than the host machine, docker's persistence mechanism problem
- [init.sql](.docker-compose/docker-entrypoint-initdb.d/init.sql) is for docker-compose ==experience this project==, prohibit the use of [init.sql](.docker-compose/docker-entrypoint-initdb.d/init.sql) to initialize project data, Database initialization[Please use this method](https://www.gin-vue-admin.com/docs/help#step1%EF%BC%9A%E6%95%B0%E6%8D%AE%E5%BA%93%E5%88%9D%E5%A7%8B%E5%8C%96)
- Use [init.sql](.docker-compose/docker-entrypoint-initdb.d/init.sql) to initialize all problems, please bear it yourself, and have nothing to do with this project
- When deploying using docker-compose of this project,Please modify the [nginx configuration](.docker-compose/nginx/conf.d/my.conf), mysql configuration, networks configuration, redis configuration corresponding to [docker-compose.yaml](./docker-compose.yaml), and make changes as needed.
### 2.1 Web
### 2.1 server project
use `Goland` And other editing tools，open server catalogue，You can't open it. `gin-vue-admin` root directory
| level | string | For a detailed description of the level mode, please see the official [zap documentation](https://pkg.go.dev/go.uber.org/zap?tab=doc#pkg-constants) <br/>info: info mode, stack information without errors, only output information<br/>debug: debug mode, stack details with errors<br/>warn:warn mode<br/>error: error mode, stack details with error<br/>dpanic: dpanic mode<br/>panic: panic mode<br/>fatal: fatal mode<br/> |
| format | string | console: Output log in console format<br/>json: json format output log |
| prefix | string | Log prefix |
| director | string | The folder to store the log can be modified, no need to create it manually |
| link_name | string | [A soft connection file](https://baike.baidu.com/item/%E8%BD%AF%E9%93%BE%E6%8E%A5) of link_name will be generated in the server directory, and the link is the latest log file of the director configuration item |
| show_line | bool | Display the line number, the default is true, it is not recommended to modify |
| encode_level | string | LowercaseLevelEncoder: lowercase<br/> LowercaseColorLevelEncoder: lowercase with color<br/>CapitalLevelEncoder: uppercase<br/>CapitalColorLevelEncoder: uppercase with color |
| stacktrace_key | string | The name of the stack, that is, the key of josn when outputting the log in json format |
| log_in_console | bool | Whether to output to the console, the default is true |
- Development environment || Debug environment configuration recommendations
- <fontcolor=red>Suggestions are only suggestions, you can proceed according to your own needs, and suggestions are for reference only</font>
### 2.3 API docs auto-generation using swagger
#### 2.3.1 install swagger
@ -221,19 +139,20 @@ go get -u github.com/swaggo/swag/cmd/swag
##### (2) In mainland China
In mainland China, access to go.org/x is prohibited，we recommend [goproxy.io](https://goproxy.io/zh/)
In mainland China, access to go.org/x is prohibited，we recommend [goproxy.io](https://goproxy.io/zh/) or [goproxy.cn](https://goproxy.cn)
````bash
If you are using Go version 1.13 and above (recommended)
# Enable Go Modules function
go env -w GO111MODULE=on
# Configure GOPROXY environment variables
go env -w GOPROXY=https://goproxy.io,direct
If you are using Go version 1.12 and below
# If you are using a version of Go 1.13 - 1.15 Need to set up manually GO111MODULE=on, The opening mode is as follows, If your Go version is 1.16 ~ Latest edition You can ignore the following step one
go env -w GOPROXY=https://goproxy.cn,https://goproxy.io,direct
# Use the following command to download swag
# If you dislike trouble,You can use the go generate Automatically execute code before compilation, But this can't be used command line terminal of `Goland` or `Vscode`
cd server
go generate -run "go env -w .*?"
# 使用如下命令下载swag
go get -u github.com/swaggo/swag/cmd/swag
````
@ -243,18 +162,19 @@ go get -u github.com/swaggo/swag/cmd/swag
cd server
swag init
````
After executing the above command，`docs` will show in `server/`，then open your browser, jump into `http://localhost:8888/swagger/index.html` to see the swagger APIs.
> After executing the above command，server directory will appear in the docs folder `docs.go`, `swagger.json`, `swagger.yaml` Three file updates，After starting the go service, type in the browser [http://localhost:8888/swagger/index.html](http://localhost:8888/swagger/index.html) You can view swagger document
## 3. Technical selection
- Frontend: using `Element-UI` based on vue，to code the page.
- Backend: using `Gin` to quickly build basic RESTful API. `Gin`is a web framework written in Go (Golang).
- DB: `MySql`(5.6.44)，using `gorm` to implement data manipulation, added support for SQLite databases.
- Frontend: using [Element](https://github.com/ElemeFE/element) based on [Vue](https://vuejs.org)，to code the page.
- Backend: using [Gin](https://gin-gonic.com/) to quickly build basic RESTful API. [Gin](https://gin-gonic.com/)is a web framework written in Go (Golang).
- DB: `MySql`(5.6.44)，using [gorm](http://gorm.io)` to implement data manipulation, added support for SQLite databases.
- Cache: using `Redis` to implement the recording of the JWT token of the currently active user and implement the multi-login restriction.
- API: using Swagger to auto generate APIs docs。
- Config: using `fsnotify` and `viper` to implement `yaml` config file。
- Log: using `go-logging` record logs。
- Config: using [fsnotify](https://github.com/fsnotify/fsnotify) and [viper](https://github.com/spf13/viper) to implement `yaml` config file。
- Log: using [zap](https://github.com/uber-go/zap) record logs。
## 4. Project Architecture
@ -269,19 +189,31 @@ After executing the above command，`docs` will show in `server/`，then open yo
### 4.3 Project Layout
```
├─server （backend）
│ ├─api （API entrance）
│ ├─config （config file）
│ ├─core （core code）
│ ├─docs （swagger APIs docs）
│ ├─global （global objet）
│ ├─initialiaze （initialiazation）
│ ├─middleware （middle ware）
│ ├─model （model and services）
│ ├─resource （resources, such as static pages, templates）
│ ├─router （routers）
│ ├─service (services)
│ └─utils （common utilities）
├── server
├── api (api entrance)
│ └── v1 (v1 version interface)
├── config (configuration package)
├── core (core document)
├── docs (swagger document directory)
├── global (global object)
├── initialize (initialization)
│ └── internal (initialize internal function)
├── middleware (middleware layer)
├── model (model layer)
│ ├── request (input parameter structure)
│ └── response (out-of-parameter structure)
├── packfile (static file packaging)
├── resource (static resource folder)
│ ├── excel (excel import and export default path)
│ ├── page (form generator)
│ └── template (template)
├── router (routing layer)
├── service (service layer)
├── source (source layer)
└── utils (tool kit)
├── timer (timer interface encapsulation)
└── upload (oss interface encapsulation)
└─web （frontend）
├─public （deploy templates）
└─src （source code）
@ -299,58 +231,59 @@ After executing the above command，`docs` will show in `server/`，then open yo
## 5. Features
- Authority management: Authority management based on `jwt` and `casbin`.
- File upload & download: File upload operation based on Qiniu Cloud (In order to make it easier for everyone to test, I have provided various important tokens of my Qiniu test number, and I urge you not to make things a mess).
- Pagination Encapsulation：The frontend uses mixins to encapsulate paging, and the paging method can call mixins
- File upload and download: implement file upload operations based on `Qiniuyun', `Aliyun 'and `Tencent Cloud` (please develop your own application for each platform corresponding to `token` or `key`).
- Pagination Encapsulation：The frontend uses `mixins` to encapsulate paging, and the paging method can call `mixins` .
- User management: The system administrator assigns user roles and role permissions.
- Role management: Create the main object of permission control, and then assign different API permissions and menu permissions to the role.
- Menu management: User dynamic menu configuration implementation, assigning different menus to different roles.
- API management: Different users can call different API permissions.
- Configuration management: The configuration file can be modified in the web page (the test environment does not provide this function).
- Rich text editor: Embed MarkDown editor function.
- Configuration management: the configuration file can be modified in the foreground (this feature is not available in the online experience site).
- Conditional search: Add an example of conditional search.
- Restful example: You can see sample APIs in user management module.
- Multi-login restriction: Change `userMultipoint` to true in `system` in `config.yaml` (You need to configure redis and redis parameters yourself. During the test period, please report in time if there is a bug).
- Multi-login restriction: Change `user-multipoint` to true in `system` in `config.yaml` (You need to configure redis and redis parameters yourself. During the test period, please report in time if there is a bug).
- Upload file by chunk：Provides examples of file upload and large file upload by chunk.
- Form Builder：With the help of [@form-generator](https://github.com/JakHuang/form-generator).
- Code generator: Providing backend with basic logic and simple curd code generator.
## 6. To-do list
- [ ] upload & export Excel
- [ ] e-chart
- [ ] workflow, task transfer function
- [ ] frontend independent mode, mock
## 6. Knowledge base
## 7. Knowledge base
### 7.1 Team blog
### 6.1 Team blog
> https://www.yuque.com/flipped-aurora
>
>There are video courses about frontend framework in our blo. If you think the project is helpful to you, you can add my personal WeChat:shouzi_1994，your comments is welcomed。
[开发教学](https://www.gin-vue-admin.com/docs/help) (贡献者: <ahref="https://github.com/LLemonGreen">LLemonGreen</a> And <ahref="https://github.com/fkk0509">Fann</a>)
SliverHorn
3 years ago