NODEJS项目实践0.5 - 完结[inspector,git]

时间 2021-04-14

标签 javascript html java node nginx git github web redis mongodb 栏目 Git 繁體版

原文原文链接

1、前言

上节咱们主要应用了部分nodejs模块功能，本节咱们再演示下nodejs经常使用的debug功能，git使用，并发布到阿里云，就完成了 0.*系统的教程。javascript

GIT：https://github.com/xiaolulu/mynodejs.githtml

参考：http://www.upopen.cnjava

2、调试模块

debug，即开发过程当中的运行跟踪，是开发过程当中的不可缺乏的。如同页面端开发过程当中，若是没有chrome的inspect element，开发过程当中的问题排查，将是很是困难的。node

⋅⋅⋅nodejs目前经常使用的有两种类型的调试方案nginx

⋅⋅⋅一、以 webstorm为表明的开发编辑器类调试。webstrom自己支持很好的nodejs的开发体验，其也集成了测试功能，但这个不是我推荐的，自行百度 “ webstorm nodejs 调试 ”。git

⋅⋅⋅二、第二种是npm 下的 node-inspector，我使用的编辑器就是ubuntu下的gedit，即便在win7下使用的也是较古老的 edit plus，由于开发过程当中，不须要什么提示功能，webstorm自己很大，启动起来也占用很大的资源。相比之下，gedit + node-inspector，则更加轻量。github

⋅⋅⋅全局安装：web

npm install -g node-inspector

⋅⋅⋅启动redis

⋅⋅⋅ssh执行mongodb

node-inspector

⋅⋅⋅会提示

Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start debugging.

⋅⋅⋅再开一个终端，cd到项目目录，执行

node-dev –debug app.js

⋅⋅⋅上一节咱们讲node-dev，使用了其自动 restarting，若是不须要高度，执行 node-dev app.js便可。

⋅⋅⋅浏览器A打开

http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858

⋅⋅⋅浏览器A即会显示成debug模式，

⋅⋅⋅再用浏览器B打开咱们项目，浏览器A就会显示nodejs端的代码，调用起来和页面端同样同样的。因此用 node-inspector能够安装后便可快速上手，不须要任何配置，使用起来不需额外成本，这也是我推荐的缘由。

⋅⋅⋅以下图：

3、git

⋅⋅⋅git的经常使用命令可参见

http://www.upopen.cn/article/list?kind=git

⋅⋅⋅参照上面的教程，在 github上申请帐号、新建项目、添加本地生成的key以后，就能够开始使用了。

⋅⋅⋅cd到咱们的项目 root，执行

git init

⋅⋅⋅将本地文件夹初即化为 git目录，经过 ls -la，能够看到其下多了.ssh的隐藏文件夹，用于存放git信息

⋅⋅⋅执行

git remote add origin git@github.com:<your-github>/<your-project>.git

git config -- global user.name <your name>

git config – global user.email <your email>

⋅⋅⋅配置本身的git信息，用于提交的记录author。

git add *

⋅⋅⋅添加全部的文件到暂存区

git commit -m '个人第一个项目'

⋅⋅⋅将暂存区的文件提交到 git 目录

git push -u origin master

⋅⋅⋅按提示输入你的git账号及密码，将git 目录的文件提交到远程github上

⋅⋅⋅咱们即完成了本地代码的提交，具体命令解释及更多命令应用仍是参照

⋅⋅⋅http://www.upopen.cn/article/list?kind=git

4、服务器

⋅⋅⋅此处我使用的阿里云服务器，管理上简单些，选了个最低配置，1000/年，www.upopen.cn就是在阿里云上，七牛，百度也提供了这样的服务器。购买好服务器后，选择安装ubuntu系统。

⋅⋅⋅链接服务器

ssh <you server ip> -l root

⋅⋅⋅用户名先默认用 root便可。按提示输入密码便可登陆

⋅⋅⋅按项目约定安装，nginx / nodejs / mongo / git 等，并建立根目录

⋅⋅⋅克隆远程库到本地

git clone root git@github.com:xiaolulu/mynodejs.git

⋅⋅⋅拉取远程库的数据到本地

git pull origin master

⋅⋅⋅在此咱们使用了与上面git不一样的命令，其实也能够按init/ remote来，为了多使用几个命令，另外，第三
部分是新建库，此部主要是拉取。对后面的使用是同样的。

⋅⋅⋅一样的配置成功后，访问该你的服务器IP，站点即发布成功。

⋅⋅⋅若是有域名了更好，不过域名如今都须要备案了，须要些时间。

5、validate.js

⋅⋅⋅最后稍讲下页面端的js，本来不是咱们本系列的重点，和你们探讨下，如何写一个可复用、解耦的组件，小微框架的思想也不过如此。

⋅⋅⋅验证组件有不少种写法，但每每越高级的，限制性越大，咱们写一个轻量级的，抛砖引玉。

⋅⋅⋅首先咱们分析下验证功能，得出如下一些原则

⋅⋅⋅一、每一个输入项均可以配置验证规则

⋅⋅⋅二、可指定触发事件，如keyup或 change时触发验证

⋅⋅⋅三、可配置一些通用的规则如非空、最小值、最大值、只能输入数字、字母、电话、身份证等

⋅⋅⋅四、可配置自定义规则，如注册时，再次输入密码项的规则和密码项需一致。

⋅⋅⋅五、提供错误提示的回调，每每错误提示形式是一致的，不须要提供回调，咱们提供更自由的显示方式。

⋅⋅⋅以注册页面表单为例，定义输入框的规则。在root/static/module/issue/register.js下新增

