node中如何用最簡(jiǎn)單的方法實(shí)現(xiàn)注冊(cè)登錄

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

  • 首先我們創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，這里我們表名寫(xiě)個(gè)1688
  • 之后我們創(chuàng)建了一個(gè)用戶表user

  • 設(shè)計(jì)表結(jié)構(gòu)如下：


    用戶表結(jié)構(gòu)

創(chuàng)建服務(wù)端

  • 我們先創(chuàng)建一個(gè)最簡(jiǎn)單的服務(wù)，設(shè)置端口號(hào)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("開(kāi)啟成功")
})
function createHandler(_req, _res) {
    req = _req;
    res = _res;
    req.on("data", dataHandler);
    req.on("end", endHandler);
}
function dataHandler() {
    
}
function endHandler() {
    
}

這樣我們的一個(gè)最簡(jiǎn)單的服務(wù)就搭建完畢了

  • 之后我們還需要對(duì)這個(gè)服務(wù)進(jìn)行一下改進(jìn)，對(duì)數(shù)據(jù)進(jìn)行一下處理。
    • 我們的dataHandler會(huì)處理post請(qǐng)求發(fā)來(lái)的信息，這是一個(gè)buffer格式，我們需要對(duì)他進(jìn)行第一步的處理 ，轉(zhuǎn)換成字符，存儲(chǔ)在data變量里。
    • 我們還要在endHandler中，設(shè)置一下響應(yīng)頭，解決亂碼的問(wèn)題
res.writeHead(200, {
        "content-type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*"
    });
  • 之后我們對(duì)各種請(qǐng)求進(jìn)行處理
    • 我們對(duì)發(fā)送過(guò)來(lái)的4002/之后的數(shù)據(jù)進(jìn)行處理。會(huì)發(fā)送過(guò)來(lái)一個(gè)？加數(shù)據(jù)，我們把他處理成不帶？的字符串.例如?login 處理成login 
var type = req.url.indexOf("?") > -1 ? req.url.split("?")[0] : req.url;
type = type.slice(1);
  • 然后我們判斷請(qǐng)求類型對(duì)不同的請(qǐng)求類型的數(shù)據(jù)進(jìn)行不同的處理
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ù)庫(kù)

  • 首先我們要在當(dāng)前服務(wù)所在文件夾下面打開(kāi)cmd命令符
    使用npm i mysql或cnpm i mysql。
    之后我們?cè)趧?chuàng)建好的服務(wù)中添加
// 引入mysql模塊
var sql = require("mysql");
// 創(chuàng)建一個(gè)連接數(shù)據(jù)庫(kù)
var db = sql.createConnection({
    url: "localhost",     // 代表本地地址
    port: 3306,          //端口號(hào)
    user: "root",        // 用戶名
    password: "root",      // 密碼
    database: "1688"      // 要使用的數(shù)據(jù)庫(kù)
});
// 連接數(shù)據(jù)庫(kù)
db.connect(function (err) {
    if (err) {
        console.log("連接失敗");
        return;
    } else {
        console.log("連接成功");
    }
})
  • 我們開(kāi)啟服務(wù)，就會(huì)看到顯示數(shù)據(jù)庫(kù)連接成功。
數(shù)據(jù)庫(kù)連接成功

之后我們可以就可以進(jìn)行數(shù)據(jù)庫(kù)操作了。需要值得注意的是，數(shù)據(jù)庫(kù)的查詢操作是一個(gè)異步操作，所以我們使用了函數(shù)套函數(shù)的操作來(lái)避免異步。

// 數(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ù)庫(kù)插入
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ù)庫(kù)進(jìn)行對(duì)應(yīng)

  • 之后我們switch來(lái)判斷要進(jìn)行的操作，和數(shù)據(jù)庫(kù)進(jìn)行對(duì)比，然后返回信息和操作。
  • 這里給出我們的接口文檔
url : http://10.20.159.170:4002
method : post
type :json

1. 注冊(cè)
    url : http://http://10.20.159.170:4002/registe
    req : {
        name : 用戶名
        account:    手機(jī)號(hào)
        password :     密碼
    }
    res : "成功"
2. 登錄
url : http://http://10.20.159.170:4002/login
req : {
    account:    手機(jī)號(hào)
    password :     密碼
}
res : {
    name : 用戶名
}
  • 同樣是需要和數(shù)據(jù)庫(kù)一樣的,這里給出我們的完整服務(wù)端的代碼
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ù)庫(kù)插入
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("開(kāi)啟成功")
})


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("賬號(hào)或密碼錯(cuò)誤");
                
            })
            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("該賬戶已被注冊(cè)");
                    res1.end();
                    return
                }
                sql_insert(obj.name, obj.account, obj.password);
                res1.write("數(shù)據(jù)插入成功，點(diǎn)擊跳轉(zhuǎn)");
                res1.end();
            })
    }
}

前端代碼

注冊(cè)部分

  • 參考我們的接口文檔，注冊(cè)需要發(fā)送一個(gè)對(duì)象形式的，帶有name,account,password的對(duì)象。
    所以我們簡(jiǎn)單的創(chuàng)建了一個(gè)from并且有3個(gè)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>注冊(cè)</button>
    </form>
  • js
  • 首先我們先阻止表單的默認(rèn)事件
  • 之后我們點(diǎn)擊提交時(shí)，按照我們的接口文檔來(lái)創(chuàng)建對(duì)象。

  • 提交到服務(wù)器中，服務(wù)器就會(huì)自動(dò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)
    }

登錄部分

  • 同樣參考接口文檔，簡(jiǎn)單的創(chuàng)建一個(gè)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
  • 首先我們先阻止表單的默認(rèn)事件
  • 之后我們點(diǎn)擊提交時(shí)，按照我們的接口文檔來(lái)創(chuàng)建對(duì)象。
  • 提交到服務(wù)器中，服務(wù)器就會(huì)自動(dòng)處理,我們把接收的數(shù)據(jù)進(jìn)行一些處理。
    • 如果傳回來(lái)一個(gè)對(duì)象代表，登錄成功，我們就創(chuàng)建一個(gè)session來(lái)模擬我們的登錄狀態(tài)，然后跳轉(zhuǎn)。

    • 如果傳來(lái)一個(gè)字符串，我們就直接輸出密碼錯(cuò)誤


      登錄成功

      登錄失敗
  • 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("賬戶或密碼錯(cuò)誤");
            }
        }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。