6.添加客户#6.1。点击添加按钮，弹出表单框//添加用户显示对话框varaddBtn=document.getElementById('add-btn');varaddUser=document.getElementById('adduser');addBtn.onclick=function(){addUser.style.display="块";addUser.style.left=document.documentElement.clientWidth/2-addUser.offsetWidth/2+"px";addUser.style.top=document.documentElement.clientHeight/2-addUser.offsetHeight/2+"px";返回假；};#6.2。点击表单框上的保存按钮将数据发送到后台//点击保存varsaveBtn=document.getElementById('save-btn');varcancelBtn=document.getElementById('cancel-btn');saveBtn.onclick=function(){varusername=document.getElementById('用户名');varemail=document.getElementById('email');varphone=document.getElementById('phone');varqq=document.getElementById('qq');ajax({method:'post',url:'/adduser',data:'username='+username.value+"&email="+email.value+"&phone="+phone.value+"&qq="+qq.value,success:function(result){console.log(result)}})};#6.3。点击表单框取消按钮隐藏表单框//点击取消添加用户对话框cancelBtn.onclick=function(){addUser.style.display="none";}#6.5.后台接收前端发送的数据，将数据写入数据库，返回Result给前端//添加数据if(url_obj.pathname==='/adduser'&&req.method==='POST'){varuser_info='';req.on('data',function(chunk){user_info+=chunk;});req.on('end',function(err){if(!err){varuser_obj=queryString.parse(user_info);varsql='INSERTINTOuserVALUE('+null+',"'+user_obj.username+'","'+user_obj.email+'","'+user_obj.phone+'","'+user_obj.qq+'")';connection.query(sql,function(error,result){if(!error&&result){res.write('{"status":0,"message":"添加成功"}');res.end();}})}})return;}#6.4。前端获取后台返回的数据，做相应的逻辑处理//点击保存varsaveBtn=document.getElementById('save-btn');varcancelBtn=document.getElementById('cancel-btn');saveBtn.onclick=function(){varusername=document.getElementById('用户名');varemail=document.getElementById('email');varphone=document.getElementById('phone');varqq=document.getElementById('qq');ajax({method:'post',url:'/adduser',data:'username='+username.value+"&email="+email.value+"&phone="+phone.value+"&qq="+qq.value,success:function(result){if(result.status===0){addUser.style.display="none";alert(result.message);window.location.reload();}}})};7.Editcustomeredituserinformation和添加用户非常相似，只是在编辑用户时多了一个数据回显步骤#7.1。点击编辑弹出编辑框，回显数据vareditUsername=document.getElementById('edit-username');vareditEmail=document.getElementById('edit-email');vareditPhone=document.getElementById('edit-phone');vareditQq=document.getElementById('edit-qq');vareditId=document.getElementById('edit-id');oTable.onclick=函数（ev）{varev=ev||事件;varaTd=ev.target.parentNode.parentNode.children//如果点击修改，需要回显编辑框if(ev.target.innerHTML==="Modify"){editUser.style.display="block";editUser.style.left=document.documentElement.clientWidth/2-editUser.offsetWidth/2+"px";editUser.style.top=document.documentElement.clientHeight/2-editUser.offsetHeight/2+"px";//显示当前行的数据，形式为editUsername.value=aTd[1].innerHTML;editEmail.value=aTd[2].innerHTML;editPhone.value=aTd[3].innerHTML;editQq.value=aTd[4].innerHTML;editId.value=aTd[0].innerHTML;}};#7.2。点击保存发送数据，点击取消隐藏对话框//点击保存在编辑框取消vareditSaveBtn=document.getElementById('edit-save-btn');vareditCancelBtn=文档ent.getElementById('edit-cancel-btn');//点击取消按钮时，需要隐藏编辑框editCancelBtn.onclick=function(){editUser.style.display="none";}//当点击保存按钮时需要向后台发送数据editSaveBtn.onclick=function(){ajax({method:'post',url:'/update',data:'username='+editUsername.value+"&phone="+editPhone.value+"&email="+editEmail.value+"&qq="+editQq.value+"&id="+editId.value,success:function(result){console.log(result)}})}#7.3.后台接收数据并更新数据库中的数据在index.js中添加数据//修改数据if(url_obj.pathname==='/update'&&req.method==='POST'){varuser_info='';req.on('data',function(chunk){user_info+=chunk;});req.on('end',function(err){if(!err){varuser_obj=queryString.parse(user_info);varsql='UPDATEuserSETusername="'+user_obj.username+'",email="'+user_obj.email+'",'+'phone="'+user_obj.phone+'",qq="'+user_obj.qq+'"WHEREid='+Nu成员（user_obj.id）；控制台日志（sql）；connection.query(sql,function(error,result){if(!error&&result){res.write('{"status":0,"message":"修改成功"}');res.end();}}）}}）返回;}
