前端与移动开发----项目实战----学生统计系统（评分展示及期望薪资展示）

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数据，从列表寻找中抽取出来，可设置为全局变量；

  
  猛击下载案例素材及参考代码

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！