后台:myPro.js文件
const express=require('express');
var router=express.Router();
var router=express.Router();
var pool=require('../pool.js');
//查询所有用户数据
router.get('/pro_List',(req,res)=>{
var sql='select * from xz_user';
pool.query(sql,(err,result)=>{
if(err) throw error;
res.send(result);
})
});
router.get('/pro_List',(req,res)=>{
var sql='select * from xz_user';
pool.query(sql,(err,result)=>{
if(err) throw error;
res.send(result);
})
});
//删除功能
router.get('/ajaxDel',(req,res)=>{
var $uid=req.query.uid;
if(!$uid){
res.send("没获取到用户id");
return;
}
var sql="delete from xz_user where uid=?";
pool.query(sql,[$uid],(err,result)=>{
if(err) throw error;
res.send("1");//删除成功!
});
});
router.get('/ajaxDel',(req,res)=>{
var $uid=req.query.uid;
if(!$uid){
res.send("没获取到用户id");
return;
}
var sql="delete from xz_user where uid=?";
pool.query(sql,[$uid],(err,result)=>{
if(err) throw error;
res.send("1");//删除成功!
});
});
//导出
module.exports=router;
module.exports=router;
前台:02-prolist.html
<!doctype html>
<html>
<head>
<title>用户列表</title>
<meta charset="utf-8">
<style></style>
</head>
<body οnlοad="loadUsers()">
<table border="1" width="800px">
<thead>
<th>登录名称</th>
<th>电子邮箱</th>
<th>联系方式</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>操作</th>
</thead>
<tbody id="showBody"></tbody>
</table>
<html>
<head>
<title>用户列表</title>
<meta charset="utf-8">
<style></style>
</head>
<body οnlοad="loadUsers()">
<table border="1" width="800px">
<thead>
<th>登录名称</th>
<th>电子邮箱</th>
<th>联系方式</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>操作</th>
</thead>
<tbody id="showBody"></tbody>
</table>
<script src="common.js"></script>
<script>
function loadUsers(){
//1.创建对象
var xhr=createXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//获取响应结果
var result=xhr.responseText;
//console.log(result);
//JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
var users=JSON.parse(result);
//console.log(users);
var html="";
for(var i=0;i<users.length;i++){
var user=users[i];
//console.log(user);
html+="<tr>";
html+="<td>"+user.uname+"</td>";
html+="<td>"+user.email+"</td>";
html+="<td>"+user.phone+"</td>";
html+="<td>"+user.user_name+"</td>";
var gender="";
if(user.gender==1){
gender="男";
}else if(user.gender==0){
gender="女";
}else{
gender="保密";
}
html+="<td>"+gender+"</td>";
html+="<td>";
html+="<a href='javascript:deleteUser("+user.uid+")'>删除</a>";
html+="<a href='#'>修改</a>";
html+="</td>";
html+="</tr>";
}
$("showBody").innerHTML=html;
}
}
xhr.open("get","/myPro/pro_List",true);
xhr.send(null);
}
<script>
function loadUsers(){
//1.创建对象
var xhr=createXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//获取响应结果
var result=xhr.responseText;
//console.log(result);
//JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
var users=JSON.parse(result);
//console.log(users);
var html="";
for(var i=0;i<users.length;i++){
var user=users[i];
//console.log(user);
html+="<tr>";
html+="<td>"+user.uname+"</td>";
html+="<td>"+user.email+"</td>";
html+="<td>"+user.phone+"</td>";
html+="<td>"+user.user_name+"</td>";
var gender="";
if(user.gender==1){
gender="男";
}else if(user.gender==0){
gender="女";
}else{
gender="保密";
}
html+="<td>"+gender+"</td>";
html+="<td>";
html+="<a href='javascript:deleteUser("+user.uid+")'>删除</a>";
html+="<a href='#'>修改</a>";
html+="</td>";
html+="</tr>";
}
$("showBody").innerHTML=html;
}
}
xhr.open("get","/myPro/pro_List",true);
xhr.send(null);
}
//根据uid去删除用户
function deleteUser(uid){
//alert(uid);
//1.创建xhr对象
var xhr=createXhr();
//2.监听事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
// console.log(res);
if(res=="1"){
alert("删除成功!");
loadUsers();//删除以后重新加载列表
}else{
alert("删除失败!");
}
}
}
//3.打开连接
xhr.open("get","/myPro/ajaxDel?uid="+uid,true);
//4.发送请求
xhr.send(null);
}
</script>
function deleteUser(uid){
//alert(uid);
//1.创建xhr对象
var xhr=createXhr();
//2.监听事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
// console.log(res);
if(res=="1"){
alert("删除成功!");
loadUsers();//删除以后重新加载列表
}else{
alert("删除失败!");
}
}
}
//3.打开连接
xhr.open("get","/myPro/ajaxDel?uid="+uid,true);
//4.发送请求
xhr.send(null);
}
</script>
</body>
</html>
</html>