javascriptvar username = $( '#username' ),
        password = $( '#password' ),
        email = $( '#email' );
    //定义验证规则
    var usernameRule = [{
            'noBlank': '请输入用户名',    //非空
            'min': [ 3, '用户名不能少于3位'],   //最小
            'max': [ 16, '用户名长度不能多于16位'],   //最大
            'typeEN': '用户名只能为字母及数字'     //准输入类型
        }, function( prompt ){  //错误提示回调
            $( '#usernameTip' ).html( prompt );
        }],
        passwordRule = [{
            'noBlank': '请输入密码',
            'self': function( cb ){ //自定义规则
                cb( '密码不能全为数字' );
                return isNaN( this.value - 0 );
            }
        }],
        email = [{
            'noBlank': '请输入注册邮箱',
            'typeEmail': '邮箱格式不正确'  //指定某定义规则
        }, function( prompt ){
            $( '#emailTip' ).html( prompt );
        }];

    //为指定指定表单添加指定触发事件的指定规则
    validate( username, [ 'keyup' ], usernameRule );
    validate( password, [ 'change' ], passwordRule );
    validate( email, [ 'foucsOut' ], emailRule );

⋅⋅⋅在root/static下新建 widget/，用于存放组件。其下新建 validate/validate.js

javascriptdefine(function(  ){

    var isArray = function( value ){
        return Object.prototype.toString.call( value ) == '[object ]'
    }

    /*定义经常使用规则，经过判断值是否符合规则返回true / false */
    var Regular = {

        //非空
        noBlank: function( value ){
            return !!value;
        },
        //最小
        min: function( value, rule ){
            return value.length >= rule;
        },
        //最大
        max: function( value, rule ){
            return value.length <= rule;
        },
        //中文、英文
        typeZE: function( value ){
            return /^[\u4E00-\u9FA5\uf900-\ufa2d\uFE30-\uFFA0a-zA-Z]+$/.test( value );
        },
        //英文、数字
        typeEN: function( value ){
            return /^[0-9|a-z|A-Z]+$/.test( value );
        },
        //数字
        typeNum: function( value ){
            return !isNaN( value );
        },
        //电话
        typePhone: function( value ){
            return /^1[0-9]{10}$/.test( value );
        },
        //email
        typeEmail: function( value ){
            return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value)
        }

    }
    //循环对规则进行验证，主要分类两种。一种是self，一种是已定义的经常使用规则。
    function check( rules, cb ){

        var rule,
            prompt,
            codex,
            value = this.value;
        for ( rule in rules ){

            prompt = rules[ rule ];
            isArray( prompt ) && ( codex = prompt[0] ) && ( prompt = prompt[1] );
            //这里是针对 即带值，又带提示的规则 [ 3, '用户名不能少于3位']
            //不然只带提示的规则，如非空，电话号码等值可定的规则
            if( rule == 'self' ){   //验证自定义的定义
                if( rules[ rule ].call( this, cb ) !== true ){
                    return false;
                };
            } else if( !Regular[ rule ]( value, codex ) ){  //验证上面定义过的规则
                cb( prompt )
                return false;
            }
            cb( '' );
        }
        return true;

    }
    //开始的验证函数，对某元素el添加指定事件events的验证规则rules，验证结果在cb中执行
    function validate( el, events, rules, cb ){

        if( rules ){

            cb = rules[1];
            rules = rules[0];
            $.each( events, function( k, event ){
                el.on( event, function(){
                    check.call( this, rules, cb );
                });

            });

        } else {
            //这里是对不用传触发条件，直接进行验证的规则。主要是针对form.submit时需一次验证全部输入框时
            cb = events[1];
            rules = events[0];
            return check.call( el.get( 0 ), rules, cb );

        }

    }

    return validate

})

⋅⋅⋅上面是写了一种较初级的验证函数，不过也能够解决大部分的验证场景，经常使用规则可自行添加。

6、结语

⋅⋅⋅至此，除了将数据存取部分和前台分离及redis外，咱们基本完成了0.1中所设定的功能，并应用到所列举的知识点，各知识点都是针对本项目使用了初级的功能。

⋅⋅⋅简单总结下，前面5节所讲过的知识点：

⋅⋅⋅一、安装、使用ubuntu，在Linux平台下开发项目，提升开发效率，扩展知识面。

⋅⋅⋅二、使用nodejs，基于express、ejs框架，实现的基础的静态页面访问

⋅⋅⋅三、使用nginx，搭建静态服务器，并作了代理转发及负载

⋅⋅⋅四、据项目优化目录结构，作到分类明晰，静态、项目资源分离，各文件作意义划分，便于后面扩展

⋅⋅⋅五、使用mongodb，实现了数据的存取，完成注册、登陆等操做的客户端 - 服务端的数据交互

⋅⋅⋅六、页面端使用requireJs来作模块管理并简单实现了验证模块。

⋅⋅⋅七、使用了npm 的 node-dev[自启动]、md5[加密]、domain[异步异常]、pm2[进程守护]、log4js[服务日志]、node-inspector[开发调试]等模块。

⋅⋅⋅八、实现了cookie和session的操做，保持用户登陆状态

⋅⋅⋅九、实现据登陆状态的页面访问准入控制权限。

⋅⋅⋅十、git操做，提交到服务器上。

⋅⋅⋅上面的知识在项目上应用的较初级，后面对每一个技术点都会作单独的文章补充，但愿对咱们都有所帮助，抛砖引玉，你们多作深刻研究。

⋅⋅⋅下一个系列的教程中，咱们会对上面这些知识有个逐步高级的应用，并增长markdown，页面静态化，nodejs的单元测试等，这块在upopen.cn的文章系统上已经应用。

⋅⋅⋅本部分的教程结束。谢谢！