Vue.js 使用Vue.js和Jquery做增刪改查
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet"/> <style type="text/css"> table thead tr th { text-align: center; } </style> <script src="js/jquery-3.3.1.js"></script> <script src="js/axios.min.js"></script> <!--<link rel="stylesheet" href="css/index.css">--> <script src="js/vue.js"></script> <!--<script src="js/index.js"></script>--> </head> <style> /***** 結合CSS樣式一起使用 *****/ [v-cloak] { display: none !important; } </style> <body> <div id="app" v-cloak style="padding:20px;"> <div id="index" class="panel panel-primary"> <div class="panel-heading"> 搜尋名字: <input type="text" id="name" name="name"> 班級號: <select id="classid" name="classid"> <option value="">請選擇</option> <option v-for="item in clist" :value=item.classid>{{item.classname}}</option> </select> 教師名: <select id="teacherid" name="teacherid"> <option value="">請選擇</option> <option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option> </select> <input type="button" @click.prevent="find()" value="搜尋" id="find" name="find"> <input type="button" @click.prevent="add()" value="新增" id="add" name="add"> </div> <!--width="90%" border="1"--> <table class="table table-bordered table-striped text-center"> <tr> <td>編號</td> <td>名字</td> <td>班級名</td> <td>教師名</td> <td>操作</td> </tr> <tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.classname}}</td> <td>{{item.teachername}}</td> <td> <a href="#" @click.prevent="remove(item.id)">刪除</a> <a href="#" @click.prevent="edit(item)">修改</a> </td> </tr> </table> <br> <div><a href="#" @click.prevent="homepage">首頁</a> <a href="#" @click.prevent="uppage">上一頁</a> 當前頁:{{pagebean.page}} 最大頁數:{{pagebean.maxPages}} <a href="#" @click.prevent="down">下一頁</a> <a href="#" @click.prevent="lastpage">末頁</a> <input type="number" style="width: 50px" id="pagex" min="1" > <input type="button" @click.prevent="go()" value="跳轉" id="t"> <select id="limit" @change="changge()"> <option>10</option> <option>20</option> </select> </div> <!--<template>--> <!--<v-pagination :total=pagebean.maxPages @page-change="pageChange1" @page-size-change="pageSizeChange1"></v-pagination>--> <!--</template>--> <input type="hidden" value="" id="page"> </div> <!--編輯頁面--> <div id="edit"> <table class="table table-bordered table-striped text-center"> <input type="hidden" id="hid"> <tr> <td>姓名</td> <td><input type="text" name="ename" id="ename"></td> </tr> <tr> <td>班級</td> <td> <select id="eclassid" name="eclassid"> <option value="">請選擇</option> <option v-for="item in clist" :value=item.classid>{{item.classname}}</option> </select> </td> </tr> <tr> <td>教師</td> <td><select id="eteacherid" name="eteacherid"> <option value="">請選擇</option> <option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option> </select></td> </tr> <tr> <td><input type="button" @click.prevent="confirm" value="確定"></td> <td><input type="button" @click.prevent="back" value="返回"></td> </tr> </table> </div> </div> <script> $('#edit').hide(); //例項化vue var vm = new Vue({ el: '#app', data: { list: find().list,//學生資料 clist: class_bind(),//班級資料 tlist: teacher_bind(),//教員資訊 pagebean: find().pagebean//分頁資訊 }, created() {//佈置完之後執行的區域 }, methods: { find() {//查詢 this.list = find().list this.pagebean = find().pagebean } , remove(id) {//刪除 if (confirm('確定刪除嗎?')) { remove(id); this.list = find().list this.pagebean = find().pagebean } }, back() {//點選返回 $('#index').show(); $('#edit').hide(); //該專案的所有ajax請求可以改成以下的axios請求 // let params=new URLSearchParams(); // params.append("limit","20"); // params.append("name","張三"); // axios.post('studentaction.action?methodName=find',params).then(function (value) { // console.log(value.data);//value.data為返回的資料 // }) }, edit(item) {//點選修改 $('#index').hide(); $('#edit').show(); $('#hid').val(item.id); $('#ename').val(item.name); $('#eclassid').val(item.classid); $('#eteacherid').val(item.teacherid); }, add() {//點選新增 $('#index').hide(); $('#edit').show(); }, confirm() {//確定按鈕 if ($('#hid').val() == "") {//為空則是新增 add('add'); } else { add('edit');//修改 } this.list = find().list this.pagebean = find().pagebean }, homepage() {//點選首頁 $('#page').val(1); this.list = find().list this.pagebean = find().pagebean }, uppage() {//上一頁 var up = $('#page').val() == 1 ? 1 : parseInt($('#page').val()) - 1; $('#page').val(up); this.list = find().list this.pagebean = find().pagebean }, down() {//下一頁 var dowm = $('#page').val() == this.pagebean.maxPages ? this.pagebean.maxPages : parseInt($('#page').val()) + 1; $('#page').val(dowm); this.list = find().list this.pagebean = find().pagebean }, lastpage() {//末頁 $('#page').val(this.pagebean.maxPages); this.list = find().list this.pagebean = find().pagebean }, go() {//跳轉 if ($('#pagex').val() >= 0 && $('#pagex').val() <= this.pagebean.maxPages) { $('#page').val($('#pagex').val()); this.list = find().list this.pagebean = find().pagebean } else { alert('請輸入正確頁數'); } }, changge() {//換數量的方法 this.list = find().list this.pagebean = find().pagebean } } }); /** * 查詢方法 * @returns {*} */ function find() { var data2; $.ajax({ type: "post", url: "studentaction.action?methodName=find", dataType: "json", data: {//傳給servlet的資料, name: $('#name').val(), classid: $('#classid').val(), teacherid: $('#teacherid').val(), page: $('#page').val(), limit: $('#limit').val(), d: new Date() }, async: false,//加上這個ajax先執行 success: function (data) { $('#page').val(data.pagebean.page); //返回處理的方法 console.log(data); data2 = data; } }); return data2; } /** * 班級資料繫結 */ function class_bind() { var data2; $.ajax({ type: "post", url: "studentaction.action?methodName=cfind", dataType: "json", data: {//傳給servlet的資料, d: new Date() }, async: false,//加上這個ajax先執行 success: function (data) { //返回處理的方法 data2 = data; } }); return data2; } /** * 教員資料繫結 */ function teacher_bind() { var data2; $.ajax({ type: "post", url: "studentaction.action?methodName=tfind", dataType: "json", data: {//傳給servlet的資料, d: new Date() }, async: false,//加上這個ajax先執行 success: function (data) { //返回處理的方法 data2 = data; } }); return data2; } /** * 新增和修改 */ function add(index) { var ur = "studentaction.action?methodName=add"; if (index == 'edit') { ur = "studentaction.action?methodName=edit"; } $.ajax({ type: "post", url: ur, dataType: "json", data: {//傳給servlet的資料, id: $('#hid').val(), name: $('#ename').val(), classid: $('#eclassid').val(), teacherid: $('#eteacherid').val(), d: new Date() }, async: false,//加上這個ajax先執行 success: function (data) { if (data) { alert('操作成功'); $('#index').show(); $('#edit').hide(); $('#hid').val(""); $('#ename').val(""); $('#eclassid').val(""); $('#eteacherid').val(""); } else { alert('操作失敗') } } }); } /** * 刪除 */ function remove(id) { $.ajax({ type: "post", url: "studentaction.action?methodName=remove", dataType: "json", data: {//傳給servlet的資料, id: id, d: new Date() }, async: false,//加上這個ajax先執行 success: function (data) { //返回處理的方法 if (data) { alert('刪除成功') } else { alert('刪除失敗'); } } }); } </script> </body> </html>