muteki
- Introducción
- vue3.0 es una plantilla de administración de back-end basada en springboot y vue que separa el front-end y el back-end. También se puede desarrollar rápidamente para proporcionar una interfaz (Restfull API) al front-end.
- El código pasó el 90% de los escaneos y búsquedas de errores de la convención de codificación de Alibaba.
- El lado WEB admite el inicio de sesión en múltiples terminales y los terminales se pueden mantener individualmente.
- Gestión de usuarios, gestión de roles, gestión de departamentos, gestión de permisos, gestión de menús, gestión de registros, etc.
- Hay una versión vue3 ant-design-vue y una versión vue2 element
- El proyecto es completamente de código abierto MIT.
- ¡Brilla como una estrella fugaz!
Documentación de desarrollo
- El documento se actualiza continuamente. . .
dirección original del proyecto
Guía de introducción
La siguiente guía lo ayudará a instalar y ejecutar el proyecto en su máquina local para su desarrollo y prueba. Para obtener información sobre cómo implementar este proyecto en un entorno en línea, consulte la sección de implementación.
Requisitos y pasos de instalación.
- Instalar y configurar el entorno Java, JDK1.8
- Instale mysql 8 , cree una base de datos ( utf8mb4 , utf8mb4_general_ci ) e importe sql (en el directorio doc)
- Para instalar Redis , simplemente descárgalo e instálalo.
- Las herramientas de desarrollo necesitan instalar el complemento lombok (se recomienda IDEA para herramientas de desarrollo)
- --- Operación de back-end (si hay un problema, generalmente es un error en la configuración de la fuente de datos en el archivo de configuración yml)
- Instalar y configurar el entorno del nodo .
- Instale vue-cli , ingrese al directorio vue y ejecute
npm install - ---Ejecute
npm run serve en el front-end ( WebStorm o IDEA pueden hacer clic directamente en el triángulo verde a la izquierda de la línea 6 en el archivo package.json )
Dirección de demostración
Dirección de demostración en línea
versión ant-design-vue, vue3.0, ant-design-vue2.0.0
versión del elemento, vue2.5
| cuenta | contraseña |
|---|
| superadministrador | 111111 |
| administración | 111111 |
| administrador1 | 111111 |
- Consejo: Es posible que se prohíba el acceso de varios usuarios al mismo tiempo. Solo el superadministrador puede ver todas las páginas.
- Consejo: El entorno de demostración ha prohibido algunas operaciones de adición, eliminación y modificación.
- Consejo: Si hay otras excepciones, fuerce la actualización de la página (puede ser un problema de caché), si aún no funciona, plantee el problema.
Documentación de la interfaz
- arrogancia-bootstrap
- Consejos: agregue /muteki manualmente delante de la solicitud. La solicitud generará un error de marca de tiempo; lleve __t=marca de tiempo actual en la solicitud;
desplegar
- Ejecute el comando
mvn clean package en el directorio springboot para empaquetar. Después del empaquetado, el archivo generado está en el directorio /target/build.- El directorio de configuración almacena archivos de configuración.
- El directorio lib es el paquete jar del que depende maven.
- El directorio estático almacena archivos estáticos.
- El archivo jar es el paquete jar generado (si la dependencia de pom permanece sin cambios en el futuro, solo puede reemplazar el paquete jar)
- Ejecute el comando
npm run build en el directorio vue para empaquetar. Después del empaquetado, el archivo generado está en el directorio /dist.- La configuración del paquete está en el archivo .env y en el archivo vue.config.js
- El servidor de implementación necesita configurar JDK1.8 , mysql 8 y el entorno redis .
- El paquete jar ejecuta
nohup java -jar springboot.jar & puede ejecutarse en segundo plano y enviar el registro al archivo nohup.out en el directorio actual. - Se recomienda configurar nginx para el servidor de implementación. Vue está empaquetado y colocado en nginx. Si no está configurado, se puede colocar en estático en el mismo directorio que el paquete jar .
Errores comunes
-
java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar- Error: generar clase de entidad basada en la base de datos
- Solución: cambie la ruta del paquete jar en la línea 6 de resources/config/generator-config.xml a su propia ruta del paquete jar
extremo posterior:
arranque de primavera, mybatis, redis
- Introducción
- Proyecto creado basado en la plantilla Springboot .
- Configuración básica
- El archivo .yml puede configurar información relevante
- El directorio de configuración contiene configuraciones de módulos comunes.
- El filtro está configurado con dominio cruzado , filtrado de parámetros , etc.
- Las solicitudes de filtrado de parámetros eliminan automáticamente los espacios iniciales y finales , utilizando Jsoup para filtrar etiquetas html (el nivel de filtrado se puede personalizar)
- Gestión de permisos
- Interfaz con anotación
@AuthToken , el encabezado de la solicitud debe tener un token para acceder - Coopere con la página frontal de vue para representar dinámicamente el enrutamiento y ocultar el botón de visualización: el botón se guarda en
this.$globalFun.getSessionStorage('buttonMap') (frontal) - Precisamente para los permisos a nivel de interfaz, se debe mejorar la API correspondiente al menú o botón en la administración de funciones ; de lo contrario, se permitirá de forma predeterminada después de que exista el token .
- La fábrica de embalaje utiliza CURD y hereda BaseService.
-
baseInsert() y baseUpdate() filtrarán automáticamente los campos con valores nulos
- Generar automáticamente clases de entidad basadas en la base de datos.
- Ejecute el método org.mybatis.generator.plugin.MyBatisTest.main()
- Recursos de configuración específicos/config/generator-config.xml
- Los registros se almacenan diariamente. La configuración específica se encuentra en resources/config/logback-spring.xml.
- Generar automáticamente documentos de base de datos basados en la base de datos.
- Ejecute el método org.screw.ScrewTest.testScrew()
Interfaz:
vista:
Introducción
- Proyecto creado basado en vue cli
- Interfaz de usuario: elemento-ui
- Solicitud de red: axios
- Método de llamada global
this.$axios({ url: '', data: {}, success(data) {} });- URL: solo se requiere la dirección después del nombre de dominio
- éxito: la devolución de llamada solo necesita manejar el caso donde el código es 200
- Las variables y métodos globales están en el directorio /src/utils
- Anule el estilo element-ui en el archivo /src/assets/sass/element-variables.scss
- La mayoría de los proyectos tienen comentarios.
Configuración básica
- Coopere con el backend para implementar el enrutamiento dinámico: complete la ruta en el formulario de administración de funciones, la ruta raíz predeterminada es /src/views/main/**/*/Index.vue/
- El archivo .env.production/development y vue.config.js son archivos de configuración
Componentes de uso común en paquetes.
- cuadro de diálogo: cuadro emergente
- detalle: muestra datos en forma de título + contenido
- formulario: envío del formulario,
@submit solo necesita manejar la situación después de la verificación del formulario - índice: cuadro emergente ordinario
- mesa: mesa
- Ejemplo de devolución aceptada por el formulario:
{"list":[],"pageNum":1,"pageSize":10} - Solicitud de datos de tabla
tableDataRequest: { url: '', data: {} }- URL: dirección de solicitud
- datos: parámetros adicionales, utilizados con la búsqueda superior
- Tabla de visualización
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] acepta una matriz --- consulte la tabla layui;- formateador: visualización compleja, puede devolver un dom
Expresiones de gratitud
En primer lugar, gracias a springboot , vue , element-ui y otros excelentes proyectos de código abierto. En segundo lugar, este proyecto hace referencia a muchos ejemplos en línea. Si ve códigos similares, entonces solo hay una respuesta.
