Vue实现后台数据库的增删查改

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语句比较长，任然需要努力