node.js連線資料庫登入註冊，修改使用者（頁面的ajax請求）
阿新 • • 發佈：2018-11-21
首先給大家看一下目錄結構，結構如下：
index.html 首頁（顯示所有的使用者資訊）
login.html 登入頁
register.html 註冊頁
db.js 配置連結資料庫引數
dbhelper.js 資料庫連線池（向外暴露方法）
test.js 邏輯js（使用方法：node test.js 即可）
下面的程式碼：
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--設定語言為中文 --> <meta http-equiv="Content-Language" content="zh-cn" /> <!-- 禁止百度轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 是否開啟cleartype顯示效果 --> <meta http-equiv="cleartype" content="on"> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> <!-- 優先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用相容模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 設定手持裝置支援 --> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <title></title> <style> table, table tr th, table tr td { border: 1px solid #0094ff; } </style> </head> <body> <table> <tr> <th>編號</th> <th>使用者名稱</th> <th>密碼</th> <th>操作</th> </tr> <tbody id="tbody"> </tbody> </table> <a href="register.html">新增使用者</a> <div id="msg"></div> </body> <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script> <script> main(); function main() { let body_id = { "id": getQueryValue("id") } $.ajax({ type: "POST", url: "http://127.0.0.1:3000/select", contentType: 'application/json', data: JSON.stringify(body_id), success: function(data) { let html = ''; for(let i = 0; i < data.msg.length; i++) { html += '<tr>' + '<td>' + data.msg[i].id + '</td>' + '<td>' + data.msg[i].userName + '</td>' + '<td><input type="text" value='+ data.msg[i].passWord +' id="passWord'+data.msg[i].id+'"/></td>' + '<td>'+ '<span style="color:red;" onclick="del(' + data.msg[i].id + ',' + data.login_id + ')">刪除</span>'+ '<span style="color:blue;" onclick="upd(' + data.msg[i].id + ',' + data.login_id + ')">修改</span>'+ '</td>' + '</tr>'; } $("#tbody").html(html); } }); } function del(id, login_id) { if(id == login_id) { alert("不能自己刪除自己"); } else { let body_id = { "id": id, "login_id": login_id } $.ajax({ type: "POST", url: "http://127.0.0.1:3000/del", contentType: 'application/json', data: JSON.stringify(body_id), success: function(data) { if(data.code == 1) { alert("刪除成功"); main(); } else if(data.code == 0) { alert(data.msg); } else { $("#msg").text(JSON.stringify(data)); } } }); } } function upd(id, login_id){ if(id != login_id) { alert("只能修改自己的密碼"); } else { let body_id = { "id": id, "login_id": login_id, "passWord": $("#passWord"+login_id).val().trim() } $.ajax({ type: "POST", url: "http://127.0.0.1:3000/upd", contentType: 'application/json', data: JSON.stringify(body_id), success: function(data) { if(data.code == 1) { alert("修改自己的密碼成功"); main(); } else if(data.code == 0) { alert(data.msg); } else { $("#msg").text(JSON.stringify(data)); } } }); } } function getQueryValue(name) { // 建立正則表示式，這個表示式匹配以name開頭或者&name開頭，以&結尾或者就是name結尾 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // 解碼url var decodedUrl = decodeURI(window.location.search); // 匹配表示式，返回一個group陣列 var r = decodedUrl.substr(1).match(reg); // 陣列下標2的元素就是所要擷取的結果 if(r != null) return unescape(r[2]); return null; } </script> </html>
login.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 設定語言為中文 --> <meta http-equiv="Content-Language" content="zh-cn" /> <!-- 禁止百度轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 是否開啟cleartype顯示效果 --> <meta http-equiv="cleartype" content="on"> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> <!-- 優先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用相容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 設定手持裝置支援 --> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <title></title> </head> <body> 使用者名稱：<input type="text" maxlength="16" id="userName" /> 密碼： <input type="password" maxlength="16" id="passWord" /> <button onclick="login()">登入</button> <div id="msg"></div> <div id="reg"></div> </body> <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script> <script> function login() { let userName = $("#userName").val().trim(); let passWord = $("#passWord").val().trim(); if(!userName) { alert("使用者名稱不能為空"); return false; } if(!passWord) { alert("密碼不能為空"); return false; } let loginReqbody = { 'userName': userName, 'passWord': passWord } $.ajax({ type: "POST", url: "http://127.0.0.1:3000/login", contentType: 'application/json', data: JSON.stringify(loginReqbody), success: function(data) { $("#passWord").val(""); if(data.code == 0) { $("#msg").text(data.msg).css("color", "red"); $("#reg").html("<a href='register.html'>前往註冊</a>").css("color", "blue"); } else if(data.code == 1) { $("#msg").text(data.msg).css("color", "red"); } else if(data[0].userName || data[0].passWord) { alert("登入成功"); window.location.href = 'index.html?id=' + data[0].id; } else { $("#msg").text(JSON.stringify(data)); } } }); } </script> </html>
register.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 設定語言為中文 --> <meta http-equiv="Content-Language" content="zh-cn" /> <!-- 禁止百度轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 是否開啟cleartype顯示效果 --> <meta http-equiv="cleartype" content="on"> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> <!-- 優先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用相容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 設定手持裝置支援 --> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <title></title> </head> <body> 使用者名稱：<input type="text" maxlength="16" id="userName" /> 密碼： <input type="password" maxlength="16" id="passWord" /> <button onclick="register()">註冊</button> <div id="msg"></div> </body> <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script> <script> function register() { let userName = $("#userName").val().trim(); let passWord = $("#passWord").val().trim(); if(!userName) { alert("使用者名稱不能為空"); return false; } if(!passWord) { alert("密碼不能為空"); return false; } let loginReqbody = { 'userName': userName, 'passWord': passWord } $.ajax({ type: "POST", url: "http://127.0.0.1:3000/add", contentType: 'application/json', data: JSON.stringify(loginReqbody), success: function(data) { if(data.code == 0) { $("#msg").text(data.msg).css("color", "red"); $("#passWord").val(""); } else if(data.code == 1) { alert("註冊成功"); window.location.href = 'login.html'; } else { $("#msg").text(JSON.stringify(data)); } } }); } </script> </html>
db.js
// 配置連結資料庫引數 module.exports = { host: 'localhost', port: 3306, // 埠號 database: 'test', // 資料庫名 user: 'root', // 資料庫使用者名稱 password: 'root' // 資料庫密碼 };
dbhelper.js
const mysql = require('mysql'); // 引入mysql模組
const databaseConfig = require('./db'); // 引入資料庫配置模組中的資料
// 向外暴露方法
module.exports = {
query: function(sql, params, callback) {
// 每次使用的時候需要建立連結，資料操作完成之後要關閉連線
let connection = mysql.createConnection(databaseConfig);
connection.connect(function(err) {
if(err) {
console.log('資料庫連結失敗');
throw err;
}
// 開始資料操作
// 傳入三個引數，第一個引數sql語句，第二個引數sql語句中需要的資料，第三個引數回撥函式
connection.query(sql, params, function(err, results, fields) {
if(err) {
console.log('資料操作失敗');
throw err;
}
// 將查詢出來的資料返回給回撥函式
callback && callback(results, fields);
// results作為資料操作後的結果，fields作為資料庫連線的一些欄位
// 停止連結資料庫，必須再查詢語句後，要不然一呼叫這個方法，就直接停止連結，資料操作就會失敗
connection.end(function(err) {
if(err) {
console.log('關閉資料庫連線失敗！');
throw err;
}
});
});
});
}
};
test.js
const mysql = require('mysql'); // 引入mysql模組（防止SQL注入使用的）1'or'1'='1
const db = require('./dbhelper');
const bodyParser = require('body-parser');
let express = require('express');
let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
//設定跨域訪問
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
next();
});
// 登入例項
app.post('/login', function(req, res, next) {
let queryString = "SELECT id,userName,passWord FROM login WHERE userName=" + mysql.escape(req.body.userName);
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
if(rows.length == 0) {
res.json({
code: '0',
msg: '使用者不存在'
});
} else if(rows[0].passWord == req.body.passWord) {
res.json(rows);
} else {
res.json({
code: '1',
msg: '密碼錯誤'
});
}
}
})
});
// 註冊
app.post('/add', function(req, res, next) {
let queryString = "SELECT id,userName,passWord FROM login WHERE userName=" + mysql.escape(req.body.userName);
let addString = "INSERT INTO login(userName,passWord) VALUES(?,?)";
let addSqlParams = [req.body.userName, req.body.passWord];
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
if(rows.length != 0) {
res.json({
code: '0',
msg: '使用者已經存在'
});
} else {
db.query(addString, addSqlParams, function(err, rows) {
res.json({
code: '1',
msg: '註冊成功'
});
})
}
}
})
});
// 查詢所有使用者資訊
app.post('/select', function(req, res, next) {
let queryString = "SELECT id,userName,passWord FROM login";
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
res.json({
code: "1",
msg: rows,
login_id: req.body.id
});
}
})
});
// 刪除某個使用者
app.post('/del', function(req, res, next) {
let queryString = "DELETE FROM login WHERE id = " + mysql.escape(req.body.id);
if(req.body.id != req.body.login_id) {
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
res.json({
code: '1',
msg: '刪除成功'
});
}
})
} else {
res.json({
code: '0',
msg: '不能自己刪除自己'
});
}
});
// 只能修改自己的密碼
app.post('/upd', function(req, res, next) {
let queryString = 'UPDATE login SET `passWord` = ? WHERE id = ?';
let updSqlParams = [req.body.passWord, req.body.id];
if(req.body.id == req.body.login_id) {
db.query(queryString, updSqlParams, function(err, rows) {
if(err) {
if(err.affectedRows == 1) {
res.json({
code: '1',
msg: '修改成功'
});
}else{
res.json({
code: '0',
msg: '只能修改自己的密碼'
});
}
} else {
res.json(err);
}
})
} else {
res.json("未知錯誤");
}
});
app.listen(3000);
這裡詳細給大家說說test.js裡面的東西哈，希望大家少走彎路。
首先，不通過form表單提交，想要通過ajax的post方式請求就需要藉助外掛 bodyParser 了，具體的安裝外掛方法，百度上真的很多，自己搜尋哈，別忘了一定要安裝mysql，不然不行的 npm install mysql
在test.js中，最上方引入 const mysql = require('mysql'); 因為下面的SQL查詢中要用到 mysql.escape ，這個是防止SQL注入額，比如 1'or'1'='1
app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));
這兩個的順序最好不要顛倒，具體原因我也不知道，按順序就對了。
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
next();
});
這個地方是設定跨域訪問的，因為我用的是hbuilder，預設額是8020埠，test.js執行後監聽的是3000埠，所以這個配置是少不了的。
接下來是登入方法，註冊方法，查詢所有使用者，刪除某個使用者，修改密碼等方法。
這五個方法中這只是大部分的邏輯，有的邏輯需要你自己寫上去的，我只寫了一部分，缺什麼向上面新增就行了。
下面是專案的下載連結： https://share.weiyun.com/5PldvEQ （騰訊微雲）