首頁手記 Maven多模塊+SSM框架（六、...

Maven多模塊+SSM框架（六、 Vue.js漸進式框架配合Ajax的簡單使用）

標簽：

Java WebApp Vue.js

前言

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

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

添加Vue.js引用

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

建议先看Maven多模块+SSM框架（五、Bootstrop3+Sitemesh3网页布局和修饰的框架）

添加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.
--%>
<%@ 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"%>
<html>
<head>
    <title>学生信息</title>

</head>
<body onload="showFunction1(null,null)">
<!-- start: PAGE HEADER -->
<div class="row">
    <div class="col-sm-12">
        <!-- start: PAGE TITLE & BREADCRUMB -->
        <ol class="breadcrumb">
            <li><i class="clip-home-3"></i> <a
                    href="./${sessionScope.pathCode}/home.do"> 首页 </a>
            </li>

        </ol>
        <div class="page-header">
            <h3>学生信息</h3>
        </div>
        <!-- end: PAGE TITLE & BREADCRUMB -->
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- start: TABLE WITH IMAGES PANEL -->
        <div class="panel-body">
            <div class="row"></div>
            <div class="panel-body" id="app">
                <table class="table table-striped table-bordered table-hover"style="TABLE-LAYOUT:fixed;WORD-BREAK:break-all">
                    <thead>
                    <tr>
                        <th width="5%"><small>序号</small></th>
                        <th width="15%"><small>学生ID</small></th>
                        <th width="15%"><small>姓名</small></th>
                        <th width="15%"><small>性别</small></th>
                        <th width="50%"><small>地址</small></th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <tr v-for="(studentInfo,index) in studentInfos">
                        <td>{{index+1}}</td>
                        <td>{{studentInfo.id}}</td>
                        <td>{{studentInfo.name}}</td>
                        <td>{{studentInfo.sex | studentSex }}</td>
                        <td>{{studentInfo.address}}</td>
                    </tr>

                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../../assets/myassets/js/student/studentInfo.js"></script>
</body>
</html>