如果你想开发一个应用(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中把他独立出来:

\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>

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

最后,照例放上截图看看效果: