vue實現資料的繫結以及如何進行和後臺php就行資料的互動
阿新 • • 發佈：2019-02-14
用vue實現登入的簡單的頁面
對了，我這個是直接下載了vue.min.js和vue-resource.min.js這兩個檔案到我自己的框架上面，你們也可以直接引用線上的
程式碼如下所示：
<style> body{ background-color: #92d2af; } </style> <h2 align="center">登入系統</h2> <body id="app"> <div align="center" class="ab"> <p> 使用者名稱： <input type="text" v-model="zhanghao" placeholder="輸入使用者名稱"> </p> <p>密碼 ：<input type="password" v-model="mima" placeholder="輸入密碼"> </p> <!-- <input type="reset" value="重置">--> <!-- <button @click="register">重置</button>--><button @click="login">登入</button> </div> <script> Vue.http.options.emulateJSON = true;//這個的設定了提交的方式的是post的方式提交 var vue=new Vue({//這個是實現對資料的繫結 el:'#app', data:{ zhanghao:"", mima:"" }, methods:{ login:function () { //console.log("你好！"); this.$http.post("/application/huoqu", {//這裡是將表單的資料提交到該地址 zhanghao:this.zhanghao,//我將表單的兩個文字傳過去 mima:this.mima }).then(function (data) {//這個是獲取到了剛傳過去檔案該檔案的整個資料
if(data.body.results)//如果返回的資料的值是true那麼久說明登入成功 {//獲取傳過去檔案的返回值，如果是為true的話就跳轉到登入成功的頁面 console.log(data.body.results); window.location.href="/application/bbb"; } //console.log(data.body.result); //window.location.href="/application/aaa"; else{//反之則跳轉到失敗的頁面 console.log(data.body.results); window.location.href="/application/aaa"; } }) } } }) </script> <h5 align="center"><a href="http://zf11.com/application/sign">返回註冊</a> </h5> </body> --------------------------------------------------------------------------------------------
對於後臺,我是通過php的zf框架寫的，所以可能會有所不同，但是在其他應該也是這樣的思路：
return new JsonModel(array('results'=>false));
這樣，在前臺能獲取到我的results的值