Node.js利用Express實(shí)現(xiàn)用戶注冊(cè)登陸功能(推薦)
要求
- 了解Express框架
- 了解node.js常用模塊:express,body-parser,mysql
- 了解express Router
- 了解HTML form表單
- 了解MySQL Server 及安裝使用
- 了解SQLyog使用
環(huán)境
- 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
準(zhǔn)備
首先在Win10上安裝Mysql,一路Next就行。安裝完成使用SQLyog連接MySQL Server。連接成功需要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)和數(shù)據(jù)表
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
實(shí)戰(zhàn)
前端
3個(gè)page, login.html, register.html.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸注冊(cè)</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" >注冊(cè)</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>登陸注冊(cè)</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="">賬號(hào):</label> <input name="user" type="text" placeholder="請(qǐng)輸入賬號(hào)"> <br> <label for="">密碼:</label> <input type="password" name="password" placeholder="請(qǐng)輸入密碼"> <br> <input type="submit" value="登錄"> </form> </body> </head> </html>
register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸注冊(cè)</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="">賬號(hào):</label> <input name="user" type="text" placeholder="請(qǐng)輸入賬號(hào)"> <br> <label for="">密碼:</label> <input name="psw" type="password" placeholder="請(qǐng)輸入密碼"> <br> <label for="">重復(fù)密碼:</label> <input name="pswa" type="password" placeholder="請(qǐng)重復(fù)密碼"> <br> <input type="submit" value="注冊(cè)"> </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, 調(diào)用封裝好的數(shù)據(jù)庫(kù)接口: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}: 注冊(cè)成功`); } else { console.log(error); res.send(`${req.body.user}: 注冊(cè)失敗:,檢查登陸信息是否正確`); } } catch(error){ console.log(error); res.send(`${req.body.user}: 注冊(cè)失敗`); } }) module.exports = router;
數(shù)據(jù)庫(kù)接口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
運(yùn)行index.js
cd src/ && node index.js
結(jié)果及演示
瀏覽器看效果及整個(gè)過(guò)程。
到此這篇關(guān)于Node.js利用Express實(shí)現(xiàn)用戶注冊(cè)登陸功能的文章就介紹到這了,更多相關(guān)Node.js用戶注冊(cè)登陸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用yarn代替npm管理前端項(xiàng)目模塊依賴(lài)的方法詳解
這篇文章主要給大家介紹了關(guān)于利用yarn代替npm管理前端項(xiàng)目模塊依賴(lài)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09nodejs簡(jiǎn)單讀寫(xiě)excel內(nèi)容的方法示例
這篇文章主要介紹了nodejs簡(jiǎn)單讀寫(xiě)excel內(nèi)容的方法,簡(jiǎn)單分析了nodejs常見(jiàn)的讀寫(xiě)Excel模塊,并結(jié)合實(shí)例形式分析了nodejs讀寫(xiě)Excel具體操作技巧,需要的朋友可以參考下2018-03-03node.js中的http.response.writeHead方法使用說(shuō)明
這篇文章主要介紹了node.js中的http.response.writeHead方法使用說(shuō)明,本文介紹了http.response.writeHead的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12學(xué)習(xí)使用grunt來(lái)打包JavaScript和CSS程序的教程
這篇文章主要介紹了學(xué)習(xí)使用grunt來(lái)打包JavaScript和CSS程序的教程,grunt基于node.js和需要的朋友可以參考下2016-01-01nodeJs實(shí)現(xiàn)基于連接池連接mysql的方法示例
這篇文章主要介紹了nodeJs實(shí)現(xiàn)基于連接池連接mysql的方法,結(jié)合具體實(shí)例形式分析了nodejs連接池操作mysql數(shù)據(jù)庫(kù)連接的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2018-02-02基于NodeJS的前后端分離的思考與實(shí)踐(五)多終端適配
對(duì)比基于瀏覽器的響應(yīng)式設(shè)計(jì)方案,因?yàn)榻^大部分終端探測(cè)和渲染邏輯遷移到了服務(wù)端,所以在 NodeJS 層進(jìn)行適配無(wú)疑帶來(lái)了更好的性能和用戶體驗(yàn);另外,相對(duì)于一些所謂的「云適配」方案帶來(lái)的轉(zhuǎn)換質(zhì)量問(wèn)題,在基于前后端分離的「定制式」方案中也不會(huì)存在。2014-09-09Node.js全局處理響應(yīng)并進(jìn)行異常管理
這篇文章主要為大家介紹了Node.js全局處理響應(yīng)并進(jìn)行異常管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04nodejs實(shí)例解析(輸出hello world)
本文主要介紹nodejs實(shí)例解析:輸出hello world的完整過(guò)程。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01