¿Cómo desarrollar rápidamente una aplicación curricular? El horario del curso es una de las funciones más utilizadas entre los estudiantes de hoy, entonces, ¿cómo implementar rápidamente la función del horario del curso? Primero se mostrarán los resultados del proyecto. A continuación, se explicará en detalle la implementación de la función curricular. Idea de implementación funcional: este proyecto está escrito en base al marco multiterminal AVM, por lo que es necesario encontrar una manera de construir datos específicos y luego modificarlos. El negocio principal de este proyecto es el procesamiento de datos del curso y el procesamiento. La dificultad radica en agregar el horario de clases. Este proyecto está diseñado principalmente para el horario de clases de la universidad. Hay muchas incertidumbres en el curso. Por ejemplo, el número de semanas del curso puede ser continuo o discontinuo y el tiempo de clase puede ser de 1 a 2 períodos o un día completo. Classroom También puede ser diferente, por lo que la estructura de datos del curso es la siguiente. El backend debe proporcionar interfaces para la semana actual, datos del curso para la semana actual y agregar cursos. Por supuesto, la consulta de datos del curso es más complicada y no se discutirá aquí. La interfaz muestra principalmente la información del cronograma del curso en una ubicación designada y los datos son relativamente simples. 1. Página de lista de cursos (1) Los datos originales de los cursos de la semana actual. Esta estructura de datos debe reorganizarse, porque el curso debe ubicarse en una ubicación específica y se debe conocer la distancia desde la cima y su propia altura. . Puede obtener la altura y la parte superior a través del parámetro de clase. letdata=[{'name':'Tecnología de visualización de Big Data','room':'C414 Classroom','weekday':'3','bg':'2','jie':'3-4', 'top': '140px', 'height': '140px.140px'}] está dividido en 8 secciones horizontalmente, cada sección tiene un ancho de 12,5 y una altura de 70 px, y puede mostrar 13 lecciones de forma predeterminada. El fondo del curso tiene 7 estilos por defecto, el parámetro izquierdo correspondiente a la semana también tiene 7 estilos y el parámetro superior correspondiente a la parte del curso tiene 12 estilos.
El estilo CSS específico es el siguiente: .bg-1{fondo: lineal-gradient(#facea8, #fe8979)}.bg-2{fondo: lineal-gradient(#dfc3fe, #90c5fb)}.bg-3{fondo .linear -gradient(#9deef5, #68e1b5)}.bg-4{fondo: gradiente lineal(#eeba93, #dd65c7)}.bg-5{fondo: gradiente lineal(#e6f6c9, #68e1b5)}.bg -6 {fondo: gradiente lineal (#dfc3fe, #dd65c7)}.bg-7{fondo: gradiente lineal (#c8e65f, #7abafb)}.semana-1{izquierda: 12,5; semana-2{izquierda}. : 25 ;}.semana-3{izquierda: 37,5;}.semana-4{izquierda: 50;}.semana-5{izquierda: 62,5;}.semana-6{izquierda: 75;}.semana-0{izquierda : 87.5 ;} Cada curso utiliza posicionamiento absoluto, con el mismo ancho, y el código se expresa de la siguiente manera: lt; viewclass="course_list"gt; viewv-for="(rs, key)incourse_data":key=" key":class=" 'cursosemana-' rs.weekday 'bg-' rs.bg":style="'altura:' rs.height ';arriba:' rs.top"gt;lt;textclass="curso- nombre"gt;{{ rs.name}}lt;/textgt;lt;textclass="sala-curso"gt;{{rs.room}}lt;/textgt;lt;/viewgt;lt;/viewgt; ( 2) Obtener la hora de la semana actual La estructura de datos de la semana actual del código es la siguiente: this.setDate(newDate());; setDate(date){letarr=[]; =this.addDate(fecha, semana*-1); this.currentFirstDate=newDate(fecha); for(vari=0;i lt;7;i){arr[i]=this.formatDate(i==0? fecha: this.addDate(fecha, 1)) addDate(fecha, 1))}this.week_data=arrthis.currentWeek()}, addDate(fecha, n){date.getFullYear(); letmonth=(date.getMonth( ) 1); letday=date.getDay() ];this.currentMonth=mes;if(meslt;10){mes='0' mes;}if(díalt;10){día='0' día;}return {"semana": semana, "fecha": mes '/' día, "activo": falso};}, //semana actual currentWeek(){letdate=newDate(); letweekday =date.getDay();