node中如何用最簡單的方法實現(xiàn)注冊登錄

創(chuàng)建數(shù)據(jù)庫

首先我們創(chuàng)建一個數(shù)據(jù)庫，這里我們表名寫個1688
之后我們創(chuàng)建了一個用戶表user
設計表結構如下：

用戶表結構

創(chuàng)建服務端

我們先創(chuàng)建一個最簡單的服務，設置端口號4002潮针，地址10.20.159.170

var http = require("http");
var querystring = require("querystring");
var server = http.createServer(createHandler);
var data, req, res;
server.listen("4002", "10.20.159.170", function () {
    console.log("開啟成功")
})
function createHandler(_req, _res) {
    req = _req;
    res = _res;
    req.on("data", dataHandler);
    req.on("end", endHandler);
}
function dataHandler() {
    
}
function endHandler() {
    
}

這樣我們的一個最簡單的服務就搭建完畢了

之后我們還需要對這個服務進行一下改進，對數(shù)據(jù)進行一下處理。
- 我們的dataHandler會處理post請求發(fā)來的信息，這是一個buffer格式蒲每，我們需要對他進行第一步的處理，轉換成字符喻括，存儲在data變量里邀杏。
- 我們還要在endHandler中，設置一下響應頭唬血，解決亂碼的問題

res.writeHead(200, {
        "content-type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*"
    });

之后我們對各種請求進行處理
- 我們對發(fā)送過來的4002/之后的數(shù)據(jù)進行處理望蜡。會發(fā)送過來一個？加數(shù)據(jù)拷恨，我們把他處理成不帶脖律？的字符串.例如?login 處理成login

var type = req.url.indexOf("?") > -1 ? req.url.split("?")[0] : req.url;
type = type.slice(1);

然后我們判斷請求類型對不同的請求類型的數(shù)據(jù)進行不同的處理

if (req.method.toLowerCase() === "get") {
        if (req.url.indexOf("?") > -1) {
            obj = querystring.parse(req.url.split("?")[1]);
        }
    } else if (req.method.toLowerCase() === "post") {
        try {
            obj = JSON.parse(data);
        } catch (e) {
            obj = querystring.parse(data);
        }
    } else {
        res.end();
        return;
    }

到這里我們的數(shù)據(jù)處理就全部完成。

連接數(shù)據(jù)庫

首先我們要在當前服務所在文件夾下面打開cmd命令符
使用npm i mysql或cnpm i mysql腕侄。
之后我們在創(chuàng)建好的服務中添加

// 引入mysql模塊
var sql = require("mysql");
// 創(chuàng)建一個連接數(shù)據(jù)庫
var db = sql.createConnection({
    url: "localhost",     // 代表本地地址
    port: 3306,          //端口號
    user: "root",        // 用戶名
    password: "root",      // 密碼
    database: "1688"      // 要使用的數(shù)據(jù)庫
});
// 連接數(shù)據(jù)庫
db.connect(function (err) {
    if (err) {
        console.log("連接失敗");
        return;
    } else {
        console.log("連接成功");
    }
})

我們開啟服務状您，就會看到顯示數(shù)據(jù)庫連接成功。

數(shù)據(jù)庫連接成功

之后我們可以就可以進行數(shù)據(jù)庫操作了兜挨。需要值得注意的是，數(shù)據(jù)庫的查詢操作是一個異步操作眯分，所以我們使用了函數(shù)套函數(shù)的操作來避免異步拌汇。

// 數(shù)據(jù)查詢
function sql_select(table,res1,callback) {
    var sql = "select * from "+table;
    db.query(sql, function (err, results) {
        if(callback){
            callback(results,res1);
            return;
        }
        res1.write(JSON.stringify(results));
        res1.end()
    })

}
// 數(shù)據(jù)庫插入
function sql_insert(name, account, password) {
    let sql = "INSERT INTO `user`(`name`, `account`, `password`) VALUES (?,?,?)";
    db.query(sql, [name, account, password], function (error, res) {
        console.log(res);
    })
}

注意這里的數(shù)據(jù)插入操作要和你的數(shù)據(jù)庫進行對應

之后我們switch來判斷要進行的操作，和數(shù)據(jù)庫進行對比弊决，然后返回信息和操作噪舀。
這里給出我們的接口文檔

url : http://10.20.159.170:4002
method : post
type :json

1. 注冊
    url : http://http://10.20.159.170:4002/registe
    req : {
        name : 用戶名
        account:    手機號
        password :     密碼
    }
    res : "成功"
2. 登錄
url : http://http://10.20.159.170:4002/login
req : {
    account:    手機號
    password :     密碼
}
res : {
    name : 用戶名
}

同樣是需要和數(shù)據(jù)庫一樣的,這里給出我們的完整服務端的代碼

var http = require("http");
var querystring = require("querystring");
var sql = require("mysql");
var data, req, res;
var db = sql.createConnection({
    url: "localhost",
    port: 3306,
    user: "root",
    password: "root",
    database: "1688"
});
db.connect(function (err) {
    if (err) {
        console.log("連接失敗");
        return;
    } else {
        console.log("連接成功");
    }
})
// sql_select();
// 數(shù)據(jù)查詢
function sql_select(table,res1,callback) {
    var sql = "select * from "+table;
    db.query(sql, function (err, results) {
        if(callback){
            callback(results,res1);
            return;
        }
        res1.write(JSON.stringify(results));
        res1.end()
    })

}
// 數(shù)據(jù)庫插入
function sql_insert(name, account, password) {
    let sql = "INSERT INTO `user`(`name`, `account`, `password`) VALUES (?,?,?)";
    db.query(sql, [name, account, password], function (error, res) {
        console.log(res);
    })
}
var server = http.createServer(createHandler);
server.listen("4002", "10.20.159.170", function () {
    console.log("開啟成功")
})


