若是你想開發一個應用(1-21)

提交-Vue

如今CreateOrShowDiaryItem附屬的功能均已完成，對於基礎功能來講，就差了最後一步。就是數據的提交。

有了前邊的鋪墊，這裏就比較簡單了。

首先是Vue部分，須要根據後臺的模型來建立前端所需提交的模型，由於以前的數據值都已經設置好，因此這塊基本將後端模型複製修改就能夠了(定位依然手動設置)：

var data={
    token:this.token,
    groupId:this.groupId,               //所屬組
    item:this.item,                     //標題
    conent:this.conent,                 //內容
    weather:this.weather,               //天氣
    weatherContent:this.weatherContent, //天氣內容(獲取或設置的json)
    mood:this.mood,                     //心情
    bookmark:0,                         //是否標記，默認爲0
    address:this.addressValue+" "+this.addressCity+" "+this.addressProvince,            //地址
    lng:0,  //手動設置定位沒有經緯度信息
    lat:0,
}

提交-服務端

這裏暴露一個接收客戶端數據的接口，暫時定位名字爲saveTodos吧，他的代碼就是講上傳的data轉換爲數據模型並保存：

@RequestMapping(value = "/api/saveTodos",method = RequestMethod.POST)
public Object saveTodos(HttpServletRequest request,@RequestBody Map map){
    //獲取用戶
    String userId=request.getAttribute("tokenId").toString();
    //建立對象
    Todo todo=new Todo();
    todo.setCreateTime(new Date());
    todo.setUserId(Integer.parseInt(userId));
    todo.setAddress(map.get("address").toString());
    todo.setBookmark(Integer.parseInt(map.get("bookmark").toString()));
    todo.setItem(map.get("item").toString());
    todo.setContent(map.get("conent").toString());
    todo.setGroupId(Integer.parseInt(map.get("groupId").toString()));
    todo.setLat(Double.parseDouble(map.get("lat").toString()));
    todo.setLng(Double.parseDouble(map.get("lng").toString()));
    todo.setMood(Integer.parseInt(map.get("mood").toString()));
    todo.setWeather(Integer.parseInt(map.get("weather").toString()));
    todo.setWeatherContent(map.get("weatherContent").toString());
    //保存
    todoService.save(todo);
    return result();
}

溝通

最後就是客戶端對服務端的調用了，有了以前的經驗，這裏也就沒什麼難度了：

save: function(event){
    var data={
        token:this.token,
        groupId:this.groupId,
        item:this.item,
        conent:this.conent,
        weather:this.weatherIconIndex,
        weatherContent:this.weatherContent,
        mood:this.mood,
        bookmark:0,
        address:this.addressValue+" "+this.addressCity+" "+this.addressProvince,
        lng:0,
        lat:0,
    }
    
    this.$http.post("/api/saveTodos",data,{headers:{"token":this.token}}).then(res=>{
        if(res.data.msg!=""){
            //服務端錯誤 暫時使用最low的方法提示
            alert(res.data.msg)
        }
        //添加成功
        this.$store.commit('close')
    },res=>{
        //查詢服務器錯誤 一樣使用最low的方法提示
        alert(res.data.msg)
    })
},

補完列表項

如今提交以後僅僅是關閉這個組件，首頁並不會本身刷新，在實現自動刷新以前，先手動刷新一下，能夠看到，天氣和心情的圖標是沒有顯示的，這個也很明顯，由於以前的數組都是空的，下面補完這兩項:

心情

心情很簡單，直接把圖標項補全就好了

util/mood.js

export function mood(num) {
    var moodValue=["sentiment_very_satisfied","sentiment_satisfied","sentiment_neutral","sentiment_dissatisfied","sentiment_very_dissatisfied"]
    if(num==null)
        num=0;
    return moodValue[num];
}

天氣

天氣就稍微麻煩一點了，由於開始設計的是使用icon，但後期又改成使用圖片圖標，因此須要修改一下列表，將天氣圖標修改成img標籤，而且因爲圖標的特殊性，將圖標位置修改成第一個，而且，爲了避免突兀，將圖標黑白化：

<mu-col width="25" style="text-align:right">
    <img :src=" item.weather | getWeatherValue" class="weatherIconImg">
    <mu-icon :value=" item.mood | getMoodValue  " :size="16"/>
    <mu-icon :value=" item.bookmark | getBookmarkValue  " :size="16"/>
</mu-col>

接下來js過濾器就是一個字符串拼接方法

util/weather.js

export function weather(num) {
    if(num==null)
        num=0;
    //這裏需服務器圖標
    return "http://localhost:8082/images/3d_60/"+num+".png"
}

同時，這個方法CreateOrShowDiaryItem組件內的手動天氣一樣可使用，而且進行一些微調：

<div style="text-align:center">
    <img :src=" 0 | getWeatherValue " :class="weatherIcon0" @click="chooseWeatherIcon(0,0)">
    <img :src=" 7 | getWeatherValue " :class="weatherIcon1" @click="chooseWeatherIcon(1,7)">
    <img :src=" 9 | getWeatherValue " :class="weatherIcon2" @click="chooseWeatherIcon(2,9)">
    <img :src=" 13 | getWeatherValue " :class="weatherIcon3" @click="chooseWeatherIcon(3,13)">
    <img :src=" 24 | getWeatherValue " :class="weatherIcon4" @click="chooseWeatherIcon(4,24)">
    <img :src=" 30 | getWeatherValue " :class="weatherIcon5" @click="chooseWeatherIcon(5,30)">
</div>

第二個參數即爲圖標的num，也是todo項所保存的天氣屬性。

而後客戶端不須要保存圖標，刪除便可。

這樣，首頁的列表在單月顯示的層面上已經完成了目標。一樣的，看看效果：