要点:
搭建一个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("注册成功");
}
}
以上代码亲测有效,如果有不足之处,欢迎指出