1. 程式人生 > >nodeJS實現一個在線填表應用

nodeJS實現一個在線填表應用

簡單 文本 ring 原型 con 方法 change sync func

 1、構建一個web服務器

  以前玩php和jsp時用過Apache、湯姆貓服務器,nodejs則有不同,他是需要自己createServer。

  

技術分享
//server.js
var http = require(‘http‘); http.createServer(function(req,res){ res.writeHead(200,{‘Content-Type‘:‘text/plain‘}); res.end(‘so easy!‘); }).listen(1111,‘127.0.0.1‘); console.log(‘server runing at 127.0.0.1:1111...‘);
技術分享

技術分享  在瀏覽器訪問127.0.0.1:1111可以看到so easy!字樣。

  這裏用到的時http模塊到createServer方法,node的模塊有三種,自有模塊,npm模塊,文件模塊。自有模塊直接用require,不帶路徑;npm模塊先要npm install, 然後像自有模塊那樣引入;文件模塊就是自己創建到模塊,要帶路徑引入。

  2、從請求對象中獲取東西

  上面到req是一個請求對象,包含了請求相關到信息,可以console.log出來看看,比較多,這裏簡單介紹。

  (1)req.url

  訪問http://127.0.0.1:1111其值為/

  訪問http://127.0.0.1:1111/index/index.html?a=1#fd其值為/index/index.html?a=1(註意這裏沒有hash)

  一般的,用url模塊解析其路徑,用querystring模塊解析其查詢參數,當然自己去分解字符串也是可以的。

  3、作出響應

  1中到res是http.ClientRequest 類的一個實例,他有很多方法。這裏介紹兩個。

  (1)writeHead(status,{‘key‘:value});這個方法用於寫響應header頭。

  

技術分享
var http = require(‘http‘);

http.createServer(function(req,res){
    res.writeHead(200,{‘Content-Type‘:‘text/html‘});
    res.end("<html><head><meta charset=‘utf-8‘></head><body><h2>歡迎關註大~熊</h2></body></html>");
}).listen(1111,‘127.0.0.1‘);

console.log(‘server runing at 127.0.0.1:1111...‘);
技術分享

  如果這樣寫,得到的響應的head中Content-Type就是text/html,響應數據作為html代碼被解析。

  (2)end()

   上面到這個例子已經用到這個方法,作用是將數據寫到響應報文的數據段。

  4、讀寫文件

  讀寫文件用到的時fs模塊。

  (1)讀文件

    fs.readFile(file[, options], callback):異步讀文件,回調函數有兩個參數,第一個錯誤信息,第二個是讀到的數據。數據可能是一個buffer,也可能是一個字符串。取決於options中到encoding

    fs.readFileSync(file[, options]):同步讀文件,返回讀到到數據

    具體可以看看文檔說明,關於同步和異步,大~熊理解不太深入,也經常因為這個犯錯。同步是一種阻塞式的,必須讀完了後邊的事才可以做,異步非阻塞的,一件事沒幹完後邊的事就可以做。

    我在項目根目錄下建了一個1.txt文件,內容為“歡迎關註大~熊”;   

var fs = require(‘fs‘);

console.log(fs.readFileSync(__dirname+‘/1.txt‘,‘utf8‘));  //指定了encoding
//歡迎關註大~熊

  

var fs = require(‘fs‘);

console.log(fs.readFileSync(__dirname+‘/1.txt‘));     //沒有指定encoding
//<Buffer e6 ac a2 e8 bf 8e e5 85 b3 e6 b3 a8 e5 a4 a7 ef bd 9e e7 86 8a>

  異步方法是類似的

var fs = require(‘fs‘);

fs.readFile(__dirname+"/1.txt",‘utf8‘,function(err,data){
    console.log(data);
})

  (2)寫文件

    fs.writeFile(file, data[, options], callback),異步api,data可以是buffer也可以時String

    fs.writeFileSync(file, data[, options]),同步api

    

var fs = require(‘fs‘);

