溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Node.js利用Express如何實現用戶注冊登陸功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
環境
準備
首先在Win10上安裝Mysql，一路Next就行。安裝完成使用SQLyog連接MySQL Server。連接成功需要創建數據庫和數據表
Schema：
CREATE TABLE user ( username char(20) NOT NULL, password char(20) NOT NULL, email char(30) DEFAULT NULL, address char(20) DEFAULT NULL, phonenumber char(20) DEFAULT NULL, logintime int(20) DEFAULT NULL, id int(20) NOT NULL AUTO_INCREMENT, PRIMARY KEY (id), KEY username (username) ) ENGINE=InnoDB DEFAULT CHARSET=utf8
實戰
前端
3個page, login.html, register.html.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸注冊</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <a href="./register.html" rel="external nofollow" >注冊</a> <a href="./login.html" rel="external nofollow" >登錄</a> </body> </head> </html>
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸注冊</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <form action="/login" method="GET" > <label for="">賬號:</label> <input name="user" type="text" placeholder="請輸入賬號"> <br> <label for="">密碼:</label> <input type="password" name="password" placeholder="請輸入密碼"> <br> <input type="submit" value="登錄"> </form> </body> </head> </html>
register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸注冊</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <form action="/register" method="POST"> <label for="">賬號:</label> <input name="user" type="text" placeholder="請輸入賬號"> <br> <label for="">密碼:</label> <input name="psw" type="password" placeholder="請輸入密碼"> <br> <label for="">重復密碼:</label> <input name="pswa" type="password" placeholder="請重復密碼"> <br> <input type="submit" value="注冊"> </form> </body> </head> </html>
后端 server.js
var express = require("express");
var bodyParser = require("body-parser");
var router = require("./routers");
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use('/', router);
module.exports = app;Router
router/index.js, 調用封裝好的數據庫接口：queryUer, addUser
const express=require("express");
const dao = require("../dao/db");
const router=express.Router();
router.get("/login", function(req,res){
console.dir(req.query);
try{
dao.queryUser({username:req.query.user},function(err,record){
if(err){
console.log(err);
throw error;
}
console.log(record);
if(record && record.password == req.query.password){
res.send(`${req.query.user}:登陸成功`);
}else{
res.send(`${req.query.user}:登陸失敗,檢查登陸信息是否正確`);
}
});
} catch(error){
console.log(error);
res.send(`${req.body.user}: 登陸失敗`);
}
})
router.post("/register", function(req,res){
console.dir(req.body);
try{
if(req.body.psw == req.body.pswa){
dao.addUser({username:req.body.user,password:req.body.psw});
res.send(`${req.body.user}: 注冊成功`);
} else {
console.log(error);
res.send(`${req.body.user}: 注冊失敗:,檢查登陸信息是否正確`);
}
} catch(error){
console.log(error);
res.send(`${req.body.user}: 注冊失敗`);
}
})
module.exports = router;數據庫接口db.js
dao/db.js
var mysqlClient= require("./mysql");
function addUser (userInfo,callabck){
console.log("addUser:"+ userInfo);
var sql= `insert into user(username,password) values('${userInfo.username}','${userInfo.password}')`;
console.log("sql:"+ sql);
mysqlClient(sql,function(err,rows){
if(err){
console.log("err:"+err);
callabck(err,null);
} else{
console.log("addUser result:");
console.log(rows);
callabck(null,rows);
}
})
}
function queryUser (userInfo,callabck){
console.log("queryUser:"+ userInfo);
var sql= `select * from user where username='${userInfo.username}'`;
console.log("sql:"+ sql);
mysqlClient(sql, function(err,rows){
if(err){
console.log("err:"+err);
callabck(err,null);
} else{
rows && rows.length>0 ? callabck(null,rows[0]): callabck(null,null);
}
})
}
exports.addUser = addUser;
exports.queryUser = queryUser;dao/mysql.js
const mysql = require("mysql");
const pool = mysql.createPool({
host:"localhost",
user:"root",
password:"*****",
database:"test"
});
function query(sql,callback){
pool.getConnection(function(err,connection){
if(err){
callback(err,null);
return
}
connection.query(sql, function (err,rows) {
callback(err,rows);
connection.release();
});
});
}
module.exports = query;mysql module
yarn add mysql
運行index.js
cd src/ && node index.js
結果及演示
瀏覽器看效果及整個過程。
看完上述內容，你們對Node.js利用Express如何實現用戶注冊登陸功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
