node+ajax实战案例（3)
2019-12-19 本文已影响0人
螺钉课堂
3.用户注册实现
#3.1.注册用户功能的实现逻辑
- 1 用户在表单上输入注册信息
- 2 点击注册后，收集用户在表单上输入的注册信息并且发送给后台
- 3 后台接收用户发送过来的注册信息
- 4 后台需要处理数据并且去连接数据库
- 5 后台把接收到的用户信息写入到数据库中
image
#3.2.收集用户输入的信息并且发送这些信息到后台
在register.html文件中加入js代码
<script>
var oReg = document.getElementById('reg');
var oUser = document.getElementById('username');
var oPass = document.getElementById('password');
var oRePass = document.getElementById('repassword');
oReg.onclick = function () {
if(oPass.value !== oRePass.value){
alert('两次密码不一致，请重新输入');
return;
}
ajax({
method: 'post',
data: 'username='+oUser.value+'&password='+oPass.value+'&repassword='+oRePass.value,
url: '/register',
success: function (data) {
//后台返回数据 根据后台返回的数
if(data.status === 0){
window.location.href = '/login.html';
}else {
alert(data.message);
}
}
})
}
</script>
#3.3.后台接收用户信息并且做处理
在index.js文件中加入js代码
if(url_obj.pathname === '/register' && req.method === 'POST'){
var user_info = '';
req.on('data',function (chunk) {
user_info+=chunk;
});
req.on('end', function (err) {
console.log(user_info);
res.setHeader('content-type', 'text/html;charset=utf-8');
var user_obj = queryString.parse(user_info);
//判断两次输入密码是否一致
if(user_obj.password !== user_obj.repassword ){
res.write('{"status":1, "message": "两次输入密码不一致"}', 'utf-8');
res.end();
return;
}
//判断用户名或者密码是否为空
if(user_obj.password == '' || user_obj.username == ''){
res.write('{"status":1, "message": "用户名和密码不能为空"}', 'utf-8');
res.end();
return;
}
});
return;
}
#3.4.连接数据库并且实现数据保存
- 在连接数据库之前，需要先创建数据库，并且设计好对应的表，这里我们去数据库中创建一个ajaxdemo的数据库，并且在里面创建一张数据表，数据表的结构为：
id int primary key auto_crement
username varchar not null
password varchar not null
- 在indexjs文件头部引入mysql模块，并且连接数据库
mysql模块是一个第三方的模块，不是nodejs内置的模块，所以需要通过npm来安装
npm install mysql --save-dev
接下来就可以使用mysql模块了
//引入数据库模块 创建连接对象
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'root',
database : 'ajaxdemo'
});
connection.connect();
- 拼接mysql命令并且发送命令插入数据
if(!err){
var sql = 'INSERT INTO admin(username, password) VALUE("'+user_obj.username+'", "'+user_obj.password+'")';
connection.query(sql, function (error, result) {
if(!error && result.length !== 0) {
res.write('{"status":0, "message": "注册成功"}')
res.end();
}
});
}
- 完整的index.js文件注册逻辑代码
var http = require("http");
var url = require("url");
var fs = require("fs");
var querystring = require("querystring");
//引入数据库
var mysql = require('mysql');
//创建一个连接的到一个对象
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'root',
database: 'ajaxdemo'
});
//连接数据库
connection.connect(function(err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log('connected as id ' + connection.threadId);
});
var app = http.createServer(function (req, res) {
// 需求： 当用户访问 "/" 返回index.html 用户访问 /login-bak.html 返回login.html文件
var url_obj = url.parse(req.url);
//每次调用render 是根据请求的 url_obj.pathname 有一个pathname出现就会执行一次render
// pathname -- 用户的请求 ----> render
//1 "/" url_obj.pathname "/" render("./template"+ "/", res)
//2 "/css/index-bak.css" render("./template"+"/css/index-bak.css", res);
//3 "/login-bak.html" render("./template"+"/login-bak.html", res);
if(url_obj.pathname === "/"){
render("./template/index.html", res);
//直接返回 不会去执行后面的代码
return;
}
//处理注册功能逻辑
if(url_obj.pathname === "/register" && req.method === "POST"){
//1 接收前台发送过来的数据
var user_info = '';
req.on("data", function (chunk) {
user_info += chunk;
});
req.on("end", function (err) {
if(!err){
console.log(user_info);
var user_obj = querystring.parse(user_info);
res.setHeader('content-type', 'text/html;charset=utf-8');
//判断是否为空
if(user_obj.username === '' || user_obj.password === ''){
res.write('{"status":1, "message":"用户名和密码不能为空"}', 'utf-8');
res.end();
return;
}
//判断密码是否一致
if(user_obj.password !== user_obj.repassword){
res.write('{"status":1, "message":"两次密码输入不一样"}', 'utf-8');
res.end();
return;
}
// 把信息写入到数据库
console.log(user_obj);
var sql = 'INSERT INTO admin(username, password) VALUE("'+user_obj.username+'", "'+user_obj.password+'")';
connection.query(sql,function (error, result) {
//如果没有错误 并且result长度不为0 返回注册成功
// console.log("error:", error);
// console.log("result:", result);
// 如果没有出错 error 是null--false， result 是一个数组
// 如果出错 error有东西对象 ！就变成false result --undifined
if(!error && result && result.length !== 0){
res.write('{"status":0, "message":"注册成功"}', 'utf-8');
res.end();
return;
}
})
}
})
// res.write('{"name":"hello world!"}');
// res.end();
return;
}
render("./template"+url_obj.pathname, res);
});
app.listen(5000, function (err) {
if(!err){
console.log("listening on 5000...");
}
})
function render(path, res) {
//binary 二进制
fs.readFile(path, 'binary', function (err, data) {
if(!err){
res.write(data, 'binary');
res.end();
}
})
}
#3.5.前端根据后台返回的数据进行自己的业务逻辑处理
<script>
var oReg = document.getElementById('reg');
var oUser = document.getElementById('username');
var oPass = document.getElementById('password');
var oRePass = document.getElementById('repassword');
oReg.onclick = function () {
if(oPass.value !== oRePass.value){
alert('两次密码不一致，请重新输入');
return;
}
ajax({
method: 'post',
data: 'username='+oUser.value+'&password='+oPass.value+'&repassword='+oRePass.value,
url: '/register',
success: function (data) {
//data为后台返回数据 根据后台返回的数据做具体的业务逻辑
if(data.status === 0){
//如果没有错误就跳转到登录页让用户登录
window.location.href = '/login.html';
}else {
//如果注册失败就弹出对应的消息
alert(data.message);
}
}
})
}
</script>
