如果你想开发一个应用(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项所保存的天气属性。
然后客户端不需要保存图标，删除即可。
这样，首页的列表在单月显示的层面上已经完成了目标。同样的，看看效果：
