如果你想开发一个应用(1-23)
image.png
首页功能
接下来回到首页，想想现有功能的缺陷，是的，现在首页只能显示当前月的todos，看动漫中的情况，页面是有一个双重的滑动功能，在单月的情况下，滑动更新每个月的todos，然后到底之后，再去更新下一个月份，接下来要针对这个功能对首页内的todos各模块进行改造
布局改造
对于Panel组件来说，修改一下class即可：
\components\DiaryPanel.vue
.itemlist{
position:relative;
padding: 15px;
overflow-y: scroll; //纵轴显示滚动条
height: 100%;
z-index: 1;
}
然后修改list组件，之前的代码是直接进行item的循环，这里要在外边包裹一层容器：
\components\DiaryPanel.vue
<div class="diarypanel">
<mu-paper class="diaryitem" :zDepth="2" v-for="(item) in todos" >
...
</mu-paper>
</div>
首先同样是修改css：
.diarypanel{
overflow-y: scroll;
}
这时候运行起来，你会发现，纵向滚动条依然无法显示，经过排查，原因为这个容器的高度不固定。没办法，在首页给这个容器加上一个样式：
\views\Index.vue
<div id="contentPanel">
<transition name="custom-classes-transition"
enter-active-class="animated bounceInLeft"
leave-active-class="animated fadeOut"
:duration="{ enter: 700, leave: 200 }">
<component v-bind:is="currentView">
</component>
</transition>
</div>
到了contentPanel的样式：
#contentPanel{
overflow-y: scroll;
}
可以看到，依然不可以。
填充数据##
在继续修改样式之前，我们先对数据进行一下修改，修改为如果发现数据不能撑满一屏，那么继续查询下一个月，下面一步一步的完成这个改变，客户端开始，首先将读取的部分抽象独立出来：
setIndexData:function(data){
this.$http.post("/api/index",data,{headers:{"token":this.token}}).then(res=>{
...
},res=>{
...
})
},
之前的refresh进行改造：
refresh:function(data){
this.setIndexData(data);
},
而创建页面的时候首先会调用一次Irefresh，并付给当前的年份和月份：
created(){
var month=(new Date()).getMonth();
var year=(new Date()).getFullYear();
this.refresh({month:month,year:year})
},
新增一个记录页面总记录数的变量，就叫allCount，每次回调之后更新此值：
if(!(result== undefined ||result=="")){
...
this.allCount+=result.items[0].todos.length;
...
}
同时这里做一个是否充满屏幕的判断，采用最简单粗暴的方法，小于10条即认为他没有将屏幕充满，即新增一条判断：
this.allCount+=result.items[0].todos.length;
if(this.allCount<10){
this.refresh({year:data.year,month:--data.month})
}
同时，在vuex部分还进行一下削繁就简，将叠加服务端返回todos的部分包装起来：
addIndexData(state,indexTodos)
{
if(state.indexTodos[0].month==-1){
state.indexTodos=[indexTodos];
}
else{
var temp=state.indexTodos
temp.push(indexTodos);
state.indexTodos=temp;
}
},
同时month的默认值给-1，然后setIndexData就可以光荣的退休了，直接删除即可。
下面运行看一下效果：
image
看上去似乎非常不错，但是，用手划一下会怎么样呢？
image
偿还服务端债务##
可以看到，一月份之后并没有变为上一年的12月份，看来之前的技术债务到了偿还的时候了。首先还是修改服务端的Controller的增加year的参数。
Integer year=Integer.parseInt(map.get("year").toString());
然后修改服务层参数，这里实际上不需要只有一个月份参数的时间区间，于是加上年份：
public List<Todo> getTodoByDefaultGroup(int userId,int year,int month) {
TodoGroup todoGroup=todoGroupRepository.findByIsDefaultAndUserId(1,userId);
DateBetween between=getDate(year,month);
List<Todo> todos= todoRepository.getByGroupIdAndCreateTimeBetween(todoGroup.getId(),between.getFirstDate(),between.getEndDate());
return todos;
}
getDate的修改地点极少，只需要给first和end增加一行代码就行了：
private DateBetween getDate(int year, int month ){
DateBetween between=new DateBetween();
Calendar firstCalender = Calendar.getInstance();
// 获取前年月的第一天
firstCalender.set(Calendar.YEAR,year);
...
between.setFirstDate(firstCalender.getTime());
// 获取前年月的最后一天
Calendar endCalender = Calendar.getInstance();
endCalender.set(Calendar.YEAR,year);
...
return between;
}
然后对controller调用的部分进行修改。并且返回年份：
......
List<Todo> todos = todoService.getTodoByDefaultGroup(Integer.parseInt(userId),year,month);
Map<String, Object> data = new HashMap<String, Object>();
data.put("month", month+1); //java的月份从0开始
data.put("todos", todos);
data.put("year", year);
data.put("default", 1);
items.add(data);
......
ok 服务端改造完成
偿还客户端债务##
客户端由于设计的缺陷，组件化不够彻底，首页和panel页均访问服务器获取todos，这就要求他们两个均能读取年份和月份的信息并能分别计算，为了方便，从vuex入手(暂时依然不考虑使用getter),首先修改模型，增加year属性：
indexTodos:[
{
month:-1,
year:0,
default:1,
todos
}
],
然后修改index.vue,新增考虑年份的计算方法：
getBeforeMonth(year,month){
if(month>0){
return {year:year,month:--month}
}else{
return{
year:--year,
month:11
}
}
},
调用的地方修改为：
if(this.allCount<10){
this.refresh(this.getBeforeMonth(data.year,data.month))
}
先采用最反模式的方法，在DiaryPanel.vue内同样更新一个类似的方法，同时对查询服务器方法的参数做适当的修改(由月份数字改为年月组成的对象)：
getBeforeMonth(year,month){
if(month>0){
return {year:year,month:--month}
}else{
return{
year:--year,
month:11
}
}
},
upTodos(data){
console.log(data.year);
console.log(data.month);
...
}
下面再次用土土的方法测试一下：
image
修改一个bug
这时候看一下浏览器的输出：
image
啊哦，一直在往下查询，都查到了1987年，一下子查询了30年。这是一个小bug，最终要在页低输出一个已经是最后一条，为了方便操作，将首条记录的年月时间保存在客户端，首先修改一下vuex的模型：
firstYear:0,
firstMonth:0
设置值的方法略。
接下来服务端查询首条记录时间，以年月方式返回：
@RequestMapping(value = "/api/mindate",method = RequestMethod.POST)
public Object getMinDate(HttpServletRequest request,@RequestBody Map map){
Integer userId= Integer.parseInt(request.getAttribute("tokenId").toString());
Date firstDate=todoService.getFirstDateByGroupId(userId);
Map<String, Object> data = new HashMap<String, Object>();
Calendar calendar=Calendar.getInstance();
calendar.setTime(firstDate);
data.put("year",calendar.get(Calendar.YEAR));
data.put("month",calendar.get(Calendar.MONTH));
return result(data);
}
服务层：
public Date getFirstDateByGroupId(int userId) {
TodoGroup todoGroup=todoGroupRepository.findByIsDefaultAndUserId(1,userId);
Todo todo=todoRepository.getFirstByGroupIdOrderByCreateTime(todoGroup.getId());
return todo.getCreateTime();
}
orm略
然后在进入首页的时候调用，并保存：
refresh:function(data){
this.$http.post("/api/mindate",{},{headers:{"token":this.token}}).then(res=>{
console.log(res);
if(res.data.msg!=""){
this.$router.push({name:"Login"})
}
var result=res.data.data;
if(!(result== undefined ||result=="")){
console.log(result);
this.$store.commit('setFirstYear',result.year);
this.$store.commit('setFirstMonth',result.month);
}
},res=>{
//查询服务器失败
this.$router.push({name:"Login"})
})
this.setIndexData(data);
},
而判断方式，则采用最简单粗暴的，只判断一下年份：
if(data.year>=this.firstYear){
this.upTodos(this.getBeforeMonth(data.year,data.month))
}else{
this.loading=false;
}
同时，loadMore方法也需要做一下判断这里就要年份和月份同样判断了：
loadMore () {
//赋值
var year=this.indexTodos[this.indexTodos.length-1].year
var month=this.indexTodos[this.indexTodos.length-1].month-1 //上一个月
if(year>=this.firstYear&&month>this.firstMonth){
this.loading = true
this.upTodos(this.getBeforeMonth(year,month));
}
},
再次运行，这个bug消失了。
偿还了部分技术债务，并且修改了部分bug，这一章也暂时告一段落。
客户端代码：
github
服务端代码：
github
