gin vue admin
2024/10/20
Inglês | Chinês Simplificado
Documentação on-line: https://www.gin-vue-admin.com
inicialização
Do ambiente à implantação, vídeo instrutivo
Ensino de Desenvolvimento (Contribuidor: LLemonGreen e Fann)
comunidade de comunicação
mercado de plug-ins
1. Este projeto possui documentação e tutoriais em vídeo detalhados desde o início até o desenvolvimento e a implantação.
2. Este projeto exige que você tenha uma certa base em golang e vue
3. Você pode concluir todas as operações por meio de nossos tutoriais e documentos, portanto, não oferecemos mais serviços técnicos gratuitos. Se precisar de serviços, forneça suporte pago.
4. Se você usar este projeto para fins comerciais, cumpra o acordo Apache2.0 e guarde a declaração de suporte técnico do autor. Você precisa reter as seguintes informações de declaração de direitos autorais, bem como as informações de declaração de direitos autorais contidas em logs e códigos. As informações retidas exigidas são de natureza de direitos autorais e não afetarão nenhum conteúdo comercial. Se você decidir usá-las comercialmente [as atividades comerciais que geram receita são todas usos comerciais] ou devem ser eliminadas, adquira a autorização.
Gin-vue-admin é uma plataforma de desenvolvimento full-stack baseada em vue e gin que separa o front-end e o back-end. Ele integra autenticação jwt, roteamento dinâmico, menu dinâmico, autenticação casbin, gerador de formulário, gerador de código e outras funções, e fornece. muitas funções de arquivos de amostra, permitindo que você concentre mais tempo no desenvolvimento de negócios.
Visualização on-line: http://demo.gin-vue-admin.com
Nome de usuário de teste: admin
Senha de teste: 123456
Olá! Em primeiro lugar, obrigado por usar o gin-vue-admin.
Gin-vue-admin é um conjunto de estruturas de código aberto com uma arquitetura de separação front-end e back-end preparada para pesquisa e desenvolvimento rápido. Ele foi projetado para construir rapidamente projetos de pequeno e médio porte.
O crescimento do Gin-vue-admin não pode ser separado do apoio de todos. Se você estiver disposto a contribuir com código ou fornecer sugestões para o gin-vue-admin, leia o conteúdo a seguir.
Os problemas são usados apenas para enviar bugs ou recursos e conteúdo relacionado ao design. Outros conteúdos podem ser fechados diretamente.
Antes de enviar um problema, pesquise para ver se o conteúdo relevante foi levantado.
Por favor, faça um fork de uma cópia para seu próprio projeto primeiro. Não crie uma filial diretamente no armazém.
As informações de commit devem ser preenchidas no formato [文件名]: 描述信息, como README.md: fix xxx bug .
Se você estiver corrigindo um bug, forneça informações descritivas no PR.
A fusão do código requer a participação de dois mantenedores: uma pessoa revisa e aprova, e a outra revisa novamente, podendo ser mesclado após passar na revisão.
- node版本 > v16.8.3 - golang版本 >= v1.22 - IDE推荐：Goland
Use ferramentas de edição como Goland para abrir o diretório do servidor. Não abra o diretório raiz gin-vue-admin.
# Clone o projeto git clone https://github.com/flipped-aurora/gin-vue-admin.git# Insira a pasta do servidor cd server# Use go mod e instale o pacote de dependência go go generate# Run go run.
# Entre na pasta web cd web # Instale as dependências npm install # Inicie o projeto web npm run serve
vá instalar github.com/swaggo/swag/cmd/swag@latest
servidor de CD ganhos de inicialização
Após executar o comando acima, os três arquivos
docs.go,swagger.jsoneswagger.yamlna pasta docs aparecerão no diretório do servidor. Após iniciar o serviço go, digite http://localhost:8888/swagger no diretório do servidor. navegador. /index.html para visualizar a documentação do swagger.
Use VSCode para abrir o arquivo do espaço de trabalho gin-vue-admin.code-workspace no diretório raiz. Você pode ver três diretórios virtuais na barra lateral: backend , frontend , root .
Você também pode ver três tarefas em execução e depuração: Backend , Frontend , Both (Backend & Frontend) . Executar Both (Backend & Frontend) pode iniciar os projetos front-end e front-end ao mesmo tempo.
Existe o campo go.toolsEnvVars no arquivo de configuração do espaço de trabalho, que é a variável de ambiente da ferramenta go usada para o próprio VSCode . Além disso, em sistemas com diversas versões do go, você pode especificar a versão em execução por meio de gopath e go.goroot .
"go.gopath": nulo,"go.goroot": nulo,
Front-end: use o elemento baseado em Vue para construir páginas básicas.
Back-end: use Gin para construir rapidamente uma API básica de estilo tranquilo. Gin é uma estrutura da web escrita em linguagem go.
Banco de dados: use o mecanismo de banco de dados MySql > (5.7) versão InnoDB e use gorm para implementar operações básicas no banco de dados.
Cache: Use Redis para registrar o token jwt do usuário ativo atual e implementar restrições de login multiponto.
Documentação da API: use Swagger para criar documentação de automação.
Arquivo de configuração: Use fsnotify e viper para implementar o arquivo de configuração no formato yaml .
Logging: Use zap para implementar o log.
├── 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
Gerenciamento de permissões: gerenciamento de permissões baseado em jwt e casbin .
Upload e download de arquivos: implemente operações de upload de arquivos com base em七牛云,阿里云e腾讯云(desenvolva seu próprio aplicativo para o token correspondente ou key correspondente em cada plataforma).
Encapsulamento de paginação: o front end usa mixins para encapsular a paginação, e o método de paginação apenas chama mixins .
Gerenciamento de usuários: o administrador do sistema atribui funções de usuário e permissões de função.
Gerenciamento de funções: crie o objeto principal para controle de permissões e atribua diferentes permissões de API e permissões de menu às funções.
Gerenciamento de menu: realize a configuração dinâmica do menu do usuário e realize diferentes menus para diferentes funções.
Gerenciamento de API: usuários diferentes têm permissões diferentes nas interfaces de API que podem chamar.
Gerenciamento de configuração: Os arquivos de configuração podem ser modificados na recepção (esta função não está disponível no site de experiência online).
Pesquisa condicional: adicione exemplos de pesquisa condicional.
Exemplo tranquilo: você pode consultar a API de amostra no módulo de gerenciamento de usuários.
Referência do arquivo front-end: web/src/view/superAdmin/api/api.vue
Referência do arquivo em segundo plano: server/router/sys_api.go
Restrições de login multiponto: você precisa alterar use-multipoint no system para true em config.yaml (você mesmo precisa configurar os parâmetros Redis e Redis no Config. Durante a fase de teste, relate quaisquer bugs a tempo).
Multipart upload: fornece exemplos de multipart upload de arquivos e multipart upload de arquivos grandes.
Construtor de formulários: Construtor de formulários com a ajuda do @Variant Form.
Gerador de código: lógica básica de fundo e gerador de código de coalhada simples.
https://www.yuque.com/flipped-aurora
Existem vídeos de ensino de estrutura de front-end incluídos. Se você acha que o projeto é útil para você, você pode adicionar meu WeChat pessoal: shouzi_1994. Você pode fazer solicitações valiosas.
(1) Vídeo de instruções passo a passo
https://www.bilibili.com/video/BV1Rg411u7xH/
(2) Introdução ao ajuste da estrutura de diretórios de back-end e como usá-lo
https://www.bilibili.com/video/BV1x44y117TT/
(3) vídeo de ensino básico de golang
bilibili: https://space.bilibili.com/322210472/channel/detail?cid=108884
(4) Ensino básico da estrutura do gin
bilibili: https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0
(5) vídeo de introdução à atualização da versão gin-vue-admin
bilibili: https://www.bilibili.com/video/BV1kv4y1g7nT
