本文介绍了如何在SSM（Spring、SpringMVC、MyBatis）架构中结合Vue.js进行前端开发。通过创建Vue实例，利用Ajax与后端交互，实现了学生信息的展示。在学习过程中，作者推荐直接阅读Vue官方文档，并给出了具体的代码示例，包括Vue实例的创建、数据绑定、Ajax请求以及错误处理等。
前言
最近学习了Vue文档真的是非常友好，简单易懂，所以学习成本比较低，易上手。
建议学习时看官方文档(自我感觉比看视频效果好点)Vue.js 渐进式JavaScript 框架
添加Vue.js引用
在之前配置的“装饰页”中添加引用
添加studentInfo.js
/**
* Created by SongLiuxin on 2017/9/7.
*/
//创建一个新的 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;
}
}
});
studentInfo.jsp页面添加
Created by IntelliJ IDEA.
User: SongLiuxin
Date: 2017/9/7
Time: 13:31
To change this template use File | Settings | File Templates.
--%>
学生信息学生信息
序号学生ID姓名性别地址
{{index+1}}{{studentInfo.id}}{{studentInfo.name}}{{studentInfo.sex | studentSex }}{{studentInfo.address}}显示结果
未完待续~~~
扫一扫
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
