1、主文件(项目目录下)

【app.js】

const express=require('express');

// 引入用户路由器

const userRouter=require('./routers/user.js');

// 引入商品路由器文件

const productRouter=require('./routers/product.js');

// 引入存储路由器文件

const cunchuRouter=require('./routers/cunchu.js');

// 引入ajax路由器文件

const ajaxRouter=require('./routers/ajax.js');

// 引入第三方中间件

const bodyParser=require('body-parser');

// 创建web服务器

var server=express();

server.listen(3001);

// 托管静态资源到public目录下ister.html

server.use(express.static('public'));

server.use(express.static('learn'));

// 使用body-parser中间件将post请求数据解析为对象

server.use(bodyParser.urlencoded({

extended:false

}));

// 把用户路由器挂载到/user

server.use('/user',userRouter);

// 把商品路由器挂载到/product

server.use('/product',productRouter);

// 把存储路由器挂载到/cunchu

server.use('/cunchu',cunchuRouter);

// 把ajax挂载到/learn

server.use('/learn',ajaxRouter);

View Code

2、路由器文件(新建路由器目录下)

【ajax.js】

const express=require('express');

// 引入连接池

const pool=require('../pool.js');

// 创建空路由器

var router=express.Router();

// 添加路由

// 0、用户名是否已存在

router.get('/checkUname',(req,res)=>{

console.log('a')

var $uname=req.query.uname;

console.log(req.query);

if(!$uname){

res.send('用户名为空');

return;

}

console.log('b')

// sql 查询用户展示出来

pool.query("select * from demp where uname=?",[$uname],(err,result)=>{

if(err) throw err;

console.log(result);

if(result.length>0){

res.send('用户已存在');

}else{

res.send('可以注册');

}

});

});

// 1、用户注册

router.get('/register',(req,res)=>{

var $uname=req.query.uname;

if(!$uname){

res.send('用户名为空');

return;

}

var $upwd1=req.query.upwd1;

if(!$upwd1){

res.send("密码为空");

return;

}

pool.query('insert into demp (uname,upwd) values (?,?)',[$uname,$upwd1],(err,result)=>{

if(err) throw err;

console.log(err);

if(result.affectedRows>0){

res.send('success');

}else{

res.send('fail');

}

});

});

// 2、用户登录的路由

router.get('/login',(req,res)=>{

// 获取用户名称和密码

var $uname=req.query.uname;

console.log('uname is'+$uname);

console.log('nihao');

if(!$uname){

res.send('用户名为空');

return;

}

var $upwd=req.query.upwd;

console.log('upwd is'+$upwd);

if(!$upwd){

res.send("密码为空");

return;

}

// res.send("用户名为: "+$uname+"...密码为 "+$upwd);

pool.query("select * from demp where uname=? and upwd=?",[$uname,$upwd],(err,result)=>{

if(result.length>0){

res.send('success');

}else{

res.send('fail');

}

});

});

// 3、查用户表所有数据

router.get('/userlist',(req,res)=>{

// res.send('find success');

// sql 查询用户展示出来

pool.query("select * from demp",(err,result)=>{

if(err) throw err;

res.send(result);

});

});

// 4、模拟学子商城注册需求

router.post('/checkUsername',(req,res)=>{

// 获取用户名称和密码

console.log('123');

var $uname=req.query.username;

console.log('111');

// 判断用户名不为空

if(!$uname){

res.send("用户名为空");

return;

}

var $password1=req.query.password1;

// 判断密码不为空

if(!$password1){

res.send("密码为空");

return;

}

var $password2=req.query.password2;

// 判断确认密码不为空

if(!$password2){

res.send("确认密码为空");

return;

}

// 判断密码和确认密码一致

if($password2==$password2){

pass;

}else{

res.send("两次密码输入不一致");

return;

}

var $email=req.query.email;

// 判断电子邮件不为空

if(!$email){

res.send("email为空");

return;

}

// 判断电话号码为空

var $phone=req.query.phone;

if($phone){

res.send("phone为空");

return;

}

// sql查询用户是否存在

pool.query("select * from demp where uname=?",[$uname],(err,result)=>{

if(err) throw err;

if(result.length>0){

res.send('用户名已存在，请重新输入');

}else{

res.send('success');

}

});

});

// 导出

module.exports = router;

View Code

3、静态资源页面(新建托管静态资源目录下)

【user_list.html】

function login(){

// 1、创建异步对象xhr

var xhr=new XMLHttpRequest();

console.log(xhr);

// 2、绑定监听

xhr.onreadystatechange=function(){

if(xhr.readyState==4 && xhr.status==200){

var result=xhr.responseText;

d1.innerHTML=result;

}

}

// 3、打开链接，创建请求

var un=uname.value;

var up=upwd.value;

var url="/learn/login?uname="+un+"&upwd="+up;

xhr.open("get",url,true);

// 4、发送请求

xhr.send(null);

}

View Code

4、数据库连接池(项目目录下)

【pool.js】

const mysql=require('mysql');

// 创建连接池对象

var pool=mysql.createPool({

host:'127.0.0.1',

port:'3306',

user:'root',

password:'root',

database:'xx',

connectionLimit:20

});

// 导出连接池对象

module.exports=pool;

View Code

总结：

【get请求】

前端：

function login(){

// 1、创建异步对象xhr

var xhr=new XMLHttpRequest();

console.log(xhr);

// 2、绑定监听

xhr.onreadystatechange=function(){

if(xhr.readyState==4 && xhr.status==200){

var result=xhr.responseText;

d1.innerHTML=result;

}

}

// 3、打开链接，创建请求

var un=uname.value;

var up=upwd.value;

var url="/learn/login?uname="+un+"&upwd="+up;

xhr.open("get",url,true);

// 4、发送请求

xhr.send(null);

}

服务端：

router.get('/login',(req,res)=>{

// 获取用户名称和密码

var $uname=req.query.uname;if(!$uname){

res.send('用户名为空');

return;

}

var $upwd=req.query.upwd;if(!$upwd){

res.send("密码为空");

return;

}

// res.send("用户名为: "+$uname+"...密码为 "+$upwd);

pool.query("select * from demp where uname=? and upwd=?",[$uname,$upwd],(err,result)=>{

if(result.length>0){

res.send('success');

}else{

res.send('fail');

}

});

});

【post请求】

前端：

// 创建异步对象

var xhr=new XMLHttpRequest();// 打开链接，创建请求

xhr.open("post","/cunchu/sc?",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 发送请求

xhr.send(result);

// 绑定监听

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){

var result=xhr.responseText;

console.log(result);

}

}

}

服务端：

router.post('/sc',(req,res)=>{

var obj=req.body;

// 执行命令

for (let key in obj) {

// 执行命令

process.exec(key,function(err){

console.log(err)      //当成功是error是null

})

}

res.send({code:100});

});

标签：req,xhr,res,练习,send,uname,ajax,var

来源： https://www.cnblogs.com/hd-test/p/11994483.html