删除功能
管理员首页删除部分的代码：
<a class="button border-red" href="javascript:void(0)" onclick=" del(this,<%= item.id %>)"><span class="icon-trash-o"></span> 删除</a>
使用到的js:
//无刷新删除数据 function del(obj,id){ //确认框 if(confirm("您确认要删除吗？")){ $.get("/admin/admin/ajax_del",{id:id},function(data){ alert(data); }) }; }
控制台出现的错误：
GET http://localhost:3000/admin/admin/ajax_del?id=2 404 (Not Found)
错误的原因：由于没有写ajax_del的路由。
当在admin.js把ajax_del的路由写完整时：
// 无刷新删除数据 router.get("/ajax_del",function(req,res,next){ // 接受地址栏数据 let id = req.query.id; // 删除数据 mysql.query(`delete from admin where id = ${id}`,function(err,data){ if (err) { return ""; }else{ // 判断是否执行成功 if (data.affectedRows==1) { res.send("1"); }else{ res.send("0"); } } }); })
将前端的js补充完整
//无刷新删除数据 function del(obj,id){ //确认框 if(confirm("您确认要删除吗？")){ $.get("/admin/admin/ajax_del",{id:id},function(data){ // 判断是否删除成功 if (data==1) { $(obj).parents("tr").remove(); }else{ alert("删除失败"); } }) }; }
最终实现的效果：
修改功能
实现描述：点击管理员管理首页的修改跳转一个页面：
实现的代码：
<a class="button border-main" href="/admin/admin/edit?id=<%= item.id %>"><span class="icon-edit"></span> 修改</a>
管理员修改页面路由admin.js：
//管理员修改页面 router.get('/edit',function(req,res,next){ // 接受数据的ID let id = req.query.id; // 查询对应数据 mysql.query("select * from admin where id = "+id,function(err,data){ // 判断 if (err) { return ""; }else{ console.log(data); // 加载修改页面 res.render("admin/admin/edit.html",{data:data[0]}); } }) // res.send("管理员修改"); });
将add.html复制一份，重命名为edit.html,从而作为修改页面，之后对edit.html页面进行修改
设置账户名只能读，不能修改
<div class="field"> <input type="text" class="input" id="mpass" name="username" size="50" placeholder="请输入管理员账户名" value="<%= data.username %>" readonly data-validate="required:请输入管理员账户名,length#>=6:账户名不能小于6位,length#<=12:账户名最多12位" /> </div>
edit.html:
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <meta name="renderer" content="webkit"> 8 <title></title> 9 <link rel="stylesheet" href="/public/admin/css/pintuer.css"> 10 <link rel="stylesheet" href="/public/admin/css/admin.css"> 11 <script src="/public/admin/js/jquery.js"></script> 12 <script src="/public/admin/js/pintuer.js"></script> 13 </head> 14 <body> 15 <div class="panel admin-panel"> 16 <div class="panel-head"><strong><span class="icon-key"></span> 修改管理员</strong></div> 17 <div class="body-content"> 18 <form method="post" class="form-x" action=""> 19 20 <div class="form-group"> 21 <div class="label"> 22 <label for="sitename">账户：</label> 23 </div> 24 <div class="field"> 25 <input type="text" class="input" id="mpass" name="username" size="50" placeholder="请输入管理员账户名" value="<%= data.username %>" readonly data-validate="required:请输入管理员账户名,length#>=6:账户名不能小于6位,length#<=12:账户名最多12位" /> 26 </div> 27 </div> 28 <div class="form-group"> 29 <div class="label"> 30 <label for="sitename">密码：</label> 31 </div> 32 <div class="field"> 33 <input type="password" class="input " name="password" size="50" placeholder="请输入密码" data-validate="length#>=8:密码不能小于8位" /> 34 <input type="hidden" name="id" value="<%= data.id %>"> 35 </div> 36 </div> 37 <div class="form-group"> 38 <div class="label"> 39 <label for="sitename">确认密码：</label> 40 </div> 41 <div class="field"> 42 <input type="password" class="input " name="repassword" size="50" placeholder="请再次输入密码" data-validate="repeat#password:两次输入的密码不一致" /> 43 </div> 44 </div> 45 46 <div class="form-group"> 47 <div class="label"> 48 <label for="sitename">状态：</label> 49 </div> 50 <div class="field"> 51 <label for="" style="line-height:32px;"><input <%= data.status == 0 ? "checked" : ''%> type="radio" name="status" value="0" id=""> 白名单</label> 52 <label for="" style="line-height:32px;"><input <%= data.status == 1 ? "checked" : ''%> type="radio" name="status" value="1" id=""> 黑名单</label> 53 </div> 54 </div> 55 56 <div class="form-group"> 57 <div class="label"> 58 <label></label> 59 </div> 60 <div class="field"> 61 <button class="button bg-main icon-check-square-o" type="submit"> 提交</button> 62 </div> 63 </div> 64 </form> 65 </div> 66 </div> 67 </body></html>
管理员数据修改功能,使用post方式修改：
// 管理员数据修改功能 router.post("/edit",function(req,res,next){ // 接受表单提交的数据 console.log(req.body); let {username,password,repassword,id,status} = req.body; // 判断该用户是否修改密码 let sql = ""; if (password) { // 密码加密 let md5 = crypto.createHash('md5'); password = md5.update(password).digest('hex'); // sql语句 sql = `update admin set status = ${status},password = '${password}' where id = ${id}`; }else{ // sql语句 sql = `update admin set status = ${status} where id = ${id}`; } // 执行sql语句 mysql.query(sql,function(err,data){ if (err) { return ""; }else{ if (data.affectedRows==1) { res.send("<script>alert('修改成功');location.href='/admin/admin'</script>"); }else{ res.send("<script>alert('修改失败');history.go(-1)</script>"); } } }); });
最终实现的修改功能：
