node+express+mysql實現登入註冊功能

阿新 • • 發佈：2021-01-21

node+express+mysql實現登入註冊功能

前言

因為JavaScript的火熱，學會nodejs也成為前端人員的一個加分項。最近阿鬆在學node，學了一些知識後，決定試著做一個登入註冊的功能。再經過一陣摸爬滾打後，想把自己淺薄的經驗分享給大家。

一、依賴的項

在功能開始前，我們先引入一些模組，express框架，mysql管理資料庫，以及formidable模組來獲取表單內容

    "express": "^4.17.1",
    "formidable": "^1.2.2",
    "mysql": "^2.18.1"

二、入口檔案

1.app.js

首先使用express框架，開啟本地伺服器功能，使用route檔案作為路由

var express = require('express');
var app = express();

const router = require('./route');
app.use(router);

app.listen(666,function(){
    console.log('127.0.0.1:666');
});

2.route.js

程式碼如下（示例）：

使用express的鏈式路由，處理提交的get和post請求

var express = require('express');
var work = require('./work');
var router = express.Router();

router
.get('/',work.login_get)
.post('/login',work.login_post)
.get('/regist',work.regist_get)
.post('/regist',work.regist_post)  

module.exports = router;

3、work.js

var db = require('./db');
var url = require('url');
var formidable = require('formidable');

module.exports = {
//處理登入的get操作
    login_get: function (req, res, next) {
        res.render('./login.html');
        next();
    },
    login_post(req, res) {

        var f = new formidable.IncomingForm();
        f.parse(req, (err, fileds) => {
            //實現登入功能
            db.where(fileds.User, fileds.Password).select(function (data) {
                if (fileds.User == '') {
                    var backstr = "<script>alert('賬號不能為空');window.location.href='/'</script>"
                    res.setHeader('Content-type', 'text/html;charset=utf-8');
                    res.end(backstr);
                } else if (fileds.Password == '') {
                    var backstr = "<script>alert('密碼不能為空');window.location.href='/'</script>"
                    res.setHeader('Content-type', 'text/html;charset=utf-8');
                    res.end(backstr);
                } else {
                    if (data == '') {
                        var backstr = "<script>alert('賬號或密碼錯誤');window.location.href='/'</script>"
                        res.setHeader('Content-type', 'text/html;charset=utf-8');
                        res.end(backstr);
                    }
                    else {
                        var backstr = "<script>alert('登入成功');window.location.href='/'</script>"
                        res.setHeader('Content-type', 'text/html;charset=utf-8');
                        res.end(backstr);
                    }
                }
            });
        })
    },
    //處理註冊的get操作
    regist_get(req, res) {
        res.render('./regist.html');
    },
//處理註冊的post操作
    regist_post(req, res) {
        var f = new formidable.IncomingForm();
        f.parse(req, (err, fileds) => {
            db.where(fileds.User, fileds.Password).select_user(function (data) {
                if (fileds.User == '') {
                    var backstr = "<script>alert('註冊賬號不能為空');window.location.href='/'</script>"
                    res.setHeader('Content-type', 'text/html;charset=utf-8');
                    res.end(backstr);
                } else if (fileds.Password == '') {
                    var backstr = "<script>alert('註冊密碼不能為空');window.location.href='/'</script>"
                    res.setHeader('Content-type', 'text/html;charset=utf-8');
                    res.end(backstr);
                } else {
                    if (data == '') {
                        db.where(fileds.User, fileds.Password).add();
                        var backstr = "<script>alert('註冊成功');window.location.href='/'</script>"
                        res.setHeader('Content-type', 'text/html;charset=utf-8');
                        res.end(backstr);
                    }else{
                        var backstr = "<script>alert('賬號已存在');window.location.href='/'</script>"
                        res.setHeader('Content-type', 'text/html;charset=utf-8');
                        res.end(backstr);
                    }
                }
            })
        })
    }
}

4、db.js

連線mysql資料庫，編寫sql語句進行查詢資料庫，實現賬號密碼校驗以及註冊功能

var mysql = require('mysql');
//連線資料庫
var connection = mysql.createConnection({
    host:'127.0.0.1',
    user:'root',
    password:'1234',
    database:'login-regist'
});
connection.connect();

module.exports = {
    wh:undefined,
    where:function(u,p){
        this.u = u;
        this.p = p;
        return this;
    },
    
    select: function (callback) {

        var sql = "select user, password from login where user='" + this.u + "' and password='" + this.p + "'";

        connection.query(sql, function (err, sql_data) {
            var da = sql_data;
            
            // 呼叫回撥函式,將資料當做實參進行函式的回撥
            callback(da);
        });
        this.u = undefined;
        this.p = undefined;
    },
    select_user: function(callback){
        var sql = "select user from login where user='" + this.u + "';";
        // console.log(sql);
        connection.query(sql, function (err, sql_data) {
            // return sql_data;
            var da = sql_data;
            
            // 呼叫回撥函式,將資料當做實參進行函式的回撥
            callback(da);
        });
        this.u = undefined;
        this.p = undefined;
    },
    add:function(){
        var sql = "INSERT INTO login (user,password) values('" +this.u+"', '" +this.p+"');";
        connection.query(sql) ;

    }
}

5、最後附上登入和註冊頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/login" method="post">
        賬號 <input type="text" name="User" > <br />
        密碼 <input type="password" name="Password"> <br />
        <input type="submit" value="登入">
        <button id="register"><a href="./regist">註冊</a></button>
    </form>
</body>
</html>

regist.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/regist" method="post">
        賬號: <input type="text" name="User" > <br>
        密碼: <input type="password" name="Password"> <br>
        <input type="submit" value="註冊">
    </form>
</body>
</html>