美文网首页基于node.js和Cocos Creator的开发
基于Node.js和Cocos Creator的开发 -实现用户

基于Node.js和Cocos Creator的开发 -实现用户

作者: Woodlouse | 来源:发表于2018-08-23 08:15 被阅读9次

    一,前端界面设计

    在注册界面设计一个比较简单的界面:一个输入用户名的输入框、一个输入密码和一个确认密码的输入框,最后是输入用户名/密码的提示语和一个确定按钮。输入框使用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<l; i++) {
            var elements = paramList[i].split('=');
            res[elements[0]] = elements[1];
        }
    
        return res;
    }
    
    router.register = function(req, res, callBack) {
        var params = getParams(req);
        // 参数校验 生成新的用户 todo...
    }
    
    module.exports = router;
    
    • 路由的使用
      在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
    下一篇 实现用户登录

    相关文章

      网友评论

        本文标题:基于Node.js和Cocos Creator的开发 -实现用户

        本文链接:https://www.haomeiwen.com/subject/wgribftx.html