leetcode 31:triangle
阿新 • • 發佈:2020-08-16
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>