JS-專案實戰-學生統計系統

目的

• 獨立完成PC端頁面佈局；（不需要精確，CSS美化和JS邏輯）
• 熟練使用less預編譯語言；（基本上不會直接寫CSS）
  • 巢狀：HTML結構；
  • 計算：
  • 變數：
• 熟練使用JQ使用、快速定位查詢echarts基本配置；

需求及規範

功能模組

• 分為三個區域；

業務需求

• 佈局：使用less，按照引導最大程度使用flex還原頁面佈局；
• JS-新增：點選新增按鈕，輸入為空進行提醒，不能實現新增；

• JS-列表：新增資料顯示在第一位；

• JS-刪除：點選列表中某條資料的刪除，刪除當前資料；

• js-列表：重新整理頁面，資料長久顯示；
• echarts-評分展示及期望薪資展示：

• echarts-隨動：左側列表新增、刪除資料後，右側圖表隨著變化；（JS函式封裝：echarts初始化）

佈局及技術棧

• 佈局：不嚴格；搭建出來；
  • 高度同當前螢幕高度；
  • 最小寬度為1280px;
  • 右側固定寬度500px，左側隨螢幕可拉伸；
  • 使用less預編譯語言寫樣式；推薦，不強制！
• JS：
  • 使用JQ進行dom操作；
  • 部分重複程式碼進行 函式封裝和配置引數；

目錄規範

 project             # 專案目錄
    ├── css          # css樣式資料夾
    ├── js           # JS檔案
    ├── imgs         # 業務圖片資料夾
    └── index.html   # 首頁

技術方案參考

佈局參考

• 整體佈局：
  • 右側固定寬度500px，左側隨螢幕可拉伸：聖盃佈局；
  • 整個頁面佈局：建議使用flex佈局（不考慮PC的相容性），此次實戰沒有固定px值測量，大概佈局合理就可以
  • less樣式編寫：參考移動端佈局less的使用；

JS參考

• 列表：資料本地化新增、刪除功能，參考JQ階段的todoLIst案例；

• echarts圖表的函式封裝：參考，不強制！

  • 配置：參考資料視覺化配置學習；
  • 函式封裝說明1：因為右側圖表為柱狀圖與折線圖；可以看到只有資料及表現形式、DOM所在容器不一樣，X軸及顏色配置都一樣，所以最好封裝為一個函式，也便於和左側資料聯動；（如下：下圖中ecInit為參考函式名，實戰時可自己定義）

  

  • 函式封裝說明2：其中X軸為公共name資料，從列表尋找中抽取出來，可設定為全域性變數；

  
  猛擊下載案例素材及參考程式碼

如有不足，請多指教，
未完待續，持續更新！
大家一起進步！