Resumen de los proyectos actuales de este mes: Vue + elementui + SpringBoot + mybatisplus + OSS + JWT, etc.

una breve introducción:

Hola a todos. En primer lugar, permítanme presentarme. Soy un pequeño programador desconocido. Todos los días corro en el camino de escribir código y encontrar errores. Me acuesto tarde al trabajo todos los días, pero estoy acostumbrado . Algunas personas suelen decir que me imagino que el programador de es así

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

En realidad, por
Inserte la descripción de la imagen aquí
supuesto , el verdadero programador es, por supuesto, yo también estoy en este estado. Algunas personas dicen: beba un poco de alcohol, fume un cigarrillo y busque un error por un día. Será fin de mes de inmediato. Resume el proyecto con anticipación para recordarlo fácilmente. Por supuesto, el blog también está formateado. No, es la única forma en que los miembros de la familia pueden verlo vivo

Introducción al módulo y la función del proyecto:

En primer lugar, hablemos brevemente sobre ello. El proyecto de este mes se compone de dos módulos, pms y ums, un sistema de gestión de back-end de productos básicos.
Por supuesto, pms es un módulo básico y ums es un módulo de usuario. Este sistema de gestión de back-end básico utiliza marcos y complementos como Vue + elementui + SpringBoot + mybatisplus + OSS + JWT, etc.

Primero introduzca el módulo pms:

PMS, se divide en gestión de marca, tipo de producto, clasificación de producto, lista de productos y adición de productos.

1. Gestión de
marca Para la gestión de marca, en realidad es un conjunto de adiciones, eliminaciones y cambios ¿Cuál es la diferencia? Tiene un logotipo de marca. La carga de la imagen utiliza el servidor oss de carga elemrentUI. Su única dificultad es cargar la mitad al cargarla, pero el usuario no quiere cargarla, haga clic en Cancelar para eliminar la imagen cargada y eliminar al modificarlo.Fotos antiguas y así sucesivamente. ¿Por qué desea eliminar la imagen? Debido a que el usuario hace clic en Agregar para cargar la imagen y hace clic en cancelar después de la carga, la base de datos no tiene la imagen cargada por ella, pero el servidor oss tiene una imagen más, correcto, entonces si el usuario sigue haciendo clic en cargar, ¿es una página? La imagen de arriba es el valor de la función de éxito que se devuelve después de cargarla en el servidor OSS para mostrar la página. Si el usuario le pide al usuario que haga clic, haga clic en 100 para cargar 100 imágenes. Haga clic en 1000, y él no hace clic en Agregar y luego en Confirmar. Entonces no hay base de datos. ¿Hay muchos datos basura en el servidor? Cuando el usuario haga clic para cancelar, ¿seguirán existiendo los datos del servidor? ¿Son datos basura? ¿Es necesario eliminarlos?
La respuesta, por supuesto, debe eliminarse, ¿por qué? Oss se debe a que, de acuerdo con los cargos de tráfico, es utilizar su propio servidor de imágenes configurado para que no se requiera también ese espacio, los datos basura pueden ser tan poco menos
dos, New Laws bomb box Cancelar Eliminar ideas de imágenes:

