Nodejs-Web开发的一些总结

时间 2019-12-09

标签 nodejs web 开发一些总结栏目 HTML 繁體版

原文原文链接

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

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

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

如何更快的上手？

个人建议是看视频->看博文教程->clone优秀简单的demo练习->看官方api文档。前端

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

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

第二步是看博文教程，谷歌搜索关键词node mongodb best practice能够搜出不少，推荐国外的博客教程，里面一般会附上博主在 github上的代码demo,把这些demo clone下来，本身安装运行跑起来，看看优秀的代码结构是怎样构建的，该功能别人是怎么实现和处理的。程序员

第三步是看优秀开源demo,这个和上面第二步有些重复，看优秀博客教程的同时就会下载博主的示例代码研究，你也能够谷歌搜索关键词找github上star多的入门级demo.
作完以上三步，相信你已经具有了使用新技术构建项目的能力了，经过研究别人的demo也掌握了一些基础功能的实现，好比注册登陆功能。那么，下面你能够大胆开始新项目的编码了！
在项目编码阶段，你须要作的就是看官方api了，个人建议是把api先粗略看过一遍，遇到api写的不够清楚的，能够借助google和stackoverflow搜索答案。github

那么，真的不须要看书吗？web

NO！若是想快速上手作项目，个人建议是看视频比看书上手的快，可是书上的详细的理论知识是视频没法给与的，在我作完这个node项目时，我从新看《深刻浅出node》时，我发现我理解的更加深入了，也更容易理解其中的一些原理了。mongodb

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

这个技术选型包括项目代码结构的架构和工具、技术的选型。
代码结构的设计是很重要和必要的，代码结构紊乱会随着项目功能增长和复杂度增长产生不少的弊端，也不利于项目的维护。

个人作法是看别人的教程，别人的代码结构是怎样构建的，对于你的项目是否合适。我最终采用了MEAN架构

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

如何选型技术架构？

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

如何选择开发工具？

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

三、先后端如何分工

当我开发第一个与后端有较多合做的项目时，当时用的是PHP，因此写PHP的同窗在个人html代码里嵌入了不少<?php echo('') ?>这样的代码，前端和后端同时维护一个文件，这样的处理方式糟糕透了。

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

若是使用MEAN架构，前端的代码所有在/public文件夹里，放jade/css/js/images/less文件，后端代码在/app,/config和app.js里，处理数据逻辑和路由。

前端作 or 后端作？

在没作该node项目前，一些功能我都会以为前端能够实现，在作完node项目后，个人理解是这些功能放在后端处理更合适。

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');
app.use(favicon(__dirname + '/public/images/favicon.ico'));

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

当前页连接hover选中状态前端设置仍是后端设置？

我之前的作法是使用js的switch case判断url是什么给连接添加active样式。

该作法的弊端是，当切换的连接太多时手动一个个增长case显得简单粗暴，并且一些连接是生成的，没法判断连接是什么。

如今个人作法是交给后端判断连接，后端经过req.path判断当前连接，前端经过在模板里的class里判断后端的req.path里的值和模板里数据是否一致添加active.

具体处理代码以下：

/app/controllers/nav.js

res.locals.activeNav = function(nav){
        var result = '';
        var _path = req.path;
        if(nav == _path){
            result = 'active';
        }else{
            result = '';
        }
        return result;
    }

/app/views/pages/nav.jade

a(href="/admin/line/my",class="#{activeNav('/admin/line/my')}")

分页列表先后端如何配合处理？

后端给前端提供totalPage和currentPage，前端给currentPage的元素的class加上active类。

下面是一些处理的核心代码：

模板代码：

ul.pagination
   li
        a(href="/?p=0")
            span(aria-hidden="true") «
            span.sr-only Previous
    - for (var i = 0; i < ((totalPage > 5) ? 5 : totalPage); i++){
        if (currentPage == (i+1))
                li.active
                    span #{currentPage}
            else
                li
                    a(href="/?p=#{i}") #{i+1}
    - }
    if(totalPage>5)
        li
            a ...
    li
        a(href="/?p=#{totalPage-1}")
            span(aria-hidden="true") »
            span.sr-only Next

后端代码：

//获取每页数据
    var results = issues.slice(index,index+count);
    if(err){
        console.log(err)
    }else{
        res.render('abc',{
            title: 'xxx',
            currentPage: (page+1),
            //向上舍入取整
            totalPage: Math.ceil(issues.length/count),
            issues: results
        })
    }

Nodejs-Web开发的一些总结

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

如何更快的上手？

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

如何选型技术架构？

如何选择开发工具？

三、先后端如何分工

前端作 or 后端作？

四、学习node-web开发过程帮到个人资料

视频教程：

博客教程(入门级)

api文档

其余

Nodejs-Web开发的一些总结

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

如何更快的上手？

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

如何选型技术架构？

如何选择开发工具？

三、先后端如何分工

前端作 or 后端作 ？

四、学习node-web开发过程帮到个人资料

视频教程：

博客教程(入门级)

api文档

其余

前端作 or 后端作？