基于Node.js和Cocos Creator的开发 【三，实现用户注册】

一，前端界面设计

在注册界面设计一个比较简单的界面：一个输入用户名的输入框、一个输入密码和一个确认密码的输入框，最后是输入用户名/密码的提示语和一个确定按钮。输入框使用CocosCreator很简单的就可以实现，可参考相关教程：
http://docs.cocos.com/creator/manual/zh/components/editbox.html?h=editbox
整体界面效果图如下：

01.png

操作步骤：

• 在Scene文件下新建register场景；
• 在Script文件下的Scene文件夹下新建JavaScript文件：register.js；
• 在register场景中添加用户脚本组件：register.js
• 在register场景中创建输入框、提示标签
• 代码编写

二，代码编写

1，常量的封装

首先将我们的服务器地址做为常量封装起来，在Script文件夹下创建util文件夹，在util中创建Constant.js文件，开发代码如下：

var Constant = {};

var baseURL = 'http://127.0.0.1:8181/';  //将此变量修改为自己服务器地址
Constant.REGISTER_URL = baseURL + 'register/';

module.exports = Constant;

2，register.js的开发

• 引入文件

var http = require('http');
var Constant = require('Constant');

• 定义引用变量
  在properties中定义如下变量：

passWordErrorHintLabel: {
        default: null,
        type: cc.Label
    },
    userNameErrorHintLabel: {
        default: null,
        type: cc.Label
    },
    userName: '',
    passWd: '',
    rePassWd : ''

• 实现用户名输入的处理

inputUserNameEnded: function(editbox, customEventData) {
    this.userName = editbox.string;
},

• 实现密码输入的处理

inputPassWordEnded: function(editbox, customEventData) {
     this.passWd = editbox.string;
},

• 实现确认密码的输入处理

reInputPWEnded: function(editbox, customEventData) {
    this.rePassWd = editbox.string;
    if (this.passWd == this.rePassWd) {
        return;
    }

    this._showErrorHint(this.passWordErrorHintLabel);
},

• 错误提示函数的实现

_showErrorHint: function(label) {
    this.passWordErrorHintLabel.node.active = false;
    this.userNameErrorHintLabel.node.active = false;

    // 显示提示
    label.node.active = true;

    // 设置计时器
    this.scheduleOnce(function(){
        label.node.active = false;
    }.bind(this), 2);
},

• 注册按钮响应函数

onRegister: function() {
    if (!this.userName || this.userName.length<1) {
        this._showErrorHint(this.userNameErrorHintLabel);
        return;
    }

    if (!this.passWd || this.passWd.length<1) {
        this._showErrorHint(this.passWordErrorHintLabel);
        return;
    }

    if (this.passWd != this.rePassWd) {
        this._showErrorHint();
    }

    this._startRegister();
},

• 发起请求函数

_startRegister: function() {
        var obj = {
            // node.js收到的url : /register/?userName=&passWord=123
            'url' : Constant.REGISTER_URL,
            'data' : {
                'userName' : this.userName,
                'passWord' : this.passWd
            },
            'success' : function(jsonData) {

            }.bind(this),

            'fail' : function() {

            }.bind(this)

        }
        
        http.request(obj);
    },

代码编写完成后，在CocosCreator编辑器中将register场景中的输入框输入完毕后的处理回调函数设置为相应的函数。

三，后端的实现

1，实现用户ID的管理

在数据库中设置一个标识当前可用用户ID的变量，每次新建用户时获取到此变量标识的值，让后将其增加1。

• 在后端代码中的Server创建util文件夹，新建constData.js文件：

var constData = {
    'GLOBAL_USER_ID' : 'userId.global'
};

module.exports = constData;

• 用户ID的初始化处理
  在redis.js文件中，引入常量文件：
  const constData = require('../util/constData');
  修改数据库连接后的处理如下：

client.on('ready', function(error){
    if (error) {
        console.error('start redis error, ' + error);
        return;
    }

    if (redisDB.get(constData.GLOBAL_USER_ID, function(err, result){
        if(err) {
            console.error('get global_user_id err', err);
            return;
        }
        if (result) {
            // 已经设置过了，退出
            return;
        }

        // 设置起始用户ID
        const startUserId = 100001;
        redisDB.set(constData.GLOBAL_USER_ID, startUserId, null);
    }));
})

• redis.js文件中编写增量指定变量的函数

redisDB.incrby = function(key, incrNum, callBack) {
    client.incrby(key, incrNum, function(number) {
        callBack && callBack(num);
    })
}

2，路由

在开发前端代码时，访问地址已经由
http://127.0.0.1:8181/
修改为
http://127.0.0.1:8181/register/
访问路径上加上了register，在后端需要根据前端的访问地址进行不同的处理，这就涉及到了路由。

