pro/deluser.html(给userlist.html整合用)
根据id删除用户delete /pro/v1/deluser/:uid
<body>
<input type="text" id="uid"><br>
<button οnclick="deluser()">删除</button>
<script>
function deluser(){
var $uid=uid.value;
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
if(result==1){
alert("删除成功");
}else{
alert("删除失败");
}
}
}
//2.创建请求
xhr.open("delete","/pro/v1/deluser/"+$uid,true);
//3.发送请求
xhr.send();
}
</script>
</body>
pro/login.html
登录get url="/pro/v1/login/:uname&:upwd"
router.get("/v1/login/:uname&:upwd",funct(){});
<head>
<script>
function login(){
var $uname=uname.value;
var $upwd=upwd.value;
if(!$uname){
uname_msg.innerHTML="用户名不能为空";
return;
}
if(!$upwd){
upwd_msg.innerHTML="密码不能为空";
return;
}
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.创建监听,接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
if(result==1){
alert("登录成功");
location.href="userlist.html";
}else{
alert("登录失败");
}
}
}
//2.创建请求
xhr.open("get","/pro/v1/login/"+$uname+"&"+$upwd,true);
//3.发送请求
xhr.send();
}
</script>
</head>
<body>
<p><input type="text" id="uname" placeholder="请输入用户名"><span id="uname_msg"></span></p>
<p><input type="text" id="upwd" placeholder="请输入密码"><span id="upwd_msg"></span></p>
<button οnclick="login()">登录</button>
</body>
pro/query.html
根据id修改用户信息put /pro/v1/update
根据id查询用户get /pro/v1/searchuser/:uid
<head>
<title></title>
<script>
function query(){
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var abc=xhr.responseText;//后台传过来的数组
var obj=JSON.parse(abc);
//console.log(obj) JSON.parse()解析的数组
uname.value=obj.uname;
email.value=obj.email;
phone.value=obj.phone;
user_name.value=obj.user_name;
if(obj.gender==1){
man.checked=true;
}else{
woman.checked=true;
}
}
}
//2.创建请求
xhr.open("get","/pro/v1/search/"+uid.value,true);
//3.发送请求
xhr.send();
}
function update(){
//接收gender
var sex="0";
if(man.checked){//man在单选框被选中了
sex="1";
}else{
sex="0";
}
//通过地址栏获取查询字符串中的uid
var urlParams=new URLSearchParams(location.search);
var $uid=urlParams.get("uid");
console.log($uid);
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
if(result==1){
alert("修改成功");
location.href="userlist.html";//跳转修改成功的页面
}else{
alert("修改失败");
}
}
}
//2.创建请求
xhr.open("put","/pro/v1/update",true);
//3.发送请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头信息,让请求可以传递所有字符
var formdata=`uname=${uname.value}&email=${email.value}&phone=${phone.value}&user_name=${user_name.value}&gender=${sex}&uid=${$uid}`;//创建请求主体
xhr.send(formdata);//发送请求,带着请求主体发送
//注意:setRequestHeader这个方法,必须在open和send之间
}
</script>
</head>
<body>
<div>
<input type="text" id="uname">
</div>
<div>
<input type="text" id="email">
</div>
<div>
<input type="text" id="phone">
</div>
<div>
<input type="text" id="user_name">
</div>
<div>
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="woman">
<label for="woman">女</label>
</div>
<button οnclick="query()">查询</button>
<button οnclick="update()">修改</button>
</body>
修改查询第二种写法
<body οnlοad="searchUser()">
<!-- <input type="text" id="uid"><br> -->
<input type="text" id="uname"><br>
<input type="text" id="email"><br>
<input type="text" id="phone"><br>
<input type="text" id="user_name"><br>
<input type="radio" name="gender" id="man" value="1">男
<input type="radio" name="gender" id="woman" value="0">女<br>
<!-- <button οnclick="searchUser()">查询</button> -->
<button οnclick="updateUser()">修改</button>
<script>
function updateUser(){
//第二种使用bom提供的,直接获取查询字符参数的方法
//1.获取查询字符串对象
var urlParams=new URLSearchParams(location.search);
//2.通过查询字符串对象,获取uid
var $uid=urlParams.get("uid");
var $uname=uname.value;
var $phone=phone.value;
var $email=email.value;
var $user_name=user_name.value;
var $gender="0";
if(man.checked){
$gender="1";
}else{
$gender="0";
}
if(!$uname){
alert("用户名不能为空");return;
}
if(!$email){
alert("用户名不能为空");return;
}
if(!$phone){
alert("用户名不能为空");return;
}
if(!$user_name){
alert("用户名不能为空");return;
}
//1.创建异步对象xhr
var xhr=new XMLHttpRequest();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
if(result==1){
alert("修改成功");
location.href="userlist.html";
}else{
alert("修改失败");
}
}
}
//2.创建请求
xhr.open("put","/pro/v1/update",true);
//3.发送请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var formdata=`uid=${$uid}&uname=${$uname}&email=${$email}&phone=${$phone}&user_name=${$user_name}&gender=${$gender}`;
xhr.send(formdata);
}
function searchUser(){
//获取uid,在地址栏中的查询字符串里
//第一种方法.location.href获取地址栏字符串,使用stringAPI截取uid
//第二种使用bom提供的,直接获取查询字符参数的方法
//1.获取查询字符串对象
var urlParams=new URLSearchParams(location.search);
//2.通过查询字符串对象,获取uid
var $uid=urlParams.get("uid");
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.获取响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
var obj=JSON.parse(result);
uname.value=obj.uname;
email.value=obj.email;
phone.value=obj.phone;
user_name.value=obj.user_name;
if(obj.gender==1){
man.checked=true;
}else{
woman.checked=true;
}
}
}
//2.创建请求
xhr.open("get","/pro/v1/searchuser/"+$uid,true);
//3.发送请求
xhr.send();
}
</script>
</body>
pro/reguser.html
<head>
<script>
var unameCheck=false;
function reg(){
if(unameCheck){
}else{
alert("信息格式错误");
return;
}
var $uname=uname.value;
var $upwd=upwd.value;
var $email=email.value;
var $phone=phone.value;
var $user_name=uname.value;
var $gender=-1;
if(man.checked){
$gender=1;
}else if(woman.checked){
$gender=0;
}else{
$gender=-1;
}
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.创建监听,接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
alert(result);
}
}
//2.创建请求,打开连接
xhr.open("post","/pro/v1/reg",true);
//3.发送请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var formdata=`uname=${$uname}&upwd=${$upwd}&email=${$email}&phone=${$phone}&user_name=${$user_name}&gender=${$gender}`;
xhr.send(formdata);
}
function show_uname(){
uname_msg.innerHTML="用户名6~12位";
}
function checkUname(){
//1.非空,2.格式正确,3.格式不正确
//2.格式正确--->用户名重复验证
if(!uname.value){
uname_msg.innerHTML="用户名不能为空";
unameCheck=false;
}else if(uname.value.length>=6 && uname.value.length<=12){
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
if(result==1){
uname_msg.innerHTML="用户名不可用";
unameCheck=false;
}else{
uname_msg.innerHTML="√";
unameCheck=true;
}
}
}
//2.创建请求
xhr.open("get","/pro/v1/queryUser/"+uname.value,true);
//3.发送请求
xhr.send();
}else{
uname_msg.innerHTML="用户名格式错误";
unameCheck=false;
}
}
</script>
</head>
<body>
<p>
<input οnblur="checkUname()" οnfοcus="show_uname()" type="text" id="uname">
<span id="uname_msg"></span>
</p>
<p>
<input type="text" id="upwd">
</p>
<p>
<input type="text" id="email">
</p>
<p>
<input type="text" id="phone">
</p>
<p>
<input type="text" id="user_name">
</p>
<p>
<input type="radio" id="man" name="gender">男
<input type="radio" id="woman" name="gender">女
<input checked type="radio" id="unk" name="gender">保密
</p>
<button οnclick="reg()">注册</button>
</body>
pro/userlist.html
查询所有用户get /pro/v1/getall
<head>
<script>
function getList(){
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.创建监听,接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
var arr=JSON.parse(result);
//html结构字符串--1
var strHTML=`
<table border="1" bordercolor="red">
<tr>
<th>用户名称</th>
<th>用户邮箱</th>
<th>联系方式</th>
<th>真实姓名</th>
<th>用户性别</th>
<th>操作</th>
</tr>
`;
//html结构字符串--2
for(var i=0;i<arr.length;i++){
var sex="男";
if(arr[i].gender==1){
sex="男";
}else{
sex="女";
}
strHTML+=`
<tr>
<td>${arr[i].uname}</td>
<td>${arr[i].email}</td>
<td>${arr[i].phone}</td>
<td>${arr[i].user_name}</td>
<td>${sex}</td>
<td>
<a href="query.html?uid=${arr[i].uid}">修改</a>//页面跳转uid代过去,query.html就不需要uid框,不用手填uid去修改
<a href="javascript:deluser(${arr[i].uid})">删除</a>
</td>
</tr>
`;
}
//html结构字符串--3
strHTML+="</table>";
d1.innerHTML=strHTML;
}
}
//2.创建请求
xhr.open("get","/pro/v1/userlist",true);
//3.发送请求
xhr.send();
}
function deluser($uid){
//1.创建xhr异步对象
var xhr=new XMLHttpRequest();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
if(result==1){
alert("删除成功");
getList();//重新调用,刷新删除后的列表(同一个页面两次调用直接写函数)
//调兄弟关系直接写名就行
}else{
alert("删除失败");
}
}
}
//2.创建请求
xhr.open("delete","/pro/v1/deluser/"+$uid,true);
//3.发送请求
xhr.send();
}
</script>
</head>
<body οnlοad="getList()">//相当于刷新页面
<div id="d1"></div>
</body>
routes/pro.js
在routes文件夹中创建pro.js路由
//引入express模块
const express=require('express');
//引入连接池模块
const pool=require('../pool.js');
//创建路由器对象
let router=express.Router();
//添加路由
//1.登录
//注:get方法可以通过地址栏获取数据,可用于检测数据是否响应成功
//注:restful的get传参:(后台定义接口,需要把参数放入接口中,没有?,添加了:)
//eg: "/login_restful/:uname&:upwd"
router.get("/v1/login/:uname&:upwd",(req,res)=>{
var $uname=req.params.uname;
var $upwd=req.params.upwd;
var sql="select * from xz_user where uname=? and upwd=?";
//防止sql注入
pool.query(sql,[$uname,$upwd],(err,result)=>{//执行sql语句
//当没有查询到数据抛出err,如果获取到数据给前端响应“1”否则响应“0”
if(err) throw err;
if(result.length>0){
res.send("1");
}else{
res.send("0");
}
});
});
//2.查询所有用户(用户列表)
router.get("/v1/userlist",function(req,res){
var sql="select * from xz_user";
pool.query(sql,(err,result)=>{
if(err) throw err;
res.send(result);
});
});
//3.根据id删除用户
router.delete("/v1/deluser/:uid",(req,res)=>{
var $uid=req.params.uid;
var sql="delete from xz_user where uid=?";
pool.query(sql,[$uid],(err,result)=>{
if(err) throw err;
res.send("1");
});
});
//4.根据id查询用户信息
router.get("/v1/search/:uid",(req,res)=>{
var $uid=req.params.uid;
var sql="select * from xz_user where uid=?";
pool.query(sql,[$uid],(err,result)=>{
if(err) throw err;
//console.log(result);//数组
//console.log(result[0])
//注:首先result返回的值是一个数组对象,当查询成功后发送至前端后将此数组对象
//自动解析成JSON字符串
//这样前端就获取不到对应的数据的值,result[0]就是将其从数组中取出得到一个对象
//发送至前端,前端通过
//JOSN.parse(result)方法就能将JSON字符串转成对象最后以object.params的形式获取对应属性的值
res.send(result[0]);//数组的第一个元素当作响应返回去
//两种思路
//res.send(数组) res.send(result[0])传过去
//前台var arr=JSON.parse(result)
// arr[0].uname//数组下标
//res.send(对象) res.send(result)
//前台var obj=JSON.parse(result)
// obj.uname//不需要数组下标的操作
});
});
//5.根据uid修改用户信息
router.put("/v1/update",(req,res)=>{
var $uid=req.body.uid;
var $uname=req.body.uname;
var $email=req.body.email;
var $phone=req.body.phone;
var $user_name=req.body.user_name;
var $gender=req.body.gender;
var sql="update xz_user set uname=?,email=?,phone=?,user_name=?,gender=? where uid=?";
pool.query(sql,[$uname,$email,$phone,$user_name,$gender,$uid],(err,result)=>{
if(err) throw err;
res.send("1");
});
});
//注册
router.post("/v1/reg",(req,res)=>{
var obj=req.body;
var sql="insert into xz_user set ?";
pool.query(sql,[obj],(err,result)=>{
if(err) throw err;
if(result.affectedRows>0){
res.send("1");
}else{
res.send("0");
}
});
});
//导出路由器
module.exports=router;
app.js
在app.js中,路由挂载,静态资源文件夹托管
const express=require('express');
//引入路由器
const userRouter=require('./routes/user.js');
const ajaxRouter=require('./routes/ajaxdemo.js');
const proRouter=require('./routes/pro.js');
//引入body-parser中间件模块
const bodyParser=require('body-parser');
let app=express();
app.listen(8080);
//托管静态资源到public目录
app.use( express.static('./public') );
app.use( express.static('./ajax') );
app.use( express.static('./pro') );
//应用body-parser中间件
app.use( bodyParser.urlencoded({
extended:false
}) );
//应用路由器
// /user/reg
app.use( '/user',userRouter );
app.use( '/ajax',ajaxRouter );
app.use( '/pro',proRouter );
pool.js
const mysql=require('mysql');
//创建连接池对象
let pool=mysql.createPool({
host:'127.0.0.1',
port:'3306',
user:'root',
password:'',
database:'xz',
connectionLimit:15
});
//导出连接池对象
module.exports=pool;
