vue+spring boot（二）多条【json格式】

大致流程，加载页面时，发送get请求获取数据，使用数据渲染页面
获取的是List，在控制层转换成了json格式的字符串，所以在前端需要在转换成数组

前端代码核心部分

<div class="main" id="users">                <table>                    <thead>                        <tr>                            <th>姓名</th>                            <th>年龄</th>                            <th>生日</th>                            <th>电话</th>                            <th>编号</th>                        </tr>                    </thead>                    <tbody>                    <!--遍历对象 -->                        <tr v-for="user in users">                            <td>{{user.userName}}</td>                            <td>{{user.age}}</td>                            <td>{{user.birthday}}</td>                            <td>{{user.tel}}</td>                            <td>{{user.userID}}</td>                        </tr>                    </tbody>                </table>            </div>        </div></div></body><script>    var vm = new Vue({        el: '#users',        data:  {            //定义数组接收            users: []        },        created: function() {            var url="http://localhost:8080/getUsers";            //ajax获取数据            this.$http.get(url).then(function(result){                var json = result.bodyText;                //转成数组                this.users = JSON.parse(json);                //this.users = eval("("+json +")");                console.log(this.user);            },function(response){                console.log(response)            })        }    });</script>

后端代码核心部分

     @RequestMapping("/getUsers")        public String getUsers(){         String jso = JSON.toJSONString(userService.getAllUser());            return jso;        }

模拟数据

public List<User> getAllUser() {        List<User> userList = new ArrayList<User>();        for(int i = 0;i<10;i++){            User user = new User();            user.setAge(25-i);            user.setUserName("李"+i+"涵");            user.setBirthday(new Date());            user.setGender('0');            user.setTel("1517921803"+i);            user.setUserID(976+i);            userList.add(user);        }        return userList;    }