2020/8/21
今天在公司早上接觸Vue實現后台數據庫的增刪查改，比之前更高效，尤其是遍歷查詢，代碼少快速
$.ajaxSetup({
async:false
})
$(function(){
let app=new Vue({
el:".content",
data:{
title:"用戶管理",
//學生集合
slist: loadStudentAll(),
deleteId:-1,
//初始化修改和添加對象
info:{"id":"","name":"","pwd":"","cinfo":{}},
//班級集合
clist:loadClassesAll()
},
methods:{
//刪除方法
deleteById:function () {
deleteStudentById(this.deleteId)
this.slist=loadStudentAll()
},
//給刪除ID賦值
setId:function (setId) {
//獲取刪除的ID
this.deleteId=setId
},
//給修改ID賦值
setUpdateIndex:function (updateIndex) {
//左手倒右手
setInfo(this.info,this.slist[updateIndex])
},
//修改方法
save:function(){
updateStudent(this.info)
this.slist=loadStudentAll()
}
}
})
})
//ajax加載學生
function loadStudentAll() {
let sitems;
$.getJSON("http://localhost:8080/web006/StudentServlet?type=select",{
"pageSize":10
},function (data) {
sitems=data.data
})
return sitems;
}
//ajax加載班級
function loadClassesAll() {
let sitems;
$.getJSON("http://localhost:8080/web006/ClassesServlet",{},function (data) {
sitems=data
})
return sitems;
}
//ajax刪除
function deleteStudentById(sid) {
$.getJSON("http://localhost:8080/web006/StudentServlet?type=delete",{
"id":sid
},function (data) {
sitems=data.data
})
}
//ajax修改
function updateStudent(info){
info.classid=info.cinfo.id
$.post("http://localhost:8080/web006/StudentServlet?type=update",
toData(info)
,function (data) {
})
}
//交換兩個對象的值，而不是引用
function setInfo(ninfo,oinfo){
for(let key in oinfo){
ninfo[key]=oinfo[key]
}
}
//把JSON對象轉換成post請求參數
function toData(info){
let msg=""
for(let key in info){
if (typeof(info[key])!='object')
msg+=key+"="+info[key]+"&"
}
msg=msg.substr(0,msg.length-1)
return msg;
}
下午是修改項目表的字段及類型
晚上是整理思緒寫dao層，嘗試實現一張表的增刪查改，由於字端比較多，所以sql語句比較長，任然需要努力
