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

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

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