Cuando este proyecto está terminado, es un proyecto de separación de front-end y back-end
. Antes de realizar la función, primero debemos considerar varios aspectos:
1. Cuando el usuario hace clic en 1 en la siguiente imagen, la imagen cargada se elimina cuando el el número X es
2. Cuando el usuario hace clic en 2 en la siguiente imagen, haga clic en el espacio en blanco para eliminar la imagen cargada
. 3. Cuando el usuario hace clic en 3 en la siguiente imagen, se agrega correctamente al enviar
3. Cuando el usuario hace clic en 4 en la siguiente imagen, la imagen cargada se elimina al hacer clic en cancelar
Inserte la descripción de la imagen aquí
Paso 1 Eliminar al cancelar Imágenes de basura eliminar imágenes de basura son imágenes cargadas en Oss pero no cargadas en la base de datos:
(1) Primero, se requiere un evento de cierre global para @ close = "" No importa dónde haga clic, debe cerrar para activar el evento close Dialog para cerrar la devolución de llamada, y luego establecer este evento primero Definir
(2) y luego definir una variable en los datos, su valor inicial es nulo, se utiliza para determinar el botón actual, en qué botón hace clic el usuario actual, y luego, cuando el usuario hace clic en el nuevo método, se le asigna un valor de 1, cuando hace clic en editar al editar, dale un valor de 2, y luego haga clic para cancelar cuando aparezca el cuadro o haga clic para cerrar cuando haga clic en X, asígnele un valor de 3.
(3) A juzgar por el método global recién definido, si la variable actual es igual a uno, entonces toma el nuevo método; de lo contrario, está juzgando que la variable es igual a dos, luego toma el método modificado, de lo contrario toma Cualquiera El método es un método de cancelación.
¿Por qué no es problemático definirlo? Debido al evento @close, en este cuadro modal, no importa que haga clic en cualquier lugar, se cancelará, no importa si hace clic en un lugar en blanco, malo o cancelar, o incluso si hace clic para agregar, se convertirá en cancelar, por lo que Hay un problema. Está lista para ser agregada, pero hice clic para agregar o eliminar mi foto, que no es muy fácil de usar.
(4) Luego, el siguiente paso es pasar el valor, recibir el valor y enviar una solicitud al fondo para eliminar el método. Porque después de cargar el sistema operativo, después de que la imagen se cargue en el sistema operativo, habrá una función de devolución de llamada exitosa después de la carga, ¿puede obtener la dirección de la imagen en la función de devolución de llamada exitosa y luego pasar esta dirección a la que desea? recibir la página, y luego hacer clic en la página, y luego escribir el método de eliminación en el método de la variable 3 para enviar el fondo para eliminar la imagen, por supuesto, use la matriz cuando se pasa el parámetro, porque cuando el usuario hace clic para cargar la imagen, no necesariamente se carga Cuántas hojas se eliminan, por lo que la matriz se elimina en un bucle. Una vez que la eliminación es exitosa, debe actualizarse. Debido a que la imagen se almacena en la caché, no se puede eliminar nuevamente si no se actualiza la segunda vez. El valor sigue siendo el
código específico de recuperación anterior , consulte el
paso 2 de este artículo Elimine la imagen anterior al modificar y modifique la imagen sin hacer clic en confirmar después de cargar OSS. Elimine la imagen cargada en OSS. Eliminar imágenes basura es la imagen cargada en Oss pero no cargada en la base de datos:
(1) Al modificar, primero defina una variable, que está en la clase de entidad. Haga una definición y agregue un campo. Esto es solo para uso de consultas. la base de datos no tiene este campo. Agregue este campo al objeto en el método de datos de la página. Defina dicha variable en el objeto y colóquela en esta variable cuando se muestre. Un valor de imagen, y luego traído al fondo para juicio. Juzgue en segundo plano, primero juzgue que la ID del objeto no está vacía, y luego juzgue, la imagen nueva y la imagen anterior no están vacías, y la imagen nueva no es igual a la imagen anterior, si no son iguales, elimine el imagen antigua. Al modificar, si hace clic en la nueva imagen cargada, pero no desea cargarla después de cargarla, haga clic en Cancelar, luego se usarán las variables establecidas antes del cuadro modal anterior, y cuando haga clic en Modificar nuevamente, haga clic en Cancelar, el modal El valor del cuadro es igual a dos. En este momento, ingresará al cuadro modal para eliminar. Se juzga que la imagen anterior no es igual a la imagen actual. Si no es igual, borre la carga y elimine la imagen. Por supuesto, eliminar y eliminar por lotes son relativamente simples, por lo que no diré mucho aquí, si está interesado, puede consultar la eliminación de código
y la eliminación por lotes

2. Módulo de clasificación de productos y tipos de productos
básicos Para el módulo de tipos de productos básicos y el módulo de clasificación de productos básicos, en realidad se trata de un conjunto de adiciones, eliminaciones y cambios. Cuando la atención se centra en los atributos y parámetros del tipo de datos, como se muestra
Inserte la descripción de la imagen aquí
en la figura: En los dos módulos de tipo de producto y clasificación de producto en
(1) consulta: tiene un nivel de un campo, se usa para distinguir el rango en este tipo de producto, tiene una lista de bienes y parámetros de productos básicos de estas dos listas en este categoría de producto, señala Es un nodo de primer nivel y un nodo de segundo nivel. Para estas dos palabras y dos clases, en realidad es lo mismo. Su consulta principal se basa en la ID actual y el número de elementos que se muestran en cada página de una página., Porque también es una lista debajo de estas dos listas. Al realizar consultas en segundo plano, todavía se basa en el ID de la base de datos de la clasificación actual, y luego es igual al ID actual; de lo contrario, deje que el nivel sea igual a cero nuevamente.

        if(vo.getId() != null){
    
    
            queryWrapper.eq("parent_id",vo.getId());
        }else {
    
    
            //页面显示为一级的数据
            queryWrapper.eq("level",0);
        }

