Vue

v-model绑定数据传输到后台进行检验：

<div id="app">
    <fieldset>
        <legend>登录</legend>
        <div class="form-group ">
            <label>帐号</label> <input type="text" class="form-control" v-model="Info.username"
                placeholder="Username">
        </div>
        <div class="form-group">
            <label>密码</label> <input type="password" class="form-control" v-model="Info.password"
                placeholder="Password">
        </div>
        <div class="alert">{{msg}}</div>
        <button class="button btn btn-danger btn-block btn-primary" v-on:click="login();">登录</button>
    </fieldset>
    </div>
        <script type="text/javascript" src="/cws/bootstrap/js/jq.js"></script>
    <script type="text/javascript" src="/cws/bootstrap/js/vue.js"></script>
    <script type="text/javascript">
    
    var app = new Vue ({
        el:"#app",
        data:{
            Info:{},
            msg:""
        },
        methods:{
            login:function(){
                $.post("/cws/user/login" , app.Info , function(backData){
                    if( backData.code == 1001 ){
                        app.msg = backData.msg;
                    }else if( backData.code == 1002 ){
                        window.location.href = "/cws/jump/toMain";
                    }
                });
            }
        }
    });
    </script>

 

前台接收数据v-for数据遍历出来：

<div id="app">
        <table class="table table-striped table-bordered table-hover">
            <tr class="success">
                <th>汽车编号</th>
                <th>汽车名称</th>
                <th>汽车类型</th>
                <th>销售价格</th>
                <th>库存容量</th>
                <th>操作</th>
            </tr>

            <tr v-for = " ( s , i ) in listCar ">
                <th>{{s.carId }}</th>
                <th>{{s.carName}}</th>
                <th>{{s.carType}}</th>
                <th>{{s.carEtel }}</th>
                <th>{{s.carStatus }}</th>

                <th><a v-bind:href=" '/cws/jump/updateStu?id='+s.id " class="btn btn-primary"> <span    //把修改id传输到前台
                        class="glyphicon glyphicon-send"></span>修改
                </a>
                    <button class="btn btn-danger" v-on:click="delCar(s.carId);">
                        <span class="glyphicon glyphicon-trash"></span> 删除
                    </button></th>
            </tr>

        </table>
        </div>

        <script type="text/javascript"
        src="/cws/bootstrap/js/jq.js"></script>
    <script type="text/javascript"
        src="/cws/bootstrap/js/vue.js"></script>
    <script type="text/javascript">
    
    
    $.get("/cws/car/listCar" , function(backData){    //前台接收后台传过来的数据  赋值给app.listCar用v-for遍历出来
        app.listCar = backData.data;
    });
    
    var app = new Vue ({
        el:"#app",
        data:{
            listCar:[]      //接收后台数据
        },
        methods:{
            delCar:function(a){
                $.get("/cws/car/delCar?carId="+a , function(backData){    //接收后台传过来的id   根据id删除信息
                    app.listCar = backData.data;
                });
            }
        }
    });
    </script>

 

添加用户：

    <div id="app">
        <fieldset>
            <legend>添加</legend>
                <div class="form-group ">
                    <label>name</label> <input type="text" class="form-control"
                        placeholder="Username" v-model="info.name">
                </div>
                <div class="form-group">
                    <label>desc</label> <input type="password" class="form-control"
                        placeholder="Password" v-model="info.desc">
                </div>
                <div class="form-group">
                    <label>username</label> <input type="text" class="form-control"
                        placeholder="age" v-model="info.username">
                </div>
                <div class="form-group">
                    <label>password</label> <input type="text" class="form-control"
                        placeholder="grade" v-model="info.password">
                </div>

                <p style="color: red;"></p>
                <button class="button btn btn-danger btn-block btn-primary" 
                    v-on:click="addstudent()">添加</button>
                <a href="/javaweb2020-05-05/jump/toStu.do"
                    class="btn btn-info btn-block">返回</a>
        </fieldset>
    </div>
        <script type="text/javascript"
        src="/javaweb10/bootstrap/js/jq.js"></script>
    <script type="text/javascript"
        src="/javaweb10/bootstrap/js/vue.js"></script>
    <script type="text/javascript">
    
    var app = new Vue ({
        el:"#app",
        data:{
            info:{},
　　　　　　　 msg:""
        },
        methods:{
            addstudent:function(){
                $.post("/javaweb10/stu/addStudent" , app.info , function(backData){
                    app.msg=backData.msg;
                });
            }
        }
    });
    
    
    </script>

 

修改用户：

    <div id="app">
        <fieldset>
            <legend>修改</legend>
            <div class="form-group ">
                <label>帐号</label> <input type="text" class="form-control" v-model="stuInfo.username"
                    placeholder="Username" >
            </div>
            <div class="form-group">
                <label>密码</label> <input type="password" class="form-control" v-model="stuInfo.password"
                    placeholder="Password" >
            </div>
            <div class="form-group">
                <label>年龄</label> <input type="text" class="form-control" v-model="stuInfo.age"
                    placeholder="age" >
            </div>
            <div class="form-group">
                <label>班级</label> <input type="text" class="form-control" v-model="stuInfo.grade"
                    placeholder="grade" >
            </div>
            <div class="form-group">
                <label>号码</label> <input type="text" class="form-control" v-model="stuInfo.tel"
                    placeholder="tel" >
            </div>
            <div class="form-group">
                <label>性别</label> <input type="text" class="form-control" v-model="stuInfo.sex"
                    placeholder="sex" >
            </div>
            <p style="color: red;">{{msg}}</p>
            <button class="button btn btn-danger btn-block btn-primary"
                v-on:click="updateStudent();">修改</button>
            <a href="/javaweb2020-05-05/jump/toStu.do"
                class="btn btn-info btn-block">返回</a>
        </fieldset>
    </div>
    <script type="text/javascript"
        src="/javaweb2020-05-05/bootstrap/js/vue.js"></script>
    <script type="text/javascript"
        src="/javaweb2020-05-05/bootstrap/js/jq.js"></script>
    <script type="text/javascript">
        var a = window.location.href.split("=")[1];    //拆分地址栏获得id

        $.get("/javaweb2020-05-05/stu/getStudent?id=" + a, function(backData) {
            app.stuInfo = backData.data;
        });
        
        var app = new Vue ({
            el:"#app",
            data:{
                stuInfo:{},
                msg:""
            },
            methods:{
                updateStudent:function(){
                    $.post("/javaweb2020-05-05/stu/updateStudent" , app.stuInfo , function(backData){
                        app.msg = backData.msg;
                    });
                }
            }
            
        });
    </script>