如果你想开发一个应用(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项所保存的天气属性。

然后客户端不需要保存图标，删除即可。

这样，首页的列表在单月显示的层面上已经完成了目标。同样的，看看效果：