(2) Agregar o modificar: Al agregar o modificar, debido a que no hay un campo de nivel en primer plano, al agregar, la adición y modificación solo se puede realizar en segundo plano, ya sea que el primer nivel o el segundo nivel se determine en segundo plano , si su ID de clasificación no es igual a vacío, y si no es igual a cero, colóquelo mil millones. ¿Qué significa esto? De forma predeterminada, estará conectado a un nodo de nivel 1; de lo contrario, se conectará un cero. .Cero es un nodo de nivel 1. Nuevo El valor predeterminado es un nodo de nivel 1.

(3) Eliminar: al eliminar el nodo de datos del nodo de primer nivel al eliminar, los nodos secundarios de segundo nivel debajo de él también deben eliminarse al mismo tiempo, y el juicio se realiza en segundo plano. Si su ID de clasificación es igual a cero, luego consulte de acuerdo con las condiciones Su ID de categoría es igual a todos los datos del ID de datos actual, y luego elimínelos todos a la vez.

3. La lista de productos y el producto agregado pertenecen a un módulo
1. La lista de productos es en realidad una verificación de adición, eliminación y modificación, pero para esta adición, eliminación, modificación y verificación, hay un producto agregado en ella. Para el módulo de adición de producto, es el paso de uso. Incluye muchas cosas. Se ha utilizado recientemente la barra de pasos, que se divide en varias páginas, como agregar información del producto, completar la promoción del producto y completar los atributos del producto.
2. Agregar productos: agregar la clasificación de productos en la información del producto utiliza la recursividad. Primero, obtenga una colección a través de super.list () en la implementación en segundo plano, y realice una operación de bucle basada en la colección, cree una colección de mapas en el bucle , y luego juzgar por consulta El Id de la categoría es igual al pid. Luego pongo un nivel de valor en el mapa, y luego juzgo el nivel = 0, le dejo ajustar su propio ciclo para poner el valor, cuando no tiene nodos secundarios, el ciclo termina. Por último, se considera que el nodo hijo no puede estar vacío. La
parte de promoción del producto de recogida de devoluciones incluye la lista de precios de miembros, la lista de precios de escalera y la lista de precios de descuento completa. Como todas están en tablas diferentes, se solicita usar datos para enviar datos en primer plano y @RequestBody en segundo plano. Anotar para recibir datos y definir el paquete bo al mismo tiempo. Definir la recopilación de datos de la lista de precios de miembros, la lista de precios de escalera y la lista de precios de reducción completa en el paquete bo.
3. El lugar más difícil para completar el módulo de atributo de producto nuevo es el módulo de atributo de SKU. Por supuesto, SKU y La diferencia entre SPU es que, simplemente hablando, SPU es equivalente a una clase y SKU es equivalente a un objeto, como se muestra en la figura: Esta es la parte sku de este proyecto
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

(1) Efecto: después de hacer clic en cualquier elemento del cuadro desplegable del atributo del producto, se activará la especificación del producto y aparecerá una tabla en la especificación del producto. En la especificación del producto, seleccione el contenido de su propia combinación . El color se puede agregar. Después de agregar, seleccione este color, seleccione la capacidad y haga clic en el botón Actualizar, aparecerá una tabla debajo y los datos que necesita aparecerán en la tabla, como el precio. Ingrese 1 precio, haga clic en Sincronizar El precio y todos los precios en el precio se unificarán. El inventario también se puede sincronizar con una clave, y todos los datos se pueden sincronizar directamente. El back-end genera el número de SKU y no se puede ingresar ni modificar el front-end. Los parámetros del producto también se consultan después de hacer clic en el cuadro desplegable

