vue admin manager
1.0.0
Alguns alunos relataram um erro na inicialização, o que deve ser um problema com as dependências do npm.
As informações da minha versão estão anexadas para referência, mas todas as versões acima devem ser suportadas.
renovar:
O branch master principal é atualizado para carregar o menu dinamicamente:
Aloque menus de carregamento dinamicamente com base nas permissões do usuário, principalmente por meio do uso de addRoutes, meta e outros recursos.
Os dados de exibição são construídos por meio de mock.js
Endereço de demonstração
Uma empresa de P&D back-end, uma empresa start-up, atualmente não possui desenvolvimento web, e gradativamente precisa fazer operação e manutenção, e a página de operação, se quiser começar a trabalhar rapidamente,
Fui aprender sobre os mais populares atualmente, incluindo react, vue e angular. Após comparação, sinto que vue é o mais adequado no momento.
Fui ao site oficial para me familiarizar com ele, escrevi algumas demos e comecei a trabalhar nesse backend. Aprendi com muitos trabalhos excelentes no github e também.
Produza-o para que você possa revisá-lo facilmente.
O projeto é SPA, o front-end e o back-end são separados, o front-end é construído usando vue-cli, a autenticação usa JWT, o banco de dados back-end é mongodb e o back-end fornece
Interface tranquila, função estatística é muito conveniente, agregação, mapReduce, condições são encapsuladas no front end,
Semelhante à montagem front-end das condições de consulta, o back-end gera diretamente os resultados correspondentes.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# 发布测试环境 包含 webpack ananalyzer
npm run build:sit-preview
# 构建生成环境
npm run build:prod
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件（及页面）
│ ├── config // 配置项
│ ├── directive // 全局指令
│ ├── filtres // 全局filter
│ ├── mock // mock数据
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .editorconfig // 代码风格文件，前提是要你的编辑器支持
├── .gitignore // 用于Git配置不需要加入版本管理的文件
├── .postcssrc.js // autoprefixer的配置文件
└── package.json // 项目依赖管理
Autenticação de login (atualmente baseada em JWT), todo suporta Oauth2 e login de terceiros
Visão geral do aplicativo Painel de vários ícones Estatísticas
Tendências de dados: usuários registrados, usuários ativos, relacionamentos de usuários, etc.
Atualmente, o gerenciamento de usuários realiza apenas consultas
A manutenção de dados suporta a visualização de vídeos e fotos
Recolher barra de navegação concluída
Login concluído para obter o apelido do usuário
Extração do ícone de estatísticas concluída
Acesso concluído ao Alibaba Cloud OSS, STS (serviço de autenticação temporária)
Suporte concluído para reprodução de vídeo
Gerenciamento de status Vuex (atualmente apenas informações de token do usuário são registradas)
[] O ícone echart no Dashboard, reconstrução baseada em componentes (escrito ao usá-lo pela primeira vez, o código é relativamente redundante e será dividido em componentes posteriormente)
Componente de página 404 (atualmente em branco), considere usar Tencent Charity em seu próprio blog
[] componente de página 401
[] Responsivo, suporta telefones celulares
A página Dashboard usa o componente vue-echarts-v3. Ela foi criada à força quando me familiarizei com o vue. Posteriormente, você gradualmente se familiarizará e aplicará a ideia de componentes.
O código ainda precisa ser otimizado gradativamente, haha
