Maven多模块+SSM框架（六、 Vue.js渐进式框架配合Ajax的简单使用 ）

最近学习了Vue文档真的是非常友好，简单易懂，所以学习成本比较低，易上手。

建议学习时看官方文档（自我感觉比看视频效果好点） Vue.js 渐进式Javascript 框架

在之前配置的“装饰页”中添加引用

     //创建一个新的 Vue 实例
var app=new Vue({
    el: '#app',
    //数据对象
    data: {
 studentInfos : []
    },
    //加载时自动执行
    mounted() {
 this.getData(0)
    },
    //方法写这里
    methods: {
 getdata: function (id) {
     $.ajax({
  type: "POST",
  url: "/studentApi/findAllStudentInfo.do",
  data: {id:id},
  dataType: "json",
  success: function (data) {
   if(data.success)
   {
app.studentInfos=data.result;
   }
   else
   {
//调用Bootstrop中的模态框
$('#myModal').modal('show');
$("#myModalLabel").html("糟糕");
$("#modal-body").html("数据获取异常"+data.message);
$("#bt1").html("确定");
$("#bt1").attr("data-dismiss","modal");
   }

  }
     });
 }
    },
    //过滤器
    filters: {
 studentSex:function(sex) {
     var stuSex="女";
     if(sex){
  stuSex="男";
     }
     return stuSex;
 }
    }
});

<%--
  Created by IntelliJ IDEA.
  User: SongLiuxin
  Date: 2017/9/7
  Time: 13:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


    





    
 
 

     
  首页 
     

 
 
     学生信息
 
 
    



    
 
 
     
     
  

      

      

   
序号
   
学生ID
   
姓名
   
性别
   
地址
      
      
      

      

   
{{index+1}}
   
{{studentInfo.id}}
   
{{studentInfo.name}}
   
{{studentInfo.sex | studentSex }}
   
{{studentInfo.address}}