如果你想开发一个应用(1-22)

日历页

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

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

数据访问层

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

public List 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 getTodoByCalendarTodoList(int userId, int groupId, int year,int month, int day) {
DateBetween between=getDate(year,month,day);
List 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 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);
}

页面

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

<mu-float-button icon="expand_more" iconClass="arrowicon" @click="showDiaryList" class="arrowbtn"/>

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

然后是空数据提示：

当天没有记录！

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

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

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