nodejs制作简单的登录注册页面

首先,我用的是mysql数据库,我现在比较熟悉的就是它了,,我现在存不了中文数据╥﹏╥...

先建立数据库,创建接下来要填写的信息的列

先建立首页,两个按钮:

没错,是有点丑。。。其实这是朴素

登录按钮连接 "register.html",注册按钮连接"login.html";两个页面大概就长这样。。。。也很简朴。。。。

      

两个都是form表单,首先注册。。。填完数据后就跳转到登录界面

js文件:

app.post('/login.html',function(req,res){
    var postData = "";
    req.addListener("data",function(postDataChunk){
        postData += postDataChunk;
    });
    req.addListener("end",function(){
        console.log("数据接收完毕!");
        var json = qs.parse(postData);
        nextId +=1;
        console.log('nextId:'+nextId);
        var  userAddSql = "INSERT INTO `users`.`userinfo` (`id`,`name`, `password`, `age`,`sex`, `tel`,`nickname`) VALUES ('"+nextId+"','"+json.name+"','"+json.password+"','"+json.age+"','"+json.sex+"','"+json.tel+"','"+json.nickname+"')";
        connect.query(userAddSql,function (err,mysqldata) {
            if(err) throw err;
            console.log('数据存入成功!');
        });
        fs.readFile('login.html',function(err,data){
            if(err){
                throw err;
            }else{
                res.end(data);
            }
        });
        res.setHeader('Content-Type','text/html');
    });
});

在此之前,为了使每次存入的id都自加,运行js文件时,就读取数据库里最大的id,在它的基础上自加。(当然,这个方法有点笨,希望大神指点一下)

var  userAddSql_Params = "SELECT * FROM users.userinfo";

connect.query(userAddSql_Params, function(err, rows) {
    if (err) throw err;
    for (var i = 0; i < rows.length; i++) {
        var list = {
            id : rows[i].id,
            name : rows[i].name,
            password : rows[i].password,
            age : rows[i].age,
            sex : rows[i].sex,
            tel : rows[i].tel,
            nickname : rows[i].nickname
        };
        arr[i] = list;
    }
    idnum();
});

function idnum(){
    var arr2=[];
    for(var i = 0;i<arr.length;i++){
        arr2[i]=arr[i].id;
    }
    arr2.sort(function(a,b){return b-a});
    console.log('数据输出。。。');
    nextId=arr2[0]+1;
}

然后就是登录啦~~~填写登录用户名和密码点击按钮,提交数据,后台获取登录信息,与数据库里的用户名密码一一匹配,一旦有相符的,就登陆成功,跳转至 ''home.html'页面,并显示该用户的所有注册信息;如果没有匹配成功,跳转至 ''home.html'页面,显示登陆失败。

app.post('/home.html',function(req,res){
    var postData2 = "";
    req.addListener("data",function(postDataChunk){
        postData2 += postDataChunk;
    });
    req.addListener("end",function(){
        console.log("数据接收完毕!");

        connect.query(userAddSql_Params, function(err, rows) {
            if (err) throw err;
            for (var i = 0; i < rows.length; i++) {
                var list = {
                    id : rows[i].id,
                    name : rows[i].name,
                    password : rows[i].password,
                    age : rows[i].age,
                    sex : rows[i].sex,
                    tel : rows[i].tel,
                    nickname : rows[i].nickname
                };
                arr[i] = list;
            }
            flag = judges(postData2);        //判断用户名和密码是否正确
            console.log('判断密码是否匹配:'+flag);
        });

        fs.readFile('home.html',function(err,data){
            if(!flag){
                data = '<h2><a href="login.html">用户名或密码错误!点击这里重新登录</a></h2>';
                console.log('登录失败!');
            }else{
                data = '<ul style="list-style: none">'+'<li>登陆成功!</li>'+
                '<li>用户名:'+arr[list_num].name+'</li>'+
                '<li>昵称:'+arr[list_num].nickname+'</li>'+
                '<li>密码:'+arr[list_num].password+'</li>'+
                '<li>年龄:'+arr[list_num].age+'</li>'+
                '<li>性别:'+arr[list_num].sex+'</li>'+
                '<li>手机号:'+arr[list_num].tel+'</li>'+
                '</ul>'
            }
            if(err){
                throw err;
            }else{
                res.end(data);
            }
        });
        res.setHeader('Content-Type','text/html');
    });
});

不知道'home.html'页面如何获取数据库的内容,所以只能用字符串拼接

function judges(post){
    var json = qs.parse(post);
    console.log('当前需匹配的信息:',json);
    for(var s = 0;s<arr.length;s++){
        if((arr[s].name==json.name)&&(arr[s].password==json.password)){       //当用户名和密码都一致时,return flag
            list_num = s;
            flag = true;
            return flag;
        }else{
            flag = false;
        }
    }
}
原文地址:https://www.cnblogs.com/javencs/p/6606214.html