若是你想開發一個應用(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>

很是簡單，這就是組件複用的力量。

最後，照例放上截圖看看效果：