如果你想开发一个应用(1-21)
2018-02-28 21:32
309 查看
提交-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项所保存的天气属性。
然后客户端不需要保存图标,删除即可。
这样,首页的列表在单月显示的层面上已经完成了目标。同样的,看看效果:
相关文章推荐
- 如果你想开发一个应用(1-2)
- 如果你想开发一个应用(1-8)
- 如果你想开发一个应用(1-4)
- 如果你想开发一个应用(1-5)
- 如果你想开发一个应用(1-11)
- 如果你想开发一个应用(1-17)
- 如果你想开发一个应用(1-22)
- 如果你想开发一个应用(1-12)
- 如果你想开发一个应用(1-10)
- 如果你想开发一个应用(1-19)
- 如果你想开发一个应用(1-6)
- 如果你想开发一个应用(1-20)
- 如果你想开发一个应用(1-16)
- 如果你想开发一个应用(1-13)
- 如果你想开发一个应用(1-7)
- 如果你想开发一个应用(1-9)
- 如果你想开发一个应用(1-15)
- 如果你想开发一个应用(1-18)
- 如果你想开发一个应用(1-1)