Sistema de estadísticas de estudiantes de combate real del proyecto de desarrollo móvil y de front-end (visualización de la puntuación y visualización del salario esperado)

Sistema de estadísticas de estudiantes de combate real de JS-Project

propósito

• Complete el diseño de la página del lado de la PC de forma independiente; (sin necesidad de precisión, embellecimiento CSS y lógica JS)
• Competente en el uso de lenguaje menos precompilado; (básicamente, no escriba CSS directamente)
  • Anidamiento: estructura HTML;
  • Cálculo:
  • variable:
• Competente en el uso de JQ para localizar y consultar rápidamente la configuración básica de echarts;

Requisitos y especificaciones

módulo funcional

• Dividido en tres áreas;

Necesidades del negocio

• Diseño: use menos para restaurar el diseño de la página usando flex al máximo según la guía;
• JS-Add: haga clic en el botón Agregar, la entrada está vacía para recordar, la adición no se puede realizar;

• JS-list: los nuevos datos se muestran en primer lugar;

• JS-Delete: haga clic para eliminar un dato de la lista para eliminar los datos actuales;

• js-list: actualiza la página y muestra los datos durante mucho tiempo;
• Visualización de puntuación de echarts y visualización de salario esperado:

• echarts-following: Después de agregar o eliminar datos en la lista de la izquierda, el gráfico de la derecha cambia; (paquete de funciones JS: inicialización de echarts)

Pila de diseño y tecnología

• Diseño: no estricto, construirlo;
  • La altura es la misma que la altura actual de la pantalla;
  • El ancho mínimo es 1280px;
  • El lado derecho tiene un ancho fijo de 500px y el lado izquierdo se puede estirar con la pantalla;
  • Use menos lenguaje precompilado para escribir estilos; recomendado, ¡no obligatorio!
• JS:
  • Utilice JQ para la operación dom;
  • Parte del código se repite para la encapsulación de funciones y los parámetros de configuración;

Especificación de directorio

 project             # 项目目录
    ├── css          # css样式文件夹
    ├── js           # JS文件
    ├── imgs         # 业务图片文件夹
    └── index.html   # 首页

Referencia de solución técnica

Referencia de diseño

• arreglo general:
  • El lado derecho tiene un ancho fijo de 500px, y el lado izquierdo se puede estirar con la pantalla: diseño del Santo Grial;
  • El diseño completo de la página: se recomienda usar un diseño flexible (sin considerar la compatibilidad con PC), no hay una medición de valor de px fijo en este combate real, probablemente el diseño sea razonable
  • Menos estilo de escritura: refiérase al uso de diseño móvil menos;

Referencia JS

• Lista: agregue y elimine funciones de localización de datos, consulte el caso todoLIst en la etapa JQ;

• Paquete de funciones del gráfico echarts: referencia, ¡no obligatorio!

  • Configuración: aprendizaje de configuración de visualización de datos de referencia;
  • Descripción del paquete de funciones 1: Debido a que el gráfico de la derecha es un histograma y un gráfico de líneas; puede ver que solo los datos y el formulario de presentación, el contenedor donde se encuentra el DOM son diferentes y el eje X y la configuración de color son los mismos , por lo que es mejor encapsular como una función, que también es conveniente Enlace de datos a la izquierda; (de la siguiente manera: ecInit en la figura siguiente es el nombre de la función de referencia, puede definirlo usted mismo en el combate real)

  

  • Descripción del paquete de funciones 2: El eje X son los datos del nombre público, que se extraen de la búsqueda de la lista y se pueden configurar como una variable global;

  
  Descargue los materiales del caso y el código de referencia

Si hay alguna deficiencia, por favor avise,
continúe, ¡continúe actualizando!
¡Progresen juntos!