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
        })
    }