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

日历页

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

思考一下这个列表和首页的列表有什么区别，首先，每个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中把他独立出来：

storeindex.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;
	}

}

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

componentsCalendar.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>

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

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