上手nodejs的正確姿勢

上手nodejs的正確姿勢。其實有點猶豫要不要寫這篇文章,因為自己nodejs也比較水,算是剛剛入門吧,但是想想比對nodejs一片空白又想入手的人來說,要好點,暫時寫出來,或許對一部分有些幫助。

【java和nodejs】

本職是java,所以不屑於nodejs,用js寫後端,感覺會java就夠瞭,但是偶然的機會接觸nodejs,感覺還是有其優點的。

【找一個應用場景】

最近要做一個公司官網,有些數據要從db中獲取,但是直接上java感覺有點重,另外對nodejs有點熟悉,想用java提供接口,nodejs獲取數據渲染頁面的方式,也就是mvc中nodejs負責vc,java負責m,所以拿這個項目做例子。

【nodejs和npm的安裝】

請自行百度,隨便搜瞭一篇可以做參考:https://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

nodejs的概念請自行百度,npm簡答的說類似java中的jar庫maven,也就是各種包管理的平臺,用戶可以提交自己的js庫,可以方便的下載js庫,基本上nodejs相關的js庫都可以在npm上找到。

【版本控制】

要養成使用版本控制的習慣,不管是大項目還是小項目,版本控制目前git和svn比較多,盡管個人認為svn適合公司開發使用,git適合開源軟件使用,但是現在的趨勢是不管大小公司一片熱潮的使用git。

公開項目可以托管到github,這個沒什麼好解釋的,私有項目在github上要收費,所以建議托管到https://git.oschina.net/,相當於國內的github。

【開源】

其實也有點糾結要不要把項目開源,畢竟是自己的官網,後來想想其實也沒啥,關鍵信息放ignore中,開源也好。

地址:https://github.com/uikoo9/_qiao_03_node

【項目結構】

11.png

webroot-dev:開發目錄

webroot-pro:構建目錄,用於線上發佈

logs:日志目錄

node_modules:nodejs相關js庫

server:後端js

static:前端靜態資源,img,fonts,css,js等

views:前端頁面

app.conf:bae相關

app.js:啟動js

config.json:配置文件

coolie.config.js:前端構建工具coolie的配置文件

package.json:nodejs配置文件

【bae】

隻在本地跑nodejs估計沒有什麼成就感,這裡順便說說bae,眾所周知,雲服務提供商比較多,阿裡雲,百度雲,騰訊雲,新浪雲等等,各有優勢吧,這裡介紹百度雲。

百度一下“百度開放雲”,然後註冊登錄,找到應用引擎新建,如下:

QQ截圖20161025211342.png

右側是收費信息,左側選擇所有模版,所有場景,自定義,部署信息見下:

QQ截圖20161025211654.png配置好之後就可以使用瞭,然後通過svn或者git下載初始代碼,

應該有三個文件:app.conf,server.js,package.json

其中server.js被我修改為瞭app.js,童瑤package.json中的node server.js也要對應修改為node app.js

當然本地調試的時候,直接cd到webroot-dev目錄,然後node app.js

【app.js】

正如java中有web.xml一樣,nodejs也有一個入口,就是app.js,這個文件名自己定,

啟動的時候請使用node app.js,

接上面百度bae說,bae會找到package.json,然後執行其內的node app.js,

來看看app.js內有什麼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 varexpress =require("express"); varbodyParser =require('body-parser'); varcookieParser =require('cookie-parser'); //app varapp=express(); app.use(cookieParser()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended:true})); //template vartemplate=require('art-template'); template.config('extname','.html'); app.set('viewengine','html'); app.set('views',__dirname+'/views'); app.engine('.html',template.__express); //static app.use('/static',express.static(__dirname+"/static",{maxAge:0})); //controller varfs=require("fs"); fs.readdirSync(__dirname+'/server/controller').forEach(function(name){ if(/Controller\.js$/.test(name))require(__dirname+'/server/controller/'+name)(app); }); //crossdomain app.use(function(req,res,next){ res.set('Access-Control-Allow-Origin','*'); next(); }); app.listen(18080);

require("express"),類似這樣的都是引入js包,與import jar相同,

不同的是,nodejs從node_modules中引入,之後詳細說。

1.前三行引入是三個js

2.app部分使用expressjs,也就是nodejs的一個mvc框架,類似ssh之流

3.template部分使用art-template,是一款支持node端和瀏覽器端的js模版,也可以自行搜索使用其他模版,類似jsp,freemarker之流

4.static部分,指定靜態資源目錄,該目錄下的請求不會經過路由

5.controller,指定controller,你也可以自己一個一個寫,也可以像這樣放到一個文件夾內,統一遍歷

6.cross domain,如果nodejs提供接口的話,跨域可以用設置header的方式,詳見:https://frontenddev.org/article/ajax-browser-cross-domain-request-access-control.html

7.app.listen,監聽端口,bae指定瞭18080端口。

【node_modules】

類似java中的lib目錄,不同的是查找方式,比較有意思,

nodejs會先去app.js同級去找node_modules這個文件夾,如果沒找到回去父級找,如果還沒找到回去父級的父級找,

如果遍歷下去都沒找到,回去全局定義的node_modules找,這裡有個小技巧瞭,

如果是團隊開發,那麼建議將node_modules放到各個項目平級的地方,當作一個單獨的項目維護比較方便,

而bae的啟動方式是,先在package.json同級找,找不到後按找package.json中的依賴關系去npm加載,

雖然沒有測試過,但是感覺從npm加載的方式會比較慢,特別是依賴比較多的時候,所以決定將node_modules文件夾放到瞭package.json同級的位置。

講到這裡,你就可以自己node app.js瞭,你會發現有報錯,告訴你缺少哪個包,

這個時候你就需要在當前目錄執行npm install express(舉例),npm會在當前目錄(webroot-dev/node_modules)中安裝該包,多次node app.js後你的包就安裝完全瞭,

由於使用瞭同級node_modules,所以沒必要去package.json中配置依賴瞭,如果想配置依賴自行百度吧。

【回顧一下】

到目前為止,已經講瞭下面這些紅框目錄和文件瞭:

QQ截圖20161025213649.png

logs文件夾由於代碼暫時沒用到log,所以放到以後講。

【目錄結構】

QQ截圖20161025213819.png

server文件夾:放node端的代碼,也就是後端代碼,同樣會有一個server-properties.json放後端相關的常量和配置

static文件夾:css,js按上圖規則放置即可

views文件夾:按上圖放置

簡單的說就是按模塊防止,同模塊下的css,js,html放到同名文件夾下,公用css,js放到lib中,當然這隻是一種習慣,也可以自由發揮。

 

發佈留言