我的课程表（技术栈：Vue+node+vant+mysql）

1.首页：

可惜不能放视频
只能贴图为敬
先看一波首页

如图 所示，首页为课程通知页面，提醒今日和明日上什么课。

先贴上代码：

<template>
    
    <div class="index">
        <!--头部采用vant组件-->
        <van-nav-bar
                title="课程通知"
                right-text="按钮"
                @click-right="onClickRight"
        />
        <!--天气引用某个网站提供的API-->
        <div class="wether">
            <keep-alive>
                <iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=center"></iframe>
            </keep-alive>
        </div>
        
        <!--这里采用的是外面一个wrapper布局，里面一个content的常规布局，从而实现了内容可以在一个小窗口滚动的功能-->
        <div class="class-warn-wrapper">
            <div class="class-warn-content" style="">
                <h1 style="font-weight: bolder">明日课程提醒</h1>
                <p>明天是{
  {weekOfNext}}，你有{
  {classNumberOfTomorrow}}课</p>
                <p>日期：明天{
  {tomorrowTime}}</p>
                <p>上课节次：课程如下</p>
                <p
                        v-for="(item,index) in classOfTomorrow"
                        :key="index"

                >{
  {item.date}}|{
  {item.time}}|{
  {item.room}}|{
  {item.name}}</p>
                <br/>
                <br/>
                <br/>
                <br/>
                <h1 style="font-weight: bolder">今日课程提醒</h1>
                <p>明天是{
  {weekOfToday}}，你有{
  {classNumberOfToday}}课</p>
                <p>日期：今天{
  {currentTime}}</p>
                <p>上课节次：课程如下</p>
                <p
                        v-for="(item,index) in classOfToday"
                        :key="index"
                >{
  {item.date}}|{
  {item.time}}|{
  {item.room}}|{
  {item.name}}</p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .index{
    
        background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2096373153,2193313859&fm=26&gp=0.jpg");
        background-size: cover;
        /*background-color:     lightpink;*/
        height: 100%;
        width: 100%;
        .wether{
    
            padding: 1rem 1rem 0 1rem;
        }
    }
    .class-warn-wrapper{
    
        padding: 1rem;
        box-sizing: border-box;
        overflow: scroll;
        height: 50vh;
        .class-warn-content{
    
            background: rgba(255, 255, 255, 0.5);
            border-radius: 1rem;
            padding: 1rem;
            box-sizing: border-box;
            p{
    
                font-size: 1rem;
                height: 2rem;
                line-height: 2rem;
                overflow: hidden;
                text-overflow:ellipsis;
                display: inline-block;
                white-space: nowrap;
                width: 100%;
            }
        }
    }
    .class-warn-wrapper::-webkit-scrollbar{
    
        display: none;
    }
</style>

页面布局代码如此。
接下来是处理数据的部分，这里的难点是

• 如何知道今天的日期和明天的日期
• 如何如何根据今天和明天的日期，把对应的课程渲染出来

后来得知有插件moment.js可以解决第一步问题

this.tomorrowTime = moment().add('days',1).format('YYYY年MM月DD日');
this.currentTime = moment().format('YYYY-MM-DD');

这分别是获得今天和明天的日期

在state中 保存着整个学期的课程数据

如图，属于这种格式
首先就要得到这一天的和明天的课程，采用allCourse[“weekday”] 的方法，获得本周的课程，而而在这里又出现一个问题，就是weekday 属于该学期的哪一周，属于一个难题。
于是采用这个方法获得weekday

function TodayInfo(start) {
   
    var WEEKLEN = 7, // 一周7天为常量
        WEEKDAYS = ["日", "一", "二", "三", "四", "五", "六"],
        weekInfo = {
   "week": null, "day": null}, // 初始化返回信息，默认第null周，星期null
        oneDay = 24 * 60 * 60 * 1000, // 一天的毫秒时长
        weekLeave, // 开学当天所在周剩余天数
        weekStart, // 开学当天start是星期几
        today, // 今天
        dateDiff, // 今天与开学当天日期差
        sDate; //开学之日，日期对象
    var rDateStr = /\d{4}[\/-]\d{1,2}[\/-]\d{1,2}/g; // 简单的日期格式校验：2013/12/19
    if (!rDateStr.test(start)) {
   
        alert("请使用合法的开学日期！！！");
        return weekInfo;
    }
    sDate = new Date(start.replace("-", "/"));
    weekStart = sDate.getDay();
    weekStart = weekStart === 0 ? 7 : weekStart; // JS中周日的索引为0，这里转换为7，方便计算

    weekLeave = WEEKLEN - weekStart;
    today = new Date();
    weekInfo.day = WEEKDAYS[today.getDay()];
    today = new Date(today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate());
    dateDiff = today - sDate;
    if (dateDiff < 0) {
   
        alert("别开玩笑了，你还没开学呢！！！");
        return weekInfo;
    }
    dateDiff = parseInt(dateDiff / oneDay);
    weekInfo.week = Math.ceil((dateDiff - weekLeave) / WEEKLEN) + 1;
    return weekInfo;
}

