Front-end and mobile development-project actual combat-student statistics system (score display and expected salary display)

JS-Project Actual Combat-Student Statistics System

purpose

• Complete the PC-side page layout independently; (no need for precision, CSS beautification and JS logic)
• Proficient in using less pre-compiled language; (basically don’t write CSS directly)
  • Nesting: HTML structure;
  • Calculation:
  • variable:
• Proficient in using JQ to quickly locate and query the basic configuration of echarts;

Requirements and specifications

functional module

• Divided into three areas;

Business needs

• Layout: Use less to restore the page layout using flex to the maximum extent according to the guide;
• JS-Add: Click the Add button, the input is empty to remind, the addition cannot be realized;

• JS-list: the new data is displayed in the first place;

• JS-Delete: Click to delete a piece of data in the list to delete the current data;

• js-list: refresh the page and display the data for a long time;
• echarts-score display and expected salary display:

• echarts-following: After adding or deleting data in the left list, the chart on the right changes; (JS function package: echarts initialization)

Layout and technology stack

• Layout: not strict; build it out;
  • The height is the same as the current screen height;
  • The minimum width is 1280px;
  • The right side has a fixed width of 500px, and the left side can be stretched with the screen;
  • Use less precompiled language to write styles; recommended, not mandatory!
• JS：
  • Use JQ for dom operation;
  • Part of the code is repeated for function encapsulation and configuration parameters;

Directory specification

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

Technical solution reference

Layout reference

• overall arrangement:
  • The right side has a fixed width of 500px, and the left side can be stretched with the screen: Holy Grail layout;
  • The entire page layout: It is recommended to use flex layout (without considering PC compatibility). There is no fixed px value measurement in this actual combat, and the layout is probably reasonable.
  • Less style writing: refer to the use of mobile layout less;

JS reference

• List: Add and delete functions of data localization, refer to the todoLIst case in the JQ stage;

• Function package of echarts chart: reference, not mandatory!

  • Configuration: Reference data visualization configuration learning;
  • Function package description 1: Because the chart on the right is a histogram and a line chart; you can see that only the data and presentation form, the container where the DOM is located are different, and the X axis and color configuration are the same, so it is best to encapsulate as a function, which is also convenient Data linkage on the left; (as follows: ecInit in the figure below is the reference function name, you can define it yourself in actual combat)

  

  • Function package description 2: The X axis is the public name data, which is extracted from the list search and can be set as a global variable;

  
  Download case materials and reference code

If there are any shortcomings, please advise, to
be continued, continue to update!
Make progress together!