一、效果展示二、功能实现的思路本项目基于 APICloud 的 AVM 多端框架编写，因此需要想办法去构造特定数据、然后再改变数据，本项目核心业务就是课程数据的处理，难点就是课表的添加。
项目主要针对大学课表进行设计，课程很多地方存在不确定性，如课程周次数可能连续也可能不连续、上课时间可能 1-2 节也可能一整天、上课教室也可能不一样，因此课程的数据结构如下图。
后端需要提供当前周、当前周课程数据、添加课程等接口，当然课程数据查询是比较复杂的，这里就不讲。
前端主要是将课表信息显示在指定位置，数据比较简单。
1、课程列表页面（1）当前周课程原始数据结构这个数据需要再重组，因为需要将课程摆放到指定位置，必须知道距离顶部距离以及自身高度。
可以通过上课时间 jie 这个参数获取 height，top。
横向分为 8 份，每份宽度 12.5%，高度 70px，默认可以显示 13 节课。
课程背景默认有 7 种样式，星期对应的是 left 参数也有 7 种样式，上课节次对应 top 参数有 12 种样式。
每一门课程都是用绝对定位，宽度相同，根据上课时间决定高度、位置代码表示如下：（2）当前周星期数据结构获取当前周的时间代码如下上一周以及下一周相应代码2、课程添加页面本项目主要针对大学课程进行设计，由于上课时间地点可能不规律，因此需要考虑周次、节次、星期、上课地点几个因素。
为了方便用户快速添加课程，同一门课程可支持添加多个上课时间。
页面业务逻辑只有周次选择、时间选择两个地方有点复杂因此将其拆分为两个组件 <class-week></class-week> <class-time></class-time>课程的主要字段如下大学的课程上课时间可能不规律上课周数也不一定是 20 周，周数大致分为单双周以及其他，周数的格式如下：不规律的周次格式：1-9,11,13,15-201-20 周单周的格式：1,3,5,7,9,11,13,15,17,191-20 周双周的格式：2,4,6,8,10,12,14,16,18,201-20 周的格式：1-20但是这种数据格式对后端数据查询很不友好。
页面初始数据，默认 1-24 周全部选中。
（1）单周 choose (1)，双周 choose (2)，全选 choose (0) 具体业务处理源代码如下：（2）选择某一周的函数 set_week (i) 源代码如下（3）确定按钮 get_weeks () 源代码如下上课时间组件 <class-time></class-time> 里面包含星期、上课节次数（注意上课节次数必须是连续的否则需要单独添加另一个上课时间），主要难点在于判断上课节次数是否连续。
页面初始数据，默认最大上课节次 13 节。
选择上课节次数（如 5-9 这里需要判断单击后选中的数据是否为连续的数字）函数 set_time (index) 源代码如下最终前端需要提交给后端的数据格式如下：