日历页

接下来把目光转向日历页，这个日历页的功能很单一，点击按钮后，显示当天记录日记项，为了方便起见，仍然不考虑分页问题。

思考一下这个列表和首页的列表有什么区别，首先，每个todos是一模一样的，然后，没有了月份的title，最后，不关心itemnumber这个值，然后在查询上，首页是按照月份查，这个是按照天查。所以，首先从服务端开始，常识新增这个功能。

数据访问层

虽然查询条件不一致，一个是按月份，一个是按天，但在数据库层面，无论是按月份查还是按照天查，都是查询一个起始时间和结束时间的区间内的条目。所以在持久层代码没有修改，依然是之前的代码：

public List<Todo> getByGroupIdAndCreateTimeBetween(int groupId, Date startDate,Date endDate);

服务层

到了服务层，修改就比较大了，首先获取时间区间的方法，之前只有一个参数month，接下来新增一个重载，这个重载是三个参数：年，月，日，这样就可以获得一日之内的区间：

private DateBetween getDate(int year, int month,int day ){
    DateBetween between=new DateBetween();
    Calendar firstCalender =  Calendar.getInstance();
    firstCalender.set(Calendar.YEAR,year);
    firstCalender.set(Calendar.MONTH,month);
    firstCalender.set(Calendar.DAY_OF_MONTH,day);
    firstCalender.set(Calendar.HOUR_OF_DAY,0);
    firstCalender.set(Calendar.MINUTE,0);
    firstCalender.set(Calendar.SECOND,0);
    between.setFirstDate(firstCalender.getTime());
    // 获取前月的最后一天
    Calendar endCalender =   Calendar.getInstance();
    endCalender.set(Calendar.YEAR,year);
    endCalender.set(Calendar.MONTH, month);
    endCalender.set(Calendar.DAY_OF_MONTH,++day);
    endCalender.set(Calendar.HOUR_OF_DAY,0);
    endCalender.set(Calendar.MINUTE,0);
    endCalender.set(Calendar.SECOND,0);
    endCalender.add(Calendar.SECOND,-1);
    between.setEndDate(endCalender.getTime());
    return between;
}

到了实际进行查询的实现方法，就没这么复杂了，只有两行代码，获取时间区间，然后查询：

public List<Todo> getTodoByCalendarTodoList(int userId, int groupId, int year,int month, int day) {
    DateBetween between=getDate(year,month,day);
    List<Todo> todos=todoRepository.getByGroupIdAndCreateTimeBetween(groupId,between.getFirstDate(),between.getEndDate());
    return todos;
}

接口代码略

控制器

最后，要通过Controller来使用webapi的方式将功能暴露出去，而到了控制器层面，除了参数处理之外就几乎没有什么其他的代码了：

@RequestMapping(value = "/api/calendarTodoList",method = RequestMethod.POST)
public Object calendarTodoList(HttpServletRequest request,@RequestBody Map map){
    Integer userId= Integer.parseInt(request.getAttribute("tokenId").toString());
    Integer year=Integer.parseInt( map.get("year").toString());
    Integer month=Integer.parseInt( map.get("month").toString());
    Integer day=Integer.parseInt(map.get("day").toString());
    Integer groupId=Integer.parseInt(map.get("groupId").toString());
    List<Todo> todos = todoService.getTodoByCalendarTodoList(userId,groupId,year,month,day);
    return result(todos);
}

由于之前的基础，所以现在仅就db查询来说，新增代码都是无比的轻松。

修改模型

刚刚已经分析到，在日历页我们不需要月份信息，仅仅需要todos的内容，所以，在vuex中把他独立出来：

\store\index.js

const todos=[{
    createTime:new Date(),
    item:'',
    content:'',
    weather:0,
    mood:0,
    bookmark:0,
    groupId:0,
}]

可以看到，他直接是一个数组，然后在state中，可以直接写到todos：

const state = {
    ...
    indexTodos:[
        {
            month:0,
            default:1,
            todos
        }
    ],
    ...
    todos
}

还有对todos进行赋值的方法：

mutations: {
    ...
    setTodos(state,todos){
        state.todos=todos;
    }

}

最后别忘了在日历页中进行引用：

\components\Calendar.vue

computed: mapState({
    groupId: state=>state.groupId,
    token: state => state.token,
    todos:state=>state.todos
}),

客户端查询

然后采用最简单粗暴的方法，在按钮的事件内直接将数据查询下来，对模型进行赋值。然后在想办法修改样式：

showDiaryList:function(){
    var data={
        year:(new Date()).getFullYear(),
        month:(new Date()).getMonth(),
        day:this.day,
        groupId:this.groupId
    }
    this.$http.post("/api/calendarTodoList",data,{headers:{"token":this.token}}).then(res=>{
        if(res.data.msg!=""){
            this.$router.push({name:"Login"})
        }
        var result=res.data.data;
        if(!(result== undefined ||result=="")&&result.length>0){
            this.$store.commit('setTodos',result);
            this.switchButton(false);
        }else{
            this.shownone=true;
            this.showarrow=false;
            this.switchButton();
        }
    },res=>{
        //查询服务器失败
        this.$router.push({name:"Login"})
    })
},

switchButton顾名思义，是一个按钮切换的功能，这里加了一点动画，用于切换按钮的隐藏与显示：

switchButton:function(x){
    x=x==undefined?true:false;
    let self = this
    setTimeout(function () {
         self.shownone=false;
         self.showlist=x?false:true;
        setTimeout(function () {
            self.showarrow=x?true:false;
        }, 500);

    }, 500);
}

页面

通过刚刚查询的的方法，可以大概的猜出现在的显示区域元素共有三个，按钮，空数据提示，和实际数据列表，一步一步来，首先是按钮的修改：

<transition name="fade">    
    <div class="arrow" v-if="showarrow">
        <mu-float-button icon="expand_more" iconClass="arrowicon" @click="showDiaryList" class="arrowbtn"/>
    </div>
</transition>

在包裹一层动画的基础上，新增了if语句来决定师傅输出显示。

然后是空数据提示：

<transition name="fade">
    <div v-if="shownone">
        当天没有记录！
    </div>
</transition>

和按钮一样，没什么可说的，接下来就是todos的列表部分了，这里同样先使用最简单粗暴的方式，直接调用之前定义好的组件，然后将todos作为参数传过去：

<DiaryListComponents v-bind:todos="todos"></DiaryListComponents>

非常简单，这就是组件复用的力量。

最后，照例放上截图看看效果：