NodeJS x ExpressJS의 간단한 대시보드 🍋
5337 단어 cssjavascriptnodeexpressjs
Este fue uno de mis primeros diseños enfocados en el aprovechamiento de un backend que gestionaba el envío masivo a través de un hosting basado en PHP para obtener un archive CSV, transformarlo a JSON y luego decodificarlo.
Abajo te explico como utilizar este diseño en tu web o relacionarlo con otros mencionandote las clases principales.
Veamos como se ve el diseño 최종 🍋
🍋 Y también tiene un campo para introducción de datos
Esto lo puedes reciclar como un componente para un framework o simplemente usarlo como JS simple para gestionar peticiones para almacenar datos en una db, json o cualquier lugar donde lo utilices de forma recurrente.
¿Conocimiento Importantes Para el Desarrollo?
:root {
--main-bg-color: #0E0E0E;
--secondary-bg-color: #161616;
--blue-color: #4E54FF;
--yellow-color: #F4E236;
--bg-cards: rgba(255, 255, 255, 0.103);
}
}
element {
display: grid;
grid-template-columns: 30% 70%;
}
.contenedorLogo {
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-left: 20px;
}
.contenedorPerfil img:hover~span {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
transform: translateX(7px);
background: var(--blue-color);
transition: 0.5s;
}
.pencil {
position: fixed;
width: 75px;
height: 75px;
background-color: var(--yellow-color);
left: 50px;
bottom: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.formularioArchivo input {
width: 80%;
height: 40px;
border: none;
border-bottom: 3px solid var(--yellow-color);
margin: 20px;
padding: 10px;
background: transparent;
outline: none;
font-size: 1.3rem;
color: #fff;
}
#closeOpen::after {
content: "";
position: absolute;
width: 25px;
height: 2px;
background-color: var(--yellow-color);
transform: rotate(45deg);
transition: .4s;
}
#closeOpen:hover::after {
transform: rotate(0deg);
transition: .4s;
}
#closeOpen::before {
content: "";
position: absolute;
width: 25px;
height: 2px;
background-color: var(--yellow-color);
transform: rotate(-45deg);
transition: .4s;
}
#closeOpen:hover::before {
transform: rotate(0deg);
transition: .4s;
}
Sí no conoces CSS te costará mil veces .
El código en Javascript que permite mostrar/ocultar el formulario de carga de contenido
Este formulario solo contiene datos Importantes para completar la funcionalidad de carga del elemento principal, este elemento permite que puedas enviar una petición, put, post, delete, get para renderizar los datos desde el servidor tienes el botón principal para procesar todos estos.
closeOpen.addEventListener('click', () => {
contenedorPopUp.style.display = "none";
})
pencil.addEventListener('click', () => {
contenedorPopUp.style.display = "grid";
})
Es el encarga de cambiar la propiedad de display none a block y 그 반대, puedes animar la transición del elemento contenedor como práctica o simplemente dejarlo como está actualmente.
Este es mi correo profesional [email protected] , si me escribes te aseguro que tendrás una respuesta.
설명,
Link al repo
Link a la demo
호세 A. 아마야
Reference
이 문제에 관하여(NodeJS x ExpressJS의 간단한 대시보드 🍋), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joseamayadev/dashboard-simple-en-nodejs-x-expressjs-57a7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)