后台：myPro.js
const express=require('express');
var router=express.Router();
var pool=require('../pool.js');
router.post('/ajaxlogin',(req,res)=>{
var $uname=req.body.uname;
if(!$uname){
res.send('用户名称不存在');
return;
}
var $upwd=req.body.upwd;
if(!$upwd){
res.send('用户密码不存在');
return;
}
var sql='select * from xz_user where uname=? and upwd=?';
pool.query(sql,[$uname,$upwd],(err,result)=>{
if(result.length>0){
res.send("登录成功！");
}else{
res.send("用户或密码错误！");
}
});
});
//查询所有用户数据
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");//删除成功！
});
});
//根据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.post('/update',(req,res)=>{
var $uid=req.body.uid;
if(!$uid){
res.send("没获取到用户id");
return;
}
var $uname=req.body.uname;
if(!$uname){
res.send("没获取到用户姓名");
return;
}
var $upwd=req.body.upwd;
if(!$upwd){
res.send("没获取到用户密码");
return;
}
var $email=req.body.email;
if(!$email){
res.send("没获取到用户邮箱");
return;
}
var $phone=req.body.phone;
if(!$phone){
res.send("没获取到用户联系方式");
return;
}
var $user_name=req.body.user_name;
if(!$user_name){
res.send("没获取到用户真实姓名");
return;
}
var $gender=req.body.gender;
if(!$gender){
res.send("没获取到用户性别");
return;
}
//执行修改的sql语句
var sql="update xz_user set uname=?,upwd=?,email=?,phone=?,user_name=?,gender=? where uid=?";
pool.query(sql,[$uname,$upwd,$email,$phone,$user_name,$gender,$uid],(err,result)=>{
if(err) throw error;
res.send("修改成功！");
});
});
//注册用户
router.post('/register',(req,res)=>{
var $uname=req.body.uname;
if(!$uname){
res.send("没获取到用户姓名");
return;
}
var $upwd=req.body.upwd;
if(!$upwd){
res.send("没获取到用户密码");
return;
}
var $email=req.body.email;
if(!$email){
res.send("没获取到用户邮箱");
return;
}
var $phone=req.body.phone;
if(!$phone){
res.send("没获取到用户联系方式");
return;
}
var $user_name=req.body.user_name;
if(!$user_name){
res.send("没获取到用户真实姓名");
return;
}
var $gender=req.body.gender;
if(!$gender){
res.send("没获取到用户性别");
return;
}
//注册sql语句
var sql="insert into xz_user values(NULL,?,?,?,?,NULL,?,?)";
pool.query(sql,[$uname,$upwd,$email,$phone,$user_name,$gender],(err,result)=>{
if(err){
throw error;
}
res.send("注册成功！");
});
})
//用户名是否已存在的验证：获取前端传递的uname,去数据库中查询，看用户是否已存在（get）
router.get('/checkUname',(req,res)=>{
var $uname=req.query.uname;
if(!$uname){
res.send("没获取到用户名称！");
return;
}
var sql="select * from xz_user where uname=?";
pool.query(sql,[$uname],(err,result)=>{
if(result.length>0){
res.send("1");//用户名已存在！
}else{
res.send("0");//用户名可注册！
}
});
});
//导出
module.exports=router;
前台页面
<!doctype html>
<html>
<head>
<title>注册页</title>
<meta charset="utf-8">
<style></style>
</head>
<body>
<p>
用户名称：<input type="text" id="uname" οnblur="checkUname()">
<span id="showUname"></span>
</p>
<p>
用户密码：<input type="password" id="upwd">
</p>
<p>
重复密码：<input type="text" id="cpwd">
</p>
<p>
用户邮箱：<input type="text" id="email">
</p>
<p>
联系方式：<input type="text" id="phone">
</p>
<p>
真实姓名：<input type="text" id="user_name">
</p>
<p>
用户性别： <select id="gender">
<option value="1">男</option>
<option value="0">女</option>
</select>
</p>
<input type="button" value="注册" οnclick="register()">
<script src="common.js"></script>
<script>
//声明全局变量 bool类型
var isRegister=false;
//检测用户名是否已存在
function checkUname(){
//4步异步请求
var xhr=createXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
console.log(res);
//alert(res);
if(res=="1"){
$("showUname").innerHTML="用户名称已存在！";
isRegister=false;
}else{
$("showUname").innerHTML="用户名称可注册！";
isRegister=true;
}
}
}
var uname=$("uname").value;
xhr.open("get","/myPro/checkUname?uname="+uname,true);
xhr.send(null);
}
//注册函数
function register(){
if(isRegister==true)
{
//1.创建异步xhr
var xhr=createXhr();
//2.监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
alert(res);
}
}
//3.打开连接
xhr.open("post","/myPro/register",true);
//4.发送请求
//设置消息头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//获取所有要提交的数据
var uname=$("uname").value;
var upwd=$("upwd").value;
var email=$("email").value;
var phone=$("phone").value;
var user_name=$("user_name").value;
var gender=$("gender").value;
var msg="uname="+uname+"&upwd="+upwd+"&email="+email+"&phone="+phone+"&user_name="+user_name+"&gender="+gender;
xhr.send(msg);
}else{
alert("请检查用户名或密码！");
}
}
</script>
</body>
</html>