function createHandler(_req, _res) {
    req = _req;
    res = _res;
    req.on("data", dataHandler);
    req.on("end", endHandler);
}

function dataHandler(_data) {
    data = String(_data);
}
function endHandler() {
    res.writeHead(200, {
        "content-type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*"
    });
    var obj;
    var type = req.url.indexOf("?") > -1 ? req.url.split("?")[0] : req.url;
    type = type.slice(1);
    if (req.method.toLowerCase() === "get") {
        if (req.url.indexOf("?") > -1) {
            obj = querystring.parse(req.url.split("?")[1]);
        }
    } else if (req.method.toLowerCase() === "post") {
        try {
            obj = JSON.parse(data);
        } catch (e) {
            obj = querystring.parse(data);
        }
    } else {
        res.end();
        return;
    }
    switch (type){
        case "login":
            sql_select("user",res,function(results,res1){   
                var a;
                results.forEach(function(item){
                    if(item.password === obj.password && item.account === obj.account ){
                        a ={}
                        a.name = item.name;
                    }
                });
                if(a){
                    res1.write(JSON.stringify(a));
                    res1.end();
                    return;
                }
                // res1.write();
                res1.end("賬號或密碼錯誤");
                
            })
            return;
        case "registe":
            sql_select("user",res,function(results,res1){
                var flag = results.some(function(item){
                    return item.account === obj.account
                })
                if(flag){
                    res1.write("該賬戶已被注冊");
                    res1.end();
                    return
                }
                sql_insert(obj.name, obj.account, obj.password);
                res1.write("數(shù)據(jù)插入成功魁淳，點擊跳轉");
                res1.end();
            })
    }
}

前端代碼

注冊部分

參考我們的接口文檔，注冊需要發(fā)送一個對象形式的与倡，帶有name,account,password的對象界逛。
所以我們簡單的創(chuàng)建了一個from并且有3個input

 <form>
        <label for="name">name</label>
        <input type="text" id="name">
        <label for="account">name</label>
        <input type="text" id="account">
        <label for="password">name</label>
        <input type="text" id="password">
        <button>注冊</button>
    </form>

js
首先我們先阻止表單的默認事件
之后我們點擊提交時，按照我們的接口文檔來創(chuàng)建對象纺座。
提交到服務器中息拜，服務器就會自動處理

插入數(shù)據(jù)

插入數(shù)據(jù)成功

var inputs,btn,form
    init();
    function init(){
        form = document.querySelector("form")
        inputs = document.querySelectorAll("input")
        btn = document.querySelector("button");
        form.addEventListener("submit",submitHandler);
        btn.addEventListener("click",clickHandler)
    }
    function submitHandler(e){
        e.preventDefault()
    }
    function clickHandler(){
        var data = {
            name : inputs[0].value,
            account : inputs[1].value,
            password : inputs[2].value,
        }
        ajax(data);
    }
    function ajax(data){
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load",loadHadler);
        xhr.open("POST","http://10.20.159.170:4002/registe");
        xhr.send(JSON.stringify(data))
    }
    function loadHadler(e){
        console.log(e.currentTarget.response)
    }

登錄部分

同樣參考接口文檔，簡單的創(chuàng)建一個form表單

<form>
        <label for="account">account</label>
        <input type="text" id="account">
        <label for="password">password</label>
        <input type="text" id="password">
        <button>登錄</button>
    </form>

js
首先我們先阻止表單的默認事件
之后我們點擊提交時净响，按照我們的接口文檔來創(chuàng)建對象少欺。
提交到服務器中，服務器就會自動處理,我們把接收的數(shù)據(jù)進行一些處理馋贤。
- 如果傳回來一個對象代表赞别，登錄成功，我們就創(chuàng)建一個session來模擬我們的登錄狀態(tài)配乓，然后跳轉仿滔。
- 如果傳來一個字符串，我們就直接輸出密碼錯誤
  
  登錄成功
  
  登錄失敗
js

var inputs, btn, form
        init();
        function init() {
            form = document.querySelector("form")
            inputs = document.querySelectorAll("input")
            btn = document.querySelector("button");
            form.addEventListener("submit", submitHandler);
            btn.addEventListener("click", clickHandler)
        }
        function submitHandler(e) {
            e.preventDefault()
        }
        function clickHandler() {
            var data = {
                account: inputs[0].value,
                password: inputs[1].value,
            }
            ajax(data);
        }
        function ajax(data) {
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", loadHadler);
            xhr.open("POST", "http://10.20.159.170:4002/login");
            xhr.send(JSON.stringify(data))
        }
        function loadHadler(e) {
            try {
                var a = JSON.parse(e.currentTarget.response);
                sessionStorage.name = a.name;
                location.href = "./index.html"
            } catch {
                alert("賬戶或密碼錯誤");
            }
        }