后台:myPro文件
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");//删除成功!
});
});
//根据uid查询当前用户的信息并响应给前端
router.get('/ajaxquery', (req,res)=>{
var $uid = req.query.uid;
//检测用户编号
if(!$uid){
res.send('没获取到用户id');
return;
}
var sql = `SELECT * FROM xz_user WHERE uid=?`;
pool.query(sql,[$uid],(err,result)=>{
res.send(result[0]);
});
});
router.get('/ajaxquery', (req,res)=>{
var $uid = req.query.uid;
//检测用户编号
if(!$uid){
res.send('没获取到用户id');
return;
}
var sql = `SELECT * FROM xz_user WHERE uid=?`;
pool.query(sql,[$uid],(err,result)=>{
res.send(result[0]);
});
});
//导出
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='03-sel-update.html?uid="+user.uid+"'>修改</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='03-sel-update.html?uid="+user.uid+"'>修改</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>
前台:03-sel-update.html文件
<!doctype html>
<html>
<head>
<title>修改</title>
<meta charset="utf-8">
<style></style>
</head>
<body οnlοad="getInfo()">
<h1>这是修改页面</h1>
<form >
<p>
用户名称: <input type="text" id="uname" name="uname">
</p>
<p>
用户密码: <input type="password" id="upwd" name="upwd">
</p>
<p>
用户邮箱: <input type="email" id="email" name="email">
</p>
<p>
联系方式: <input type="text" id="phone" name="phone">
</p>
<p>
真实姓名: <input type="text" id="user_name" name="user_name">
</p>
<p>
用户性别:<input type="radio" name="gender" id="man" value="1">男
<input type="radio" name="gender" id="woman" value="0">女
</p>
<p><input type="submit" value="提交"></p>
</form>
<html>
<head>
<title>修改</title>
<meta charset="utf-8">
<style></style>
</head>
<body οnlοad="getInfo()">
<h1>这是修改页面</h1>
<form >
<p>
用户名称: <input type="text" id="uname" name="uname">
</p>
<p>
用户密码: <input type="password" id="upwd" name="upwd">
</p>
<p>
用户邮箱: <input type="email" id="email" name="email">
</p>
<p>
联系方式: <input type="text" id="phone" name="phone">
</p>
<p>
真实姓名: <input type="text" id="user_name" name="user_name">
</p>
<p>
用户性别:<input type="radio" name="gender" id="man" value="1">男
<input type="radio" name="gender" id="woman" value="0">女
</p>
<p><input type="submit" value="提交"></p>
</form>
<script src="common.js"></script>
<script>
function getInfo(){
//获取url的参数
var urlPara=new URLSearchParams(location.search);
//获取url中uid
var uid=urlPara.get('uid');
//alert(uid);
//发送异步请求
var xhr=createXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
//console.log(typeof(res));
var user=JSON.parse(res);
$("uname").value=user.uname;
$("upwd").value=user.upwd;
$("email").value=user.email;
$("phone").value=user.phone;
$("user_name").value=user.user_name;
//性别
if(user.gender=="1"){
$("man").checked=true;
}else if(user.gender=="0"){
$("woman").checked=true;
}
}
}
xhr.open("get","/myPro/ajaxquery?uid="+uid,true);
xhr.send(null);
}
</script>
</body>
</html>