springboot2-vue3
Una plantilla de fondo común basada en springboot2 y vue3, sin funciones redundantes, solo administración de permisos y funciones comunes . Proyecto de separación de front-end y back-end, el código pasó el 90% del escaneo y búsqueda de errores de la convención de codificación de Alibaba
Dirección de nueva versión
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) 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-cli3 , 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
- Nombre de usuario: superadministrador
- Contraseña: 111111
- Consejo: Es posible que varios usuarios que inicien sesión al mismo tiempo sean expulsados.
- Consejo: El entorno de demostración ha prohibido las operaciones de adición, eliminación y modificación. Simplemente ignore el error.
- Consejo: si hay otras excepciones, fuerce la actualización de la página (puede ser un problema de caché)
- Documentación de la interfaz
- arrogancia-bootstrap
- Consejos: la solicitud mostrará 404, agregue manualmente /github delante de 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 del 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
-
npm install- Error: error de dependencia de instalación de vue, generalmente node-sass
- Solución: cambie la imagen de Taobao o
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
-
/login ------请求失败-----error: Error: Cannot find module './q/Index'- Error: Después de crear un nuevo menú en segundo plano (el menú no tiene subordinados) y tener permiso para agregar el menú, este error ocurre al iniciar sesión nuevamente.
- Solución: agregue el directorio del menú y el archivo Index.vue a la ruta /src/views/index/ en el proyecto vue
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 IP , 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 la anotación
@AdminAuthToken , 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
$store.state.role['buttons'] (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 simplemente hereda BaseService.
-
baseInsert() y baseUpdate() filtrarán automáticamente los campos con valores nulos - Filtre los parámetros
baseUpdate() o cree una nueva clase de entidad para la operación de asignación.
- 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 y la configuración específica se encuentra en resources/config/logback-spring.xml
- Registre automáticamente el registro del usuario administrador ; la anotación
@SystemLog se puede colocar en el controlador
Interfaz:
vista:
Introducción
- Proyecto creado en base a vue cli3
- 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
- Introducir la biblioteca de fuentes iconfont
- Simplemente sobrescriba los archivos en el directorio /src/assets/font/iconfont
- Cita
<i class="iconfont iconfont-address"></i>
- 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/index/
- El archivo .env.production/development y vue.config.js son archivos de configuración
Componentes encapsulados de uso común ( para obtener más detalles, consulte /src/views/index/system/sysUser/ para obtener comentarios detallados )
- 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
- Visualización de tabla
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.
