Vue, Vue-resource

https://github.com/pagekit/vue-resource

js

global conf:

Vue.http.headers.common['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

demo.json

{
    "id": 0,
    "title": "A case",
    "type": 1,
    "source": 1,
    "status": 0,
    "created_on": "2017-05-10 12:00:00",
    "created_by": 0,
    "last_modified_on": "2017-05-10 12:00:00",
    "last_modified_by": 0
}

JavaScript

app = new Vue({
    el: '#app',
    data: {
        item: {}
    },
    filters:{

        typeFilter: function(i){
            return {
                1: "打架斗殴",
                2: "盗窃",
                3: "卖淫嫖娼"
            }[i];
        }
        ,
        sourceFilter: function(i){
            return {
                1: "110",
                2: "自首"
            }[i];
        }
    },
    methods: {
        load: function(){
            let id = router.params.id;
            if(id){
                this.$http.get('/json/case.json').then(response => {
                    console.log('loaded.', response.data);
                    this.$set(this.$data, 'item', response.data);
                });
            }
        }
    }
});
app.load();

HTTP GET

        load: function(){
            let id = router.params.id;
            if(id){
                return Promise.all([
                    this.$http.get('/json/case.json').then(response => {
                        console.log('case data loaded.');
                        this.$set(this.$data, 'item', response.data);
                    }),
                    this.$http.get('/json/officer.json').then(response => {
                        console.log('officer data loaded.');
                        this.$set(this.$data.item, 'last_modified_by', 'Someone');
                    })
                ]);
            }
        }

HTTP DELETE

        remove: function(id){
            if(id && window.confirm('确定要删除"'+this.item.title+'"?')){
                this.$http.delete('./case.do', { body: {id: id}}).then(response => {
                    this.$delete(this.$data.item, 'id');
                    console.log('removed.');
                    router.goto('#case_list.html');
                });
            }
        }

Promise all

Global filters

filters.vue.js

Vue.filter('Case.typeFilter', function(i){
    return {
        0: "-",
        1: "打架斗殴",
        2: "盗窃",
        3: "卖淫嫖娼"
    }[i];
});
Vue.filter('Case.sourceFilter', function(i){
    return {
        0: "-",
        1: "110",
        2: "自首"
    }[i];
});
Vue.filter('Case.statusFilter', function(i){
    return {
        0: "-",
        1: "未结案",
        2: "已结案"
    }[i];
});

                        
                            {{ item.type | Case.typeFilter }}
                        
                        
                            {{ item.source | Case.sourceFilter }}
                        
                        
                            {{ item.status | Case.statusFilter }}