如果你想開發一個應用(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項所儲存的天氣屬性。

然後用戶端不需要儲存圖示，删除即可。

這樣，首頁的清單在單月顯示的層面上已經完成了目标。同樣的，看看效果：