Algunos estudiantes informaron un error al inicio, lo que debería ser un problema con las dependencias de npm.
La información de mi versión se adjunta como referencia, pero todas las versiones anteriores deberían ser compatibles.
renovar:
La rama principal master se actualiza para cargar dinámicamente el menú:
Asigne dinámicamente menús de carga según los permisos del usuario, principalmente mediante el uso de addRoutes, meta y otras funciones.
Los datos de visualización se construyen a través de simulacro.js
Dirección de demostración
Una empresa de I + D de back-end, una empresa de nueva creación, actualmente no tiene desarrollo web y gradualmente necesita realizar operación y mantenimiento, y la página de operación, si desea comenzar a trabajar rápidamente,
Fui a aprender sobre los más populares en la actualidad, incluidos reaccionar, vue y angular. Después de comparar, creo que vue es el más adecuado en este momento.
Fui al sitio web oficial para familiarizarme con él, escribí algunas demostraciones y luego comencé a trabajar en este backend. Aprendí de muchos trabajos excelentes en github y también.
Grábalo para que puedas revisarlo fácilmente.
El proyecto es SPA, el front-end y el back-end están separados, el front-end se construye usando vue-cli, la autenticación usa JWT, la base de datos del back-end es mongodb y el back-end proporciona
Interfaz tranquila, la función estadística es muy conveniente, agregado, mapReduce, las condiciones están encapsuladas en la parte frontal.
De manera similar al ensamblaje de condiciones de consulta del front-end, el back-end muestra directamente los resultados correspondientes.
# 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 // 项目依赖管理
Autenticación de inicio de sesión (actualmente basada en JWT) todo admite Oauth2 y el inicio de sesión de terceros
Panel de descripción general de la aplicación Estadísticas de varios iconos
Tendencias de los datos: usuarios registrados, usuarios activos, relaciones con los usuarios, etc.
La gestión de usuarios actualmente solo realiza consultas
El mantenimiento de datos admite la visualización de vídeos e imágenes.
Contraer la barra de navegación completada
Inicio de sesión completo para obtener el apodo de usuario
Extracción del icono de estadísticas completada
Acceso completo a Alibaba Cloud OSS, STS (servicio de autenticación temporal)
Soporte completo para reproducción de video.
Gestión de estado de Vuex (actualmente solo se registra información del token de usuario)
[] El ícono echart en el Panel, reconstrucción basada en componentes (escrito cuando se usa por primera vez, el código es relativamente redundante y se dividirá en componentes más adelante)
Componente de página 404 (actualmente en blanco), considere usar Tencent Charity en su propio blog
[] Componente de página 401
[] Responsivo, compatible con teléfonos móviles
La página del Panel de control utiliza el componente vue-echarts-v3. Fue creado por la fuerza cuando me familiaricé con vue. No tiene ningún sentimiento estético. Más adelante, gradualmente se familiarizará y aplicará la idea de componentes.
El código aún necesita ser optimizado gradualmente, jaja.