近期nodejs-web开发的一些总结


在node web开发学习和实战的路上兜兜转转,经过半年的学习积累,对nodejs web开发开始觉得走上门道了,知道node文件该放在什么路径下,知道怎么分离路由,怎么往模板里塞数据,怎么构造数据库,建哪些字段,怎么构造json数据了。
由于我后端开发经验不足,所以上手node这门后端语言走了不少弯路,好在我的node系统项目终于完成,也算是小有收获。
关于如何快速学习一门新技术,如何快速地进行知识积累,以及进行项目技术选型,一些功能应该交给前端还是后端处理有了一些新的认识。

1、如何快速学习新的技术并进行知识积累

让程序员去学习一门新的技术有两种情况,自我驱动和外部驱动,自我驱动主要依靠自身的兴趣,对新的技术充满好奇所以迫切想去尝试,这种驱动没有时间上的压力。另一个原因是外部驱动,外部驱动是老大给你安排了一个新任务,比如说用node+mongodb开发一个内部系统,这种驱动就需要你能快速学习新技能,并快速完成所需技术的知识积累。

如何更快的上手?

看视频->看博文教程->clone优秀简单的demo练习->看官方api文档

为什么第一步是看视频而不是看书呢?之前的学习经验告诉我,看书容易产生注意力不集中,厚厚一本书看下去会产生情绪厌烦感,会让人误认为该技术多少坑多么难,从而产生心理抗拒害怕动手实践。

相反,第一步看视频尤其是讲核心理论和项目实践结合的视频,会让你迅速对这个技术着迷,觉得这样写代码还是很容易的,实现什么样的功能原来如此简单。看视频还有一个好处,你可以一边看老师讲解,一遍自己敲代码看效果,因为基本是填鸭式抄代码,不会遇到多少问题,自信心也上去了。这里推荐一个靠谱网站:慕课网,不少技术我都是从这里入门的。

第二步是看博文教程,谷歌搜索关键词node mongodb best practice可以搜出很多,推荐国外的博客教程,里面通常会附上博主在 github上的代码demo,把这些demo clone下来,自己安装运行跑起来,看看优秀的代码结构是怎样构建的,该功能别人是怎么实现和处理的。

第三步是看优秀开源demo,这个和上面第二步有些重复,看优秀博客教程的同时就会下载博主的示例代码研究,你也可以谷歌搜索关键词找github上star多的入门级demo.

做完以上三步,相信你已经具备了使用新技术构建项目的能力了,通过研究别人的demo也掌握了一些基础功能的实现,比如注册登录功能。那么,下面你可以大胆开始新项目的编码了!

在项目编码阶段,你需要做的就是看官方api了,我的建议是把api先粗略看过一遍,遇到api写的不够清楚的,可以借助google和stackoverflow搜索答案。

真的不需要看书吗?
NO!如果想快速上手做项目,我的建议是看视频比看书上手的快,但是书上的详细的理论知识是视频无法给与的,在我做完这个node项目时,我重新看《深入浅出node》时,我发现我理解的更加深刻了,也更容易理解其中的一些原理了。

2、如何进行项目的技术选型

代码结构的架构和工具、技术的选型。
代码结构的设计是很重要和必要的,代码结构紊乱会随着项目功能增加和复杂度增加产生很多的弊端,也不利于项目的维护。
我的做法是看别人的教程,别人的代码结构是怎样构建的,对于你的项目是否合适。我最终采用了MEAN架构

node开发现在还用mvc架构吗 node开发经验_nodejs

app里放后端代码,public为前端静态资源,config为路由文件,使用grunt启动项目,编译less,使用grunt插件让项目代码改变自动重启服务。

如何选型技术架构?

Node框架我选用了Express,原因很简单,Express相比Koa发展的更成熟更稳定,文档也更健全,教程资料也更多。对于新手来说,我的建议是选择更稳定资料更多的框架,不要说什么框架什么技术过时了,对于没接触做过项目的你来说这些框架、技术都很新。

如何选择开发工具?

node开发你只要学会代码调试工具就好,webstorm里的断点调试工具以及一些好用的node服务重启工具,可以参考我的Nodejs Web开发一些好用的工具这篇文章。

3、前后端如何分工

<?php echo('') ?>这样的代码,前端和后端同时维护一个文件,这样的处理方式糟糕透了。

使用模板语言,使用RESTful接口,后端来构造RESTful接口,前端在模板里添加数据,这样的方式让前后端分离开来,友好多了。

如果使用MEAN架构,前端的代码全部在/public文件夹里,放jade/css/js/images/less文件,后端代码在/app,/configapp.js里,处理数据逻辑和路由。

前端做 or 后端做 ?

这些功能放在后端处理更合适。

  • Favicon网页图标前端来设置还是后端?
    我以前的做法是前端在

<head></head>

  • 里嵌入一段

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">

  • 这样的代码,前端来设置网页图标。
    这样的弊端是要给所有

html/模板文件

  • 头部添加该

link

  • ,该做法纯碎人肉操作,对于html文件太多的项目,一个个手动添加容易遗漏也会死星人。
    现在的做法是放在后端来处理,

npm install serve-favicon

  • 安装网页图标模块,在

app.js

  • 里插入这段代码:
var favicon =               require(              'serve-favicon');            

'/public/images/favicon.ico'));

给项目全局使用该网页图标。

  • 当前页链接hover选中状态前端设置还是后端设置?
    我以前的做法是使用js的switch case判断url是什么给链接添加active样式。
    该做法的弊端是,当切换的链接太多时手动一个个增加case显得简单粗暴,而且一些链接是生成的,无法判断链接是什么。
    现在我的做法是交给后端判断链接,后端通过req.path判断当前链接,前端通过在模板里的class里判断后端的

req.path

  • 里的值和模板里数据是否一致添加active. 具体处理代码如下: /app/controllers/nav.js
function(nav){            

var result =               '';            

var

if(nav == _path){            

'active';            

else{            

'';            

                      }            

return

                  }


/app/views/pages/nav.jade

"/admin/line/my",              class=              "#{activeNav('/admin/line/my')}")
  • 分页列表前后端如何配合处理? 后端给前端提供totalPage和currentPage,前端给currentPage的元素的class加上active类。 下面是一些处理的核心代码: 模板代码:
ul.pagination            

                 li            

"/?p=0")            

"true") «            

                          span.sr-only Previous            

for (              var i =               0; i < ((totalPage >               5) ?               5

if (currentPage == (i+              1))            

                              li.active            

                                  span #{currentPage}            

else

                              li            

"/?p=#{i}") #{i+              1}            

                  - }            

if(totalPage>              5)            

                      li            

                          a ...            

                  li            

"/?p=#{totalPage-1}")            

"true") »            

                          span.sr-only Next


后端代码:

//获取每页数据

var

if(err){            

console.log(err)            

else{            

'abc',{            

'xxx',            

1),            

//向上舍入取整

Math.ceil(issues.length/count),            

                      issues: results            

                  })            

              }

4、学习node-web开发过程帮到我的资料

视频教程:

博客教程(入门级)

api文档

其他