这个方法里，主要代码

 weekInfo.day = WEEKDAYS[today.getDay()]; //获得今天是星期几

 weekInfo.week = Math.ceil((dateDiff - weekLeave) / WEEKLEN) + 1; //获得今天是本学期的第几周

这里单独抽出来 做为一个TodayInfo的方法的好处，是每个学期只要传个参数，而不需要改动代码。

。。
ok到这里，获得了当天日期信息。
回到上面，，采用allCourse[“weekday”] 的方法，获得本周的课程，
接下来，就是要获得从本周的课程当中获得今天和明天的课程

获得今天的课程 可以判断今天是星期几，比如是星期一，那就是本周课程的第一个数组，，星期二的话，就是第二个数组，以此类推，不过，需要注意的一点是所以可以用条件分支来解决问题（虽然有更好的方法）

 getTodayClass(){
   
                let todayClass = '';
                let tomorrowClass = '';
                if (this.todayTime==="一"){
   
                     todayClass = this.allCourse[this.weekOfToday][0];
                     tomorrowClass = this.allCourse[this.weekOfToday][1];
                } else if (this.todayTime==="二") {
   
                     todayClass = this.allCourse[this.weekOfToday][1];
                     tomorrowClass = this.allCourse[this.weekOfToday][2];
                }else if (this.todayTime==="三") {
   
                     todayClass = this.allCourse[this.weekOfToday][2];
                     tomorrowClass = this.allCourse[this.weekOfToday][3];
                }else if (this.todayTime==="四") {
   
                     todayClass = this.allCourse[this.weekOfToday][3];
                     tomorrowClass = this.allCourse[this.weekOfToday][4];
                }else if (this.todayTime==="五") {
   
                     todayClass = this.allCourse[this.weekOfToday][4];
                     tomorrowClass = this.allCourse[this.weekOfToday][5];
                }else if (this.todayTime==="六") {
   
                     todayClass = this.allCourse[this.weekOfToday][5];
                     tomorrowClass = this.allCourse[this.weekOfToday][6];
                }else if (this.todayTime==="日") {
   
                     todayClass = this.allCourse[this.weekOfToday][6];
                      let tempString = `第${
     TodayInfo("2019/9/4").week+1}周`;
                      tomorrowClass = this.allCourse[tempString][0];
                    this.weekOfNext = `第${
     TodayInfo("2019/9/4").week+1}周`;
                }

                this.classNumberOfToday =0;
                this.classNumberOfTomorrow = 0;
                this.classOfTomorrow = [];
                this.classOfToday = [];
                todayClass.forEach((item,index)=>{
   
                    if (item){
   
                        this.classNumberOfToday++;
                        this.classOfToday.push(item);
                    }
                });
                tomorrowClass.forEach((item,index)=>{
   
                    if (item){
   
                        this.classNumberOfTomorrow++;
                        this.classOfTomorrow.push(item);
                    }
                })
            }

这样就得到了今天的所有课程和明天的所有课程
那解决了这个问题，那其他问题就迎刃而解了。
完整代码附上

  this.weekDay = `第${
     TodayInfo("2019/9/4").week}周`;

<template>

    <div class="index">
        <van-nav-bar
                title="课程通知"
                right-text="按钮"
                @click-right="onClickRight"
        />
        <div class="wether">
            <keep-alive>
                <iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=center"></iframe>
            </keep-alive>
        </div>
        <div class="class-warn-wrapper">
            <div class="class-warn-content" style="">
                <h1 style="font-weight: bolder">明日课程提醒</h1>
                <p>明天是{
  {weekOfNext}}，你有{
  {classNumberOfTomorrow}}课</p>
                <p>日期：明天{
  {tomorrowTime}}</p>