Node.js利用Express實現使用者註冊登陸功能(推薦)
阿新 • • 發佈:2020-10-26
要求
- 瞭解Express框架
- 瞭解node.js常用模組:express,body-parser,mysql
- 瞭解express Router
- 瞭解HTML form表單
- 瞭解MySQL Server 及安裝使用
- 瞭解SQLyog使用
環境
- OS: Win10
- Node.js: v12.19.0
- Express: v4.17.1
- Yarn: v1.22.10
- 使用VScode IDE
- body-parser:1.19.0
- mysql: 2.18.1
- MySQL Server:5.7
- SQLyog:V12.9
準備
首先在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",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,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,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實現使用者註冊登陸功能的文章就介紹到這了,更多相關Node.js使用者註冊登陸內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!