node中如何用最简单的方法实现注册登录

创建数据库

首先我们创建一个数据库，这里我们表名写个1688
之后我们创建了一个用户表user
设计表结构如下：

用户表结构

创建服务端

我们先创建一个最简单的服务，设置端口号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() {
    
}

这样我们的一个最简单的服务就搭建完毕了

之后我们还需要对这个服务进行一下改进，对数据进行一下处理。
- 我们的dataHandler会处理post请求发来的信息，这是一个buffer格式，我们需要对他进行第一步的处理，转换成字符，存储在data变量里。
- 我们还要在endHandler中，设置一下响应头，解决乱码的问题

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

之后我们对各种请求进行处理
- 我们对发送过来的4002/之后的数据进行处理。会发送过来一个？加数据，我们把他处理成不带？的字符串.例如?login 处理成login

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;
    }

到这里我们的数据处理就全部完成。

连接数据库

首先我们要在当前服务所在文件夹下面打开cmd命令符
使用npm i mysql或cnpm i mysql。
之后我们在创建好的服务中添加

// 引入mysql模块
var sql = require("mysql");
// 创建一个连接数据库
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("连接成功");
    }
})

我们开启服务，就会看到显示数据库连接成功。

数据库连接成功

之后我们可以就可以进行数据库操作了。需要值得注意的是，数据库的查询操作是一个异步操作，所以我们使用了函数套函数的操作来避免异步。

// 数据查询
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()
    })

}
// 数据库插入
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);
    })
}

注意这里的数据插入操作要和你的数据库进行对应

之后我们switch来判断要进行的操作，和数据库进行对比，然后返回信息和操作。
这里给出我们的接口文档

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 : 用户名
}

同样是需要和数据库一样的,这里给出我们的完整服务端的代码

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();
// 数据查询
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()
    })

}
// 数据库插入
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("数据插入成功，点击跳转");
                res1.end();
            })
    }
}

前端代码

注册部分

参考我们的接口文档，注册需要发送一个对象形式的，带有name,account,password的对象。
所以我们简单的创建了一个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
首先我们先阻止表单的默认事件
之后我们点击提交时，按照我们的接口文档来创建对象。
提交到服务器中，服务器就会自动处理

插入数据

插入数据成功

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)
    }

登录部分

同样参考接口文档，简单的创建一个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
首先我们先阻止表单的默认事件
之后我们点击提交时，按照我们的接口文档来创建对象。
提交到服务器中，服务器就会自动处理,我们把接收的数据进行一些处理。
- 如果传回来一个对象代表，登录成功，我们就创建一个session来模拟我们的登录状态，然后跳转。
- 如果传来一个字符串，我们就直接输出密码错误
  
  登录成功
  
  登录失败
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("账户或密码错误");
            }
        }