(2) Nuevas ideas: vincule un evento en el cuadro desplegable de atributos del producto, haga clic en el cuadro desplegable para activar el evento. Defina el método en el evento, marque el tipo igual a 0 y el tipo igual a 1, y defina el val parámetro y dos métodos de valor.
Nota: tipo es el tipo del atributo de clase de entidad; 0-> especificación; 1-> los parámetros
están conectados en el método, comience el subíndice de acuerdo con la paginación, cada página muestra el número de elementos, tipo e ID ingrese el fondo para consultar los datos del atributo, y luego los datos consultados se reciben y se le dan al valor de la variable para poner el valor en un bucle.
Luego comience a juzgar, si este tipo es igual a cero, entonces la consulta es el atributo de la mercancía, y la variable comienza a circular. En un ciclo, defina dos matrices de variables variables, una son valores y la otra son opciones. Son respectivamente. La matriz de capacidad y la matriz de colores en la especificación del producto, y luego determinar si se agrega o modifica. Si se modifica, debe determinar si el color se agregó manualmente o se extrajo de la base de datos, y luego los datos se reciclan Coloque la identificación en las opciones, debe obtener la identificación del atributo actual para juzgar, debe definir este método, dividir los datos en opciones y, finalmente, presionar el valor de la matriz de atributos de la especificación del producto, dejar que se repita la visualización de datos,
luego, el tipo de juez no es igual a 0, luego la consulta es el parámetro del producto y la variable también comienza a repetirse. En un bucle, defina valores = "", coloque el ID de datos en bucle en los valores, debe obtener la identificación del atributo actual para juzgar. Finalmente, presione el valor de la matriz de atributos del parámetro del producto para mostrar los datos
en un bucle , ingrese un color en la especificación del producto, haga clic en Agregar, activará un método, en el método, se juzga que el valor del atributo no puede estar vacío, el valor del atributo no se puede repetir y se agrega manualmente y luego se borran los datos después de agregar.
Cuando vuelva a hacer clic en el botón de actualización, primero obtenga el valor que seleccionó y luego colóquelo cíclicamente en la tabla para su visualización, y realice una asignación cíclica a los datos en el método del botón de actualización. El precio sincrónico y el inventario sincrónico se juzgan sobre la base original de que no puede estar vacío y su longitud es mayor que cero, y luego le asignan valores en ciclos.
Hacer un buen trabajo es fusionar todos los datos relacionados con SKU combinando los valores de los atributos, hacer un bucle con todos los datos del SKU y, finalmente, poner estos datos en la colección en un bucle, incluyendo su ID y sus datos. Los datos se convierten a una cadena, incluido el cuadro desplegable de los parámetros del producto que compró también, ingrese el bucle y colóquelo en la colección, incluida la identificación y los datos enviados al fondo para agregarlos a la base de datos

(3) Pensando en retrospectiva:
el cuadro desplegable de categoría del producto define un método en calculado, luego lo define en watch, se conecta a la identificación y luego juzga si quiere regresar si no lo está modificando. Si es modificado, juzgue este valor newValue == undefined || newValue == null || newValue == 0 Déjelo regresar, y finalmente coloque la identificación del nodo de primer nivel y el nodo de segundo nivel en la matriz, y luego muestre el
SKU tomando el valor Echo: defina un método en calculado, luego defínalo en el reloj, conecte la identificación del parámetro y defina un método para obtener datos de acuerdo con la identificación del tipo de atributo. Este método es el método que se activa al hacer clic en el menú desplegable box, en este método En tipo == 0, si se juzga antes que es igual a la modificación, se llama a reciclar, y se asigna a los valores el nombre generado por this.handleProductValus (attr [i] .name) . Inicie el método de definición para hacer eco de las especificaciones del producto. En
este método, defina un valor igual a una matriz vacía, luego defina la recopilación de datos del producto, defina una variable y luego comience a juzgar que la recopilación de variables no puede estar vacía o una cadena vacía, y luego comience a hacer un bucle en esta matriz, skuList [i] .spData, lo que obtiene es una cadena json. Luego use JSON.parse (spData); para convertir la cadena json en una cadena de matriz, y luego repita la matriz resultante. Si el valor del nombre recuperado es igual a la Clave en la matriz, entonces el valor de la matriz se convierte directamente a values. push (spDataArr [j] .value); Ponlo en la matriz de valores, sal de la interrupción y finalmente vuelve a los valores;

El parámetro de producto de eco también está en el tipo de método == 1. Si se juzga antes, si es igual a la modificación, llámelo para reciclar, valores = this.getProductParams (attr [i] .id); asigne el id fuera del bucle a valores. Defina el método para comenzar a hacer eco de los parámetros del producto. Defina el método para hacer eco de los parámetros
, y luego tome la comida, luego defina los valores = "", y luego defina todos los conjuntos de datos obtenidos, y luego repita este conjunto, si el ID de la comida es igual al ID en su conjunto, luego, asigne todos los valores de la matriz a los valores, salga de la interrupción y finalmente vuelva a los valores.

