[Day7] Node.js利用Express實現使用者註冊登陸功能(2)

蝸牛烏龜誰跑的快發表於2020-10-25
Node.jsExpress

[Day7] Node.js利用Express實現使用者註冊登陸功能(2)

文章目錄

要求

  • 瞭解Express框架
  • 瞭解node.js常用模組：express，body-parser，mysql
  • 瞭解express Router
  • 瞭解HTML form表單
  • 瞭解MySQL Server 及安裝使用
  • 瞭解SQLyog使用

環境

  1. OS: Win10
  2. Node.js: v12.19.0
  3. Express: v4.17.1
  4. Yarn: v1.22.10
  5. 使用VScode IDE
  6. body-parser：1.19.0
  7. mysql: 2.18.1
  8. MySQL Server：5.7
  9. 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" />
		</head>
		<body>
			<a href="./register.html">註冊</a>
			<a href="./login.html">登入</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" />
		</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" />
		</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

結果及演示

瀏覽器看效果及整個過程。
在這裡插入圖片描述

相關文章