上节我们主要应用了部分nodejs模块功能,本节我们再演示下nodejs常用的debug功能,git使用,并发布到阿里云,就完成了 0.*系统的教程。
GIT:https://github.com/xiaolulu/mynodejs.git
debug,即开发过程中的运行跟踪,是开发过程中的不可缺少的。如同页面端开发过程中,如果没有chrome的inspect element,开发过程中的问题排查,将是非常困难的。
⋅⋅⋅nodejs目前常用的有两种类型的调试方案
⋅⋅⋅1、以 webstorm为代表的开发编辑器类调试。webstrom本身支持很好的nodejs的开发体验,其也集成了测试功能,但这个不是我推荐的,自行百度 “ webstorm nodejs 调试 ”。
⋅⋅⋅2、第二种是npm 下的 node-inspector,我使用的编辑器就是ubuntu下的gedit,即使在win7下使用的也是较古老的 edit plus,因为开发过程中,不需要什么提示功能,webstorm本身很大,启动起来也占用很大的资源。相比之下,gedit + node-inspector,则更加轻量。
⋅⋅⋅全局安装:
npm install -g node-inspector
⋅⋅⋅启动
⋅⋅⋅ssh执行
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可以安装后即可快速上手,不需要任何配置,使用起来不需额外成本,这也是我推荐的原因。
⋅⋅⋅如下图:
⋅⋅⋅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:/.git
⋅⋅⋅将本地目录和远程目录关联起来
git config -- global user.name
git config – global user.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
⋅⋅⋅此处我使用的阿里云服务器,管理上简单些,选了个最低配置,1000/年,www.upopen.cn就是在阿里云上,七牛,百度也提供了这样的服务器。购买好服务器后,选择安装ubuntu系统。
⋅⋅⋅连接服务器
ssh -l root
⋅⋅⋅用户名先默认用 root即可。按提示输入密码即可登录
⋅⋅⋅按项目约定安装,nginx / nodejs / mongo / git 等,并创建根目录
⋅⋅⋅克隆远程库到本地
git clone root git@github.com:xiaolulu/mynodejs.git
⋅⋅⋅拉取远程库的数据到本地
git pull origin master
⋅⋅⋅在此我们使用了与上面git不同的命令,其实也可以按init/ remote来,为了多使用几个命令,另外,第三 部分是新建库,此部主要是拉取。对后面的使用是一样的。
⋅⋅⋅同样的配置成功后,访问该你的服务器IP,站点即发布成功。
⋅⋅⋅如果有域名了更好,不过域名现在都需要备案了,需要些时间。
⋅⋅⋅最后稍讲下页面端的js,原本不是我们本系列的重点,和大家探讨下,如何写一个可复用、解耦的组件,小微框架的思想也不过如此。
⋅⋅⋅验证组件有很多种写法,但往往越高级的,限制性越大,我们写一个轻量级的,抛砖引玉。
⋅⋅⋅首先我们分析下验证功能,得出以下一些原则
⋅⋅⋅1、每个输入项都可以配置验证规则
⋅⋅⋅2、可指定触发事件,如keyup或 change时触发验证
⋅⋅⋅3、可配置一些通用的规则如非空、最小值、最大值、只能输入数字、字母、电话、身份证等
⋅⋅⋅4、可配置自定义规则,如注册时,再次输入密码项的规则和密码项需一致。
⋅⋅⋅5、提供错误提示的回调,往往错误提示形式是一致的,不需要提供回调,我们提供更自由的显示方式。
⋅⋅⋅以注册页面表单为例,定义输入框的规则。在root/static/module/issue/register.js下新增
var 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
define(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
})
⋅⋅⋅上面是写了一种较初级的验证函数,不过也可以解决大部分的验证场景,常用规则可自行添加。
⋅⋅⋅至此,除了将数据存取部分和前台分离 及redis外,我们基本完成了0.1中所设定的功能,并应用到所列举的知识点,各知识点都是针对本项目使用了初级的功能。
⋅⋅⋅简单总结下,前面5节所讲过的知识点:
⋅⋅⋅1、安装、使用ubuntu,在Linux平台下开发项目,提高开发效率,扩展知识面。
⋅⋅⋅2、使用nodejs,基于express、ejs框架,实现的基础的静态页面访问
⋅⋅⋅3、使用nginx,搭建静态服务器,并做了代理转发及负载
⋅⋅⋅4、据项目优化目录结构,做到分类明晰,静态、项目资源分离,各文件做意义划分,便于后面扩展
⋅⋅⋅5、使用mongodb,实现了数据的存取,完成注册、登录等操作的客户端 - 服务端的数据交互
⋅⋅⋅6、页面端使用requireJs来做模块管理并简单实现了验证模块。
⋅⋅⋅7、使用了npm 的 node-dev[自启动]、md5[加密]、domain[异步异常]、pm2[进程守护]、log4js[服务日志]、node-inspector[开发调试]等模块。
⋅⋅⋅8、实现了cookie和session的操作,保持用户登录状态
⋅⋅⋅9、实现据登录状态的页面访问准入控制权限。
⋅⋅⋅10、git操作,提交到服务器上。
⋅⋅⋅上面的知识在项目上应用的较初级,后面对每个技术点都会做单独的文章补充,希望对我们都有所帮助,抛砖引玉,大家多做深入研究。
⋅⋅⋅下一个系列的教程中,我们会对上面这些知识有个逐步高级的应用,并增加markdown,页面静态化,nodejs的单元测试等,这块在upopen.cn的文章系统上已经应用。
⋅⋅⋅本部分的教程结束。谢谢!
扫码关注w3ctech微信公众号
厉害呀,大神求带
共收到1条回复