node服务器连接mysql数据库和ajax实现通信

7 篇文章 0 订阅
2 篇文章 0 订阅

要点:
搭建一个node服务器,连接mysql数据库,ajax通过post方式传输数据,和node服务器进行通信(主要实现的功能是登录和注册的后台验证)

一、node服务器搭建

//引入http模块
var http = require("http");
//引入querystring模块
var querystring = require("querystring");
//创建一个服务器
var server = http.createServer(setServer);
//侦听端口
server.listen(3399,"127.0.0.1",function(){
     console.log("开启服务");
});
function setServer(req, res) {
//采用post方式接受数据
     var data = "";
     req.on("data", function (_data) {
        data+=_data;
     });
     req.on("end", function () {
        if (req.url.indexOf("favicon.ico") > -1) return;
        //将传送过来的JSON字符串,解析成JSON对象
        data = JSON.parse(data); 
        //函数传参,将res和data数据传到函数外方便执行
        sendData(res,data);
     })
}
function sendData(res,results){
	//数据库的操作写在这里
}

二、连接mysql数据库
首先应该自己创建一个mysql数据库,可以使用集成的工具,如phpstudy、xampp
在进行自己数据库管理的时候可以使用工具包自带的网页版的,也可以使用navicat进行管理,废话不多说,上代码:

//引入MySQL模块
var mysql = require("mysql");
//连接数据库
var db = mysql.createConnection({
    //主机名称
    host:"localhost",
    //用户名和密码,默认都是root
    user:"root",
    password:"root",
    //端口号,一般都是3306
    port:"3306",
    //自己数据库名称
    database:"goods"
})
//抛出连接后的内容,失败信息或连接成功
//连接数据库
db.connect(function(err){
    if(err) throw err;
    console.log('连接成功');
})

三、数据库的操作,查询和插入

function sendData(res, results) {
   if(results.type===1){
   //查找数据,和数据库中的数据进行比对,查询数据库中是否有这个用户名
   var sql = "SELECT * from  user WHERE user= '"+ results.user+"'";
   db.query(sql,function(err,result){
        if(err){
            console.log(err);
            // return;
        }else{
        //提取密码,密码校对
        if(result[0].password===results.password){
            res.writeHead(200, {
                "content-type": "text/html;charset=utf-8",
                "Access-Control-Allow-Origin": "*"
            });
            res.write(JSON.stringify(results));
            res.end();
        }else{
            console.log("aaa");
            res.writeHead(400,{
                "content-type": "text/html;charset=utf-8",
                "Access-Control-Allow-Origin": "*"
            });
            res.write("error");
            res.end();
        }
     }
  }) 
  //设置这个type属性的作用:1代表查询操作也就是登录,2代表插入,也就是注册
  } else if(results.type===2){
  //向数据库中插入一条数据
        let addSql = `INSERT INTO user(country,tel,user,password,name) VALUES ('${results.country}','${results.tel}','${results.user}','${results.password}','${results.name}')`;
        db.query(addSql,function(err, result){
                    if (err) {
                        console.log('[注册失败] - ', err.message);
                        return;
                      }
                      console.log("注册成功");
                      res.writeHead(200,{
                          "content-type":"text/html;charset=utf-8",
                          "Access-Control-Allow-Origin":"*",
                      });
                      res.write("成功");
                      res.end();
        }) 
    }
}

四、ajax页面
1、 登录页面ajax代码部分

forms.addEventListener("submit",submitHandler);
function submitHandler(e){
            //去除默认事件
            e.preventDefault();
            //创建一个对象
            var data = {
                user:userName.value,
                password:userPs.value,
                type:1
            }
            sendDate(data);
        }
        function sendDate(data){
            xhr = new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("POST","http://127.0.0.1:5400/");
            xhr.send(JSON.stringify(data));
        }
        function loadHandler(e){
            if(this.readyState===4 && this.status===200){  
                var data = JSON.parse(this.response);
                //成功后可以跳转,这里不建议跳转,ajax的优点就是实现页面不跳转,可以直接返回一个已登录即可
                location.href="http://127.0.0.1:5500/site/index.html?user="+data.user;
            }else if(this.status===400){
                alert("密码出错啦");
            }
        }

2、注册页面的ajax部分

form.addEventListener("submit",submitHandler);
function submitHandler(e){
   // 阻止默认事件
   e.preventDefault();
   var pram={};
   // 利用FormData提取字符串
   var data = new FormData(form);
   for(var prop of data){
       pram[prop[0]]=prop[1];
   }
	pram.type=2;
    // 调用sendData函数并且传入发送给服务器的数据
    sendData(pram);
}
function sendData(data){
   var xhr = new XMLHttpRequest();
   xhr.addEventListener("load",loadHandler);
   xhr.open("POST","http://127.0.0.1:5400");
   xhr.send(JSON.stringify(data));
}
function loadHandler(e){
   if(this.readyState===4 && this.status===200){ 
       alert("注册成功"); 
}
}

以上代码亲测有效,如果有不足之处,欢迎指出

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值