基于Node.js+express+MySQL+Bootstrap实现的简单登录注册

初学node.js及express框架，想要利用express搭建一个服务端实现简单的注册功能，接下来开始简单叙述思想并附上实现代码（代码中已有详细注释，按如下模块顺序学习实现）。

• 基于Bootstrap实现登录注册切换页面及其交互，包括对输入信息的验证等
• 利用express搭建一个简单的web服务端，将页面注入服务端，实现通过服务器访问到该页面
• 利用MySQL建表实现数据持久化，进一步实现登录注册，能实现数据库数据的增删改查

---

遇到的问题及解决办法：

• 利用node.js中express.static()设置静态资源，资源放置的路径问题。
  解决办法： express.static是Express 提供的内置中间件，用来设置静态文件如：图片， CSS, JavaScript 等。可以在express安装包目录的同级目录中新建文件夹，用于放置本地的静态资源，这样就可以实现直接通过URL访问本地静态资源。（注：该文件夹中的目录结构也能体现在URL中）
  
  
  
• 数据库如何设计？
  解决办法： 利用MySQL，用户ID可以设置为自增序列，因此在插入时不用插入ID，更加方便！
  数据库user表设计如下：
  
  
  
  
• 如何将与数据库操作相关的数据及方法与服务器搭建相关代码分离
  解决办法： 可以利用node.js模块系统进行解决，初学者可以参考Node.js模块系统，将数据库操作相关的方法均封装在connectMysql.js中，然后在服务器端相关代码封装在service_index.js中，在service_index.js中引入connectMysql.js。
  具体实现方法如下：
  
  首先在被引用的connectMysql.js中设置一个被访问入口：

exports.connectMysql = function() {
   
    var testValue;
    function testFunc() {
   
       /* 此处省略具体方法及数据 */
    }
    return {
  'testFunc':testFunc,'testValue':testValue}
}

       然后在调用外部js（connectMysql.js）的service_index.js文件中引入connectMysql.js（注：注意路径问题，此处将两个文件放在同一文件夹下）

引入方法

var connectMysql = require('./connectMysql');

调用方法

var connection = connectMysql.connectMysql();//获取入口

/* 如下方式调用方法及变量 */
connection.queryData("SELECT * FROM user");

• node.js连接数据库、操作数据库均使用了回调函数，回调函数的确能解决I/O阻塞问题，但若想将回调函数的值作为函数的返回值却遇到了难题，直接利用return返回。

  解决办法： 初学者可以参考
  node.js如何获取异步函数回调的返回值。
  采用Async、Q、Promise等第三方库处理异步回调
  我在此处利用了第三方库——Async进行解决
  简单介绍一下，Async是第三方专门处理异步的库，能很好的控制异步流程，一个简单的例子读取两个文件的内容，并对合并结果进行处理的例子如下：

var async = require('async')
  , fs = require('fs');
async.parallel([
  function(callback){
   
    fs.readFile('/etc/passwd', function (err, data) {
   
      if (err) callback(err);
      callback(null, data);
    });
  },
  function(callback){
   
    fs.readFile('/etc/passwd2', function (err, data2) {
   
      if (err) callback(err);
      callback(null, data2);
    });
  }
],
function(err, results){
   
  // 在这里处理data和data2的数据,每个文件的内容从results中获取
  // results是一个包含结果的数组[data,data1]
});

另外，除了需要控制异步流程，为了获取回调函数异步处理后的值，还需要继续借助回调函数获取原本需要return的值，如下为一个例子：

function getTBS(callback){
   
    ng.get("http://tieba.baidu.com/dc/common/tbs",function(data,status,headers){
   
        callback(null,data)
    },headers,'utf8')
}
getTBS(function(err,result){
   
    if(err) throw err;
    console.log(result) //{"tbs":"a2bdd05a3fd08e561463670847","is_login":1}
});

用以上方法，利用回调函数获取数据是一种不错的解决办法。
在本实例中，以插入注册用户为例，具体解决办法如下：
首先，在connectMysql.js中，由于在添加用户时应该先查询是否已存在该用户，需要先进行查询操作，判断后再进行插入操作，因此需要引入async库控制流程，下为数据库操作方法：

function addUser(response, callback) {
   
        //顺序执行回调函数
        async.parallel([
                //查询是否已有该记录
                function(callback) {
   
                    var sql = 'SELECT passwd FROM user WHERE username="' + response.username + '"';
                    connection.query(sql, function(err, result) {
   
                        if (err) callback(err);
                        var res = false;
                        if (result.length == 0) {
                            res = true;
                        }
                        callback(null, res)
                    });
                }
            ],
            function(err, results) {
   
                //根据查询记录进行分别处理
                var flag = false;
                console.log(results);
                if (results[0]) {
                    var addSql = 'INSERT INTO user(userId,username,phonenum,passwd) VALUES(0,?,?,?)';
                    var addSqlParams = [String(response.username), String(response.phonenum), String(response.passswd)];
                    //增
                    connection.query(addSql, addSqlParams, function(err, result) {
   
                        if (err) {
                            console.log('[INSERT ERROR] - ', err.message);
                        }
                        console.log('--------------------------INSERT----------------------------');
                        //console.log('INSERT ID:',result.insertId);        
                        console.log('INSERT ID:', result);
                        console.log('-----------------------------------------------------------------\n\n');
                    });
                    flag = true;
                } else {
                    flag = false;
                }
                callback(null, flag);
            });
    }

另外，在service_index.js中需要利用回调函数异步调用上述addUser方法返回的结果值以进行进一步判断操作（用户已存在则提示用户已存在，成功插入则进入欢迎界面）

app.post('/register_post', urlencodedParser, function(req, res) {
   
    var response = {
        "phonenum": req.body.phonenum,
        "username": req.body.usernameR,
        "passswd": req.body.passswd1,
    };
    connection.addUser(response, function(err, result) {
   
        if (err) throw err;
        console.log(result);
        if (result) {
            //插入成功
            res.send("嘿，" + response.username + "，欢迎加入！");
        } else {
            res.send("用户已存在"); //成功则返回带有用户名的页面
        }
    });
})

• 连接数据库时出现Cannot enqueue Handshake after invoking quit.

  解决办法： 该问题出现的原因是在于node连接上mysql后如果因网络原因丢失连接或者用户手工关闭连接后，原有的连接挂掉，需要重新连接，但连着多次connect 或 end 都会报错，因此解决办法是在一会话中只进行一次连接和一次断开。
  
  
  

---

结果截图

登录界面


注册界面


登录输入


登录成功


登录失败


注册界面提示信息


注册失败


注册成功

---

附录（代码）：

1. register.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>注册/登录</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta