vue和java的api交互，获取返回数据，显示在页面

vue和Java API交互

创建一个vue对象，定义存放数据的变量

var vm = new Vue({
//el 表示在某个块下加载，一般是某个块的id
    el: "#HQ",
    data: {
    //定义一个数组用于存放返回的list集合的数据
        list:[]
    },
    created: function () {
    },
    mounted: function () {
    //调用在method属性中定义的方法
        this.initChart();
    },
    //所有自定义的方法都是写在method属性中，然后通过mounted属性this.方法名来加载调用
    methods: {
        initChart: function() ｛
            $.ajax({
                type: 'post',
                async: true,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",//x-www-form-urlencoded
                url:  "你自己的java restapi请求地址",
                data:{
                  你的API所需要的参数，按需传递参数
                },
                dataType: 'json',
                success: function (result) {
                    var option = result;
                    //把API返回的数据赋值给vue初始化定义的list数组变量
                    vm.$data.list = result.xx.rows;
                    console.log(result)
                }
            });
        }
    }
})

在html页面上循环取值

//id要和vue对象中的el保持一致
// v-for= "p in list"表示循环该数组，取出相应属性的值，其中p相当于循环变量，可以随便定义，但是不要和有些变量冲突和关键字冲突
//vue取值则是{{循环变量(p).属性名}}来获取你想要的某个属性的值
//v-if="p.meetingstatus==2 && p.iscurrent==1"表示在循环中假如条件判断，取出循环的某个属性的值作为判断条件，根据取值属性值的不同来显示或者做出相应的操作
<div class="HQ" id="HQ">
        <div v-for= "p in list">
            <a href="">
                <h3>{{p.title}}</h3>
                <span v-if="p.meetingstatus==1">填报中</span><em>{{dateFormat(p.createtime)}}</em>
                <span v-if="p.meetingstatus==2 && p.iscurrent==1">待审核</span>
                <span v-if="p.meetingstatus==2 && p.iscurrent==2">审核中</span>
                <span v-if="p.meetingstatus==3">已完成</span>
            </a>
        </div>
    </div>

至此一个简单的vue和Java服务器端的rest api交互取出返回的数据并在页面上显示就完成了