ajax练习

2021-05-13 19:30

阅读:356

标签:module   号码   proc   密码   script   The   hone   body   第三方   

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】

技术图片技术图片
DOCTYPE html>
html>
head>
    title>title>
head>
body>

        div>
            用户名称:input type="text" id="uname">
        div>
        div>
            用户密码:input type="password" id="upwd">
        div>
        input type="button" value="登录" onclick="login()">
        div id="d1">div>
            
    script>
        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);

        }
    
    script>

body>
html>
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请求】

前端:

    

服务端:

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请求】

前端:

  

 

服务端:

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}); });

 

 

ajax练习

标签:module   号码   proc   密码   script   The   hone   body   第三方   

原文地址:https://www.cnblogs.com/hd-test/p/11994483.html


评论


亲,登录后才可以留言!