vue admin spa

Sistema de gestión backend vue-admin-spa (Nota: este proyecto se ha detenido. Si es necesario, puede ir a la última versión vue3.0, que tiene funciones cada vez más completas)

Pila de tecnología utilizada: vue + vue-resource + vue-router + vuex (esencial para spa) + element-ui + ES6 + webpack + npm

Dirección de prueba (si no se puede abrir, intente cambiar el DNS a 114.114.114.114)

Prefacio

Este proyecto se basa en el andamio de vue y tres proyectos (aprendiendo de las fortalezas de cada uno) y se mejora constantemente. El propósito es acercarse y adaptarse a las necesidades del proyecto de todos, y ser más adecuado para el desarrollo secundario. han sido reescritos:

• Inicio de sesión y registro (incluido cifrado MD5)

• Control de permisos, el menú se muestra y oculta según los datos de permisos devueltos por la interfaz de usuario. Si toca la barra de direcciones con la mano, saltará a 404 (barra de direcciones incorrecta) o 401 (barra de direcciones correcta pero sin permiso). y los permisos se pueden modificar dinámicamente en la configuración del sistema.

• Cambie de tema, admita completamente a los usuarios para cambiar de tema manualmente y recordar temas

• Todos los datos se simulan localmente en json. Los desarrolladores secundarios solo necesitan reemplazar la ruta json con la ruta de la interfaz real. Incluso los principiantes pueden manejar fácilmente el sistema de administración de backend.

• Todos los elementos de clic de botón operados dinámicamente ya han impreso los parámetros relevantes en la consola. Durante el desarrollo real, estos parámetros se pueden enviar a la interfaz de back-end según sea necesario.

• Se ha agregado un nuevo módulo para estudiantes que utiliza la interfaz API real local.

• Se agrega un nuevo módulo de gestión de la organización, que utiliza la interfaz simulada y adjunta la lógica js desarrollada real (incluida la interfaz de verificación y envío, etc. Durante el desarrollo real, simplemente restaure el código lógico real).

ilustrar

• El propósito del código abierto: proporcionar desarrolladores secundarios basados ​​​​en la capa inferior para que más personas puedan aprender y consultar, y evitar desvíos.
• Personalización de la demanda: este proyecto es de código abierto como marco subyacente y actualmente solo tiene algunas funciones básicas. Si tiene otros requisitos funcionales, comuníquese con el propietario del grupo.
• Contribuya y únase: más desarrolladores pueden unirse a este desarrollo subyacente, contribuir y mantener juntos; comuníquese con el propietario del grupo para obtener más detalles.
• Comunicación oportuna: para facilitar la comunicación técnica de todos, este proyecto ha creado un nuevo grupo QQ: 645582193

**Si tiene alguna pregunta, puede enviarla para publicarla o unirse al grupo para discutirla.

Si cree que este proyecto le resulta útil, recuerde hacer clic en Estrella en la esquina superior derecha ^_^

Funciones (parte de los datos se simula usando json local y algunos usan simulacros. Debido al reciente bloqueo de la API de Douban, algunas funciones que usan la API de Douban no se pueden obtener una vista previa temporalmente)

• Descripción del sistema
• Iniciar sesión/Cerrar sesión
• cambio de contraseña
• página de inicio personal
• Subir avatar
• Verificación de permiso
• Modificar permisos
• barra lateral
• pan rallado
• editor de texto enriquecido
• Cambiar tema (haga clic en el avatar para desplegar)
• Verificación y envío de formularios
• Adición, eliminación, modificación, búsqueda, clasificación y exportación de listas (funciones básicas del sistema de gestión backend)
• Página de redireccionamiento 401, 404
• exportar sobresalir
• pestaña de vistas
• Pronto habrá más funciones disponibles para PC...

desarrollar

    # 克隆代码
    git clone https://github.com/lss5270/vue-admin-spa.git
    # 安装依赖
    npm install
    # or 直接解压node_modules.7z到当前位置 （比较适合新手）。

    # 本地开发 开启服务
    npm run dev
    # or 直接双击start.bat（比较适合新手） 

Acceso al navegador http://localhost:2018

liberar

  
    # 构建生产环境
    npm run build:prod
    # or 直接双击build.bat（比较适合新手） 

Simular el entorno oficial.

    # nginx环境下运行
    1.准备nginx环境，自行到nginx官网（https://nginx.org/）下载，并解压
    2.双击build.bat后根目录生成一个dist包，把dist整个文件夹拷贝到nginx解压后的html下
    3.启动nginx服务：双击nginx.exe
    4.访问入口：http://localhost/dist/index.html
    ………
    
    8.关闭nginx服务：直接删进程
    
    # tomcat环境下运行
    参照nginx步骤即可

Acerca de los iconos

    本项目使用了两套图标系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/icon
    2.http://fontawesome.io/icons/
    使用方法：
    a.在index.html中引入<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    b.在使用图标的地方放置图标<i class="fa fa-home" aria-hidden="true"></i>

Acerca del sistema de interfaz de usuario

    由于bootstrap不支持mvvm已弃用，本项目使用了全新的elementUI系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/installation
    

Con respecto al problema 404 de la ruta de la imagen de fondo en el archivo .vue y la ruta del empaquetado a la ruta del entorno de producción

    具体修复方法，参照Issues中的 #6问题
    

Acerca de la interfaz API del módulo de estudiante

    1.学生模块功能使用了本地api接口，若想正常运行，请下载另外一个node项目（https://github.com/lss5270/vue-admin-spa-api），并且在本地启动该node 项目。
    2.该node项目源码，相当于其他后端语言（例如java）提供增删查改接口的源代码。
    3.不懂如何使用node项目的同学，可进群讨论
    

Estructura del directorio

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件。不直接显示
│   ├── global                 // 全局指令
│   ├── filtres                // 全局filter
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── utils                  // 全局公用方法
│   ├── view                   // view视图层
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
│   ├── jquery
│   ├── Tinymce                // 富文本
│   ├── dataJson               // 模拟接口json
│   └── theme                  // 主题文件
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

Gestión de estado

Actualmente, solo la información del usuario, los permisos del menú y el estado relacionado con la configuración de la aplicación se almacenan globalmente utilizando vuex, y cada componente comercial administra otros datos.

Licencia

MIT

Copyright (c) 2017-presente, LSS