A continuación se describe el módulo ums

El sistema de gestión de usuarios incluye cinco tablas principales en el proceso de diseño. Las cinco tablas son la tabla de usuarios, la tabla de roles, la tabla de permisos, la tabla de relaciones de roles de usuarios y la tabla de relaciones de permisos de roles. La tabla de usuarios y la tabla de roles tienen una relación de muchos a muchos, y la tabla de roles y la tabla de permisos también son muchas. Relación-a-muchos.

En el sistema de gestión en segundo plano, diseñé la gestión de autoridad en tres módulos, a saber, gestión de usuarios, gestión de roles y gestión de autoridad.

A continuación, permítanme hablar primero sobre el módulo de administración de usuarios. La administración de usuarios es una operación de agregar, eliminar, modificar y verificar usuarios. Los datos de fondo se cargan en la página de la lista de usuarios. Al agregar y modificar usuarios, utilizo el complemento de archivo elementui -in para cargar avatares de usuario. Asignar roles a este usuario.
Permítanme hablar sobre el módulo de administración de roles. La administración de roles es la adición, eliminación, modificación y verificación de roles, y los datos del rol se muestran en la página de la lista de roles. Y puede asignar permisos al rol. Al eliminar un rol, determinaremos si el rol actual está asociado con el usuario y, si está asociado, le indicará al usuario que no se puede eliminar.
Finalmente, está el módulo de administración de permisos. La administración de permisos es una adición, eliminación, modificación y verificación de permisos. Los datos de permisos se muestran en la página de la lista de permisos. Al eliminar, eliminaremos todos los nodos secundarios debajo del nodo seleccionado .

====== A continuación, explicaremos con más detalle algunos detalles de la gestión de usuarios, la gestión de roles y la gestión de autoridades. ======
1. Administración de usuarios (incluido el inicio de sesión, token, verificación, vencimiento del token, etc.)
Por supuesto, en el módulo de administración de usuarios anterior, mencioné agregar, eliminar, modificar y verificar, pero en realidad es muy simple , incluida la carga de avatares usando elementui, también lo he explicado anteriormente, luego hablaré brevemente sobre cómo se logra este rol de asignación.
En esta operación del módulo de administración de usuarios, primero escriba un botón para asignar roles. Por supuesto, la asignación de roles se puede hacer usando un cuadro emergente. Primero utilícelo. Primero defina el cuadro emergente y luego defina las variables en estos . Haga clic en el botón para activar la función.
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
En esta función, es necesario seguir consultando toda la información del rol e ir al fondo para consultar. Al consultar en segundo plano, puede consultar todo directamente sin paginación. Una vez completada la consulta, introduzca lo obtenido directamente en la colección allRoleList para una visualización circular.
La consulta se muestra a continuación, pero también necesita averiguar qué roles tiene el usuario actual de la base de datos. Esto es solo para mostrar qué roles tiene la base de datos actualmente. Haciéndose eco de los roles que tiene el usuario.
Entonces, ¿qué tabla de la base de datos debe verificarse para volver a seleccionar el rol? Debe verificar la tabla de asociación de roles de usuario, obtener el ID de rol del usuario actual y luego ponerlo en allocRoleIds para eco. Al consultar la respuesta, debe pasar la identificación en el lugar donde se asignó el rol, obtener la identificación de los datos e ir a continuación para recibir la identificación y darle la identificación para consultar. this.allocAdminId = adminId; Al mismo tiempo, adjunte allocAdminId a id; el
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
siguiente paso es modificar, hay un botón de confirmación en el cuadro emergente del rol asignado, haga clic en el rol que desea seleccionar, luego active el evento , y asigne el valor al definir el evento, y luego envíe el fondo para modificarlo.

Inserte la descripción de la imagen aquí
Utilice datos para enviar datos, recibirlos en segundo plano, operar
Inserte la descripción de la imagen aquí
en la clase de implementación, eliminar los datos originales en la base de datos dentro de un tiempo y agregarlos después de eliminarlos de acuerdo con el nombre del campo. Seleccione esos datos usted mismo para completar algunos cambios en el papel.
Inserte la descripción de la imagen aquí
Asignar permisos es lo mismo que asignar roles, por lo que no entraré en detalles.

=Continuará===

Supongo que te gusta

Origin blog.csdn.net/jq1223/article/details/115056876
Recomendado
Clasificación