jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path; %> <html> <head> <base href="<%=basePath%>"> <title>Title</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-table :data="tableData" style=" 100%" :default-sort = "{prop: 'sid', order: 'descending'}" <%--按sid倒序排列--%> > <el-table-column prop="sid" label="编号" sortable width="180"> </el-table-column> <el-table-column prop="sname" label="姓名" sortable width="180"> </el-table-column> <el-table-column prop="age" label="年龄" sortable width="180"> </el-table-column> </el-table> </div> <script type=text/javascript src="/js/jquery.js"></script> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script type=text/javascript src="/js/jquery.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el:"#app", data:{ //动态数据 tableData: [] //固定数据 // tableData: [{ // sid: '2016-05-02', // sname: '王小虎', // age: '上海市普陀区金沙江路 1518 弄' // }, { // sid: '2016-05-04', // sname: '王小虎', // age:'上海市普陀区金沙江路 1518 弄' // }] }, methods: { }, mounted: function () { var _this = this //很重要！！ axios.get('/findall') .then(function (res) { console.log(res); _this.tableData = res.data }) .catch(function (error) { console.log(error); }); }, //不要用ajax,以下无效，返回结果res不同 // mounted:function () { // var _this = this // $.ajax({ // url: '/findall', // type: 'get', // dataType: 'json', // success: function (res) { // _this.tableData=res.data // console.log(res.data) // } // }) // } }) </script> </body> </html> <%-- Vue生命周期可以总共分为8个阶段： beforeCreate（创建前）, created（创建后）, beforeMount(载入前), mounted（载入后）, beforeUpdate（更新前）, updated（更新后）, beforeDestroy（销毁前）, destroyed（销毁后）--%>
controller:
@RequestMapping(value="/findall",produces = "text/plain;charset=utf-8") @ResponseBody public String findall(){ List<Student> list = dao.queryForList(); log.info("list:"+list); Gson gson = new Gson(); String s = gson.toJson(list); return s; }
页面显示：