• 在Server目录下新建文件夹router，在router中新建router.js，开发以下代码：

/*
    File : route.js
    Function : 路由处理
*/
const url = require('url');
var router = {};

var getParams = function(req) {
    // 获取请求参数
    var params = url.parse(req.url).query;
    var paramList = params.split('&');
    var res = {};

    for(var i=0, l=paramList.length; i

• 路由的使用
  在httpServer.js中引入需要的文件：

const router = require('./router/router');
const url = require('url');

修改createServer函数为如下形式：

http.createServer(function(req, res) {
    var pathname = url.parse(req.url).pathname;
    // 去掉/
    pathname = pathname.replace(/\//g, '');

    var response = {
        'error' : 1,
        'note' : 'Not found path'
    };
    if(router[pathname]) {
        router[pathname](req, res, function(resData) {
            res.write(JSON.stringify(resData));
            res.end();            
        });
    }else{
        res.write(JSON.stringify(response));
        res.end();
    }
}).listen(8181);

至此，我们的后端实现了路由访问，在有新的访问路径需要时只需要在router.js文件添加相应的和路径同名的函数即可。

3，创建新用户

创建新用户，即为在数据库中生成一天新的用户记录，我们暂且只设定用户的name、passWord、coin、diamond、head、friends属性。

• 在constData.js中定义新的键值：
  'USER_BASEK_KEY' : 'user:'
• 新建文件夹business，在其下新建user.js文件，开发代码

/*
    File : user.js
    Function : 用户相关的逻辑t
*/
const redisDB = require('../db/redis');
const constData = require('../util/constData');

var user = {};

user.createUser = function(userName, passWord, callBack) {
    var createUser = function(userId) {
         // 获取到用户ID后创建用户
         var userKey = constData.USER_BASEK_KEY + userId;
         var userData = {
             'name' : userName,
             'passWord' : passWord,
             'coin' : 0,
             'diamond' : 0,
             'head' : '',
             'friends':[]
         }

        //  数据库创建用户
         redisDB.hmset(userKey, userData, function(err, result) {
            //返回给用户的数据
             var data = {
                 'userId' : userId,
                 'name' : userName,
                 'token' : '' //暂且为空，后续实现
             }
             if(err) {
                data = {
                    'error' : err,
                    'note' : 'create user error!!'
                }
                callBack(data);
                return;
             }
             callBack(data);
         })
    }

    redisDB.incrby(constData.GLOBAL_USER_ID, 1, function(err, userId) {
        if(err) {
            var data = {
                'error' : err,
                'note' : 'create user error!!'
            }
            callBack(data);
            return;
        }

        createUser(userId);
    });
}

module.exports = user;

• 调用创建用户的接口
  在router.js中添加对user文件的调用：
  const user = require('../business/user');
  修改router.register函数如下：

router.register = function(req, res, callBack) {
    var params = getParams(req);
    // 参数校验 todo...
    user.createUser(params['userName'], params['passWord'], function(data) {
        callBack && callBack(data);
    })
}

四，前端展示注册结果

这一步我们把从后端接收到的注册结果信息展示到一个页面上：

• UI
  新建一个节点，将其设置为不可见。在这个节点下包含一个透明度为230的单色精灵和一个用于展示注册结果信息的label:

  
  
  03.png

• 代码开发
  相关变量定义：

registerSuccessLabel: {
    default: null,
    type: cc.Label
},
registerInfoNode: {
    default: null,
    type: cc.Node
},

• 完善_startRegister函数，加入访问成功失败的回调处理

_startRegister: function() {
    var obj = {
        'url' : Constant.REGISTER_URL,
        'data' : {
            'userName' : this.userName,
            'passWord' : this.passWd
        },
        'success' : function(jsonData) {
            this._onRegisterSuccess(jsonData);
        }.bind(this),

        'fail' : function() {
            this._onRegisterFail(jsonData);
        }.bind(this)

    }
    
    http.request(obj);
},

• 实现回调函数

_onRegisterSuccess: function(jsonData) {
    this.registerInfoNode.active = true;
    console.log('_onRegisterSuccess come in jsonData = ' + JSON.stringify(jsonData));
    var info = '注册成功\n用户名：' + jsonData['name'] + '\n用户ID：'+ jsonData['userId'] + '\n牢记自己的信息\n';
    console.log('info = ' + info);
    this.registerSuccessLabel.string = info;
},

_onRegisterFail: function(jsonData) {
    console.log('_onRegisterFail come in jsonData = ' + JSON.stringify(jsonData));
},

至此，启动服务器，运行CocosCreator，填写注册信息后即可看到注册成功页面。

---

代码在这儿

---

上一篇 node.js操作redis
下一篇 实现用户登录