fs.writeFileSync(__dirname+‘/1.txt‘,‘大熊真帥!‘,‘utf8‘);

  可以看到文件內容變成了‘大熊真帥!“.

  5、node-xlsx模塊和socket.io模塊

  前者是幫助我們處理excel表的,請參看https://github.com/mgcrea/node-xlsx

  後者時封裝了實時通信的api,請參看https://github.com/socketio/socket.io

二、在線填表應用開發篇

  1、完成效果

  技術分享

  這裏在錄制gif時還存在一個問題,就是a用戶修改某一行中,b用戶中不會立即顯示更改後的數據,現已經改正,原來的時單播事件,改成廣播就好了。原計劃將代碼都貼出來分析分析,但是考慮到放一大段代碼似乎不太好,所以將其放到了github上https://github.com/yibingxiong/onlinetable/ ,下面只簡單講一下思路,如果你需要看看源碼可以clone,我的github目前沒有star,如果你能成為第一個star,大~熊非常高興。

  2、基本思路

  (1)用戶初次鏈接時向服務器發送一個connectin事件,這個事件是調用io()方法自動發送給服務器的,無需主動調用,服務器接受到這個事件後讀取excel文件,並用nodex-xlsx解析,然後調用自定義的一個changeStatus方法,這個方法時根據正在被修改的行的數組isOptRows(這個數組是所有用戶共享的,存儲正在被修改的行到行號)為每一行增加一個標識,0表示沒人在修改,1表示有人在修改。處理完成後向客戶端單播一個serverChange事件,同時攜帶處理後的數據,客戶端根據這些數據渲染出表格,將狀態為0的行置於可編輯狀態,狀態為1的行置於不可編輯狀態。

  (2)用戶點擊編輯時,向服務器發送一個enter事件,攜帶的數據為被編輯的行號。然後將該行數據變成編輯狀態,就是變成文本框,按鈕變成完成。服務器收到enter事件後,取得其中的行號,加入到isOptRows數組,然後廣播一個事件broadcast,攜帶上行號,告知所有用戶"這個行有人在編輯,你不要編輯了",客戶端收到這個事件,將這一行變成不可編輯狀態。

  (3)用戶點擊完成後向服務器發送一個datachange事件,攜帶上修改後到新數據,同時將這一行變成正常狀態。服務器收到datachange事件後,將對應行的數據更新,寫回到文件。寫完後發一個serverChange事件,攜帶上新的數據。同時從isOptRows中溢出完成修改的行的行號。

  (4)思路總結一下,實現還是比較的簡單,不過用這個例子還是可以學習下如何進行實時通信,socket.io其實就是在服務器和客戶端建立了一個交流的通路。如果將服務器看作領導,客戶端看作員工,可以理解為領導可向單個員工發出指令(單播),也可以開個員工大會,向所用員工發出指令(廣播),反過來,員工也可以向領導反映情況。

三、談談入門nodejs的感受

  javascript是個奇葩,nodejs更是一個奇葩。javascript裏邊可以一個函數裏邊套一個函數,他的繼承是基於原型的,他的數組時動態變化的......而nodejs將這門奇葩到語言搬到了服務端,奇葩歸奇葩,但是發自內心的說,他們非常靈活,也比較好玩。

  關於nodejs適合io密集什麽的我不懂,但是感覺入門還是比較容易的,我看的是清華出版到Node.js開發實戰詳解(不得不吐槽:這本書的錯誤真多),兩三天就入門了。看了下後面的章節,感覺後邊難度會有所加大,不過萬物都是相通的,他和其他的比如php之類的還是會有很多共性的。

  不得不提一下jade(現在叫pug)提供的模板引擎,他將我們美麗的html搞成了那個樣子確實讓人很不適應啊,相比之下更喜歡ejs這個模板引擎,發現他jsp長得好像啊,好像遇到舊友一般。

  剛入門nodejs,關於文中的一些錯誤和不當之處還請各位園友多多批評指正。最後,如果你喜歡半血的話,請關註他。 

nodeJS實現一個在線填表應用