畢業(yè)設計-多類型互聯(lián)網前端開發(fā)技術的研究與應用

1、鹽城師范學院畢業(yè)設計畢業(yè)設計多類型互聯(lián)網前端開發(fā)技術的研究與應用學生姓名 學 院 專 業(yè) 班 級 學 號 指導教師 年 月 日多類型互聯(lián)網前端開發(fā)技術的研究與應用摘 要隨著移動互聯(lián)技術的快速發(fā)展，Web標準不斷完善，用戶對產品體驗的要求日益攀升，導致Web應用交互日趨復雜。課題采用當今服務端最熱門的Node.js技術，在保持了與傳統(tǒng)技術相互兼容的前提下，Node.js采用了基于事件驅動的異步式I/O模型，結合Node.js的模塊管理工具NPM,實現(xiàn)了在處理響應事件、多個并發(fā)請求上的突破，并保持了流動性的用戶體驗，對降低HTTP服務器的并發(fā)壓力、提高吞吐量方面有著極其重要的作用?！娟P鍵詞】Nod

2、e.js；異步式I/O；高并發(fā)；事件驅動； Design and development of universal salary management system oriented to AndroidAbstractWith the rapid development of mobile Internet technology, Web standards continue to improve, the users demand for product experience is increasing, resulting in Web application interaction i

3、s becoming increasingly complex. Topic by todays server the most popular node.js technology, while maintaining the premise of mutually compatible with traditional technology, node.js adopted based on event driven asynchronous I / O model, combined with node.js module management tool - NPM, the reali

4、zation of the response to the event, multiple concurrent requests on the breakthrough in the treatment, and to maintain the liquidity of the user experience, to reduce the concurrent pressure of the HTTP server, has an extremely important role to improve the throughput.Key words Node.js; Asynchronou

5、s I/O; High concurrency; Asynchronous I/O; Event driven;目 錄TOC o 1-3 h u HYPERLINK l _Toc20608 1 緒論 4。第四：對前端人員Javascript技能要求更高，促使團隊技能提升。但是，單頁應用不利于SEO的優(yōu)化，同時存在初次加載時間也相對較多，cookie的保存等問題。5.1 語音咨詢請求服務5.1.1 語音咨詢架構設計語音咨詢業(yè)務提供用戶在線下單服務，最核心的功能是當前消息的實時性分發(fā)，信息的推送使用融云提供的即時通訊云服務。當用戶選擇服務后(先付費或者后付費)，將當前訂單推送到律師客戶端，由律師搶

6、單完成后續(xù)服務。整體的架構主要分為三部分:第一：使用融云提供的推送服務，使相應的業(yè)務能夠快速獲得即時通訊的能力以及一些場景的需要。第二：基于Node.js內置的HTTP服務器，采用異步式的I/O操作，session 存儲以及Node.js的數據庫更新服務。第三：HTTP服務器接收到用戶的請求后，服務器將會直接調用基于Node 的讀取服務，從而進行下一步的任務。圖5-1 語音咨詢架構設計5.1.2 API接口封裝表5-1用戶登錄接口接口名稱用戶登錄接口接口格式http post接口描述用戶登錄接口urlhttp:/user/login表5-2請求消息字段名稱必填說明phone手機號M+86中國大

7、陸verifyCode手機驗證碼M手機驗證碼表5-3響應消息字段名稱必填說明Code響應結果Mok988-請求參數錯誤desp響應描述M描述tokentokenN登錄信息表5-4產品詳情接口接口名稱產品詳情接口接口格式http post接口描述產品詳情接口urlhttp:/user/cardDetailInfo表5-5請求消息字段名稱必填說明token登錄信息M獲取登錄信息productId產品編號M產品ID表5-6響應消息字段名稱必填說明Code響應結果Mok988-請求參數錯誤desp響應描述M描述tokentokenN登錄信息5.1.3異步式I/O請求服務Var request = fu

8、nction(service, method, _args, callback)global.pool.acquire(function(err, connection) /從RPC連接線程池中獲取活動連接（如果無活動連接，則返回新建立的連接） /處理RPC的請求參數 if(!_args) / 如果無參數則建立一個空數組 _args = ; /空數組 console.log(RPC TO + method + : + _args); /打印相應信息 _args.push(function(err, response) /在請求參數的最后加上回調方法 if(err) /等RPC異步請求返回之后執(zhí)

9、行 console.log(err) var r = JSON.parse(response); /轉為響應的json字符串 console.log(rpc response : + response); if(r.status & r.status.code != 1) /判斷返回數據在業(yè)務層面的正確性 callback(r.status.desp, r); / 回調具體的業(yè)務回調邏輯處理函數 else callback(err, r); /執(zhí)行錯誤回調函數 /取消連接，釋放會連接池 global.pool.release(connection); ); if(_args) /請求RPC接口

10、 connection.clientservicemethod.apply(connection.clientservice,_args); else connection.clientservicemethod.apply(connection.clientservice); );module.exports = request;消息隊列推送的實現(xiàn)：引入amqp模塊，amqp模塊遵循了AMQP 協(xié)議13，該消息隊列服務器提供了Node下運行的的客戶端環(huán)境。因此Node.js的 程序可以通過該模塊連接并操作Redis消息隊列；HTTP 服務器在接收到不同的請求之后，會根據路由規(guī)則做出不同的處理

11、，這些處理函數被封裝在相應的回調函數中，只要匹配相應的路由關鍵字，該消息才會被添加到消息隊列中。5.1.4 路由設計路由采用REST風格，Express支持REST風格的請求方式，同時Express是基于Node.js的非常優(yōu)秀的服務端開發(fā)框架。通過URL指定資源，操作包括獲取、創(chuàng)建、修改以及刪除，與之對應的則是HTTP協(xié)議中的GET請求、POST請求、PUT請求以及DELETE請求。相關路由設計如下:表5-1 基于Express的路由設計語音咨詢路由設計route.post(/ ,callback)首頁route.get(/login, callback)登錄route.get(/mqttC

12、ount, callback)連接融云服務route.get(/orderList, callback)語音咨詢列表route.get(/orderServices, callback)單頁應用訂單頁route.get(/orderDetails, callback)訂單詳細頁route.get(/orderPay, callback)支付頁面5.1.5 核心功能模塊(1)登錄模塊loginNode端接口配置/login:title:用戶登錄接口, /登錄接口名稱 config:baseurl:API_URL, /登錄接口url method:POST, /HTTP請求方式 command:u

13、ser/login, /url data:body, /請求體 encrypt:false, /是否加密傳輸,調用登錄接口loginSubHttpService.post(/apiLogin?json=1, subData, function (data) if(pid = 0)location.href = _url; /登錄判斷跳轉); 圖5-2 登錄界面以及登錄驗證功能描述: 用戶輸入手機號碼作為通行證，獲取手機短信驗證碼即可完成登錄。(2)：提交用戶身份信息模塊orderCommissionNode端接口配置/checkPersonalInfo: title: 用戶身份信息, /用戶身

14、份接口名稱 config: baseurl: API_URL, /用戶身份接口url method: POST, /HTTP請求方式 command: user/modifyInfo,/url data: body, /HTTP請求體 encrypt: true /HTTP是否加密 ,PersonalInfoHttpService.post(/personalInfo?json=1, , function (data) console.log(data); /打印data數據 var _realUname = data.realName; /獲取用戶姓名 var _realIdedity =

15、data.cardId; /獲取用戶身份證圖5-3 提交用戶身份信息功能描述: 用戶填寫相應的身份信息以及服務詳情，推送到律師端，由律師完成搶單服務。(3)：提交語音咨詢單模塊OrderList Node端接口配置/ placeOrder: title: 用戶下單接口, /用戶下單接口名稱 config: baseurl: API_URL, /用戶身份接口url method: POST, /HTTP請求方式 command: user/ placeOrder,/url data: body, /HTTP請求體 encrypt: true /HTTP是否加密httpService.post(/

16、orderList?json=1, productId:parentProductId,function(data) console.log(data); /打印data數據 var num = ductDetailList.length; /獲取服務列表長度 $(.orderList).html().attr(productId,parentProductId);/設置相應產品productorId圖5-4 語音咨詢服務功能: 用戶選擇語音咨詢服務類型，提交訂單。律師端收到推送語音信息，給用戶撥打語音電話，完成后續(xù)服務。 對于程序員來說，異步式的編程風格所帶來的大量的回調嵌套所引發(fā)的所謂的“

17、回調地獄”,不但讓編寫的代碼看起來臃腫難以閱讀，同時，也會讓項目更加難以維護。但是可以通過使用promise來解決上述的問題。$(.xx).animate(, function() $(xx).animate(xx,function() /執(zhí)行指定動畫,1000),1000)/使用promise解決上述回調的問題:function animate(dis,time) /定義動畫函數 var def = $.Deferred();/定義def變量 $(.boll).animate( left: dis+px /執(zhí)行動畫 ,time, function() def.resolve(time); )

18、; return def; /返回變量$(.boll).on(click,function() $.when( animate(50,1000), /執(zhí)行動畫6 結論綜上所述，雖然Node.js現(xiàn)在應用廣泛，很多公司都是基于它進行前后端分離開發(fā)，但前端開發(fā)技術日新月異，必須及時做出突破。在接下來的時間里，希望Node.js能做到以下幾個方面的突破或者創(chuàng)新:單線程異步式I/O是Node.js立家之本，但或許可以結合java I/O的多路復用的Reactor模式，將Proator和Reactor兩者有機的結合，更好的提升系統(tǒng)吞吐量。圖5-5加入Reactor模式的單線程異步式I/O模型目前，Nod

19、e.js更多依賴NPM，或許可以將這些集成到它的核心功能中，包括添加文件服務器。Node.js是單線程的，是否可以更好的利用目前服務器多核的優(yōu)勢，來提升HTTP服務器的并發(fā)性能。結束語通過此次的研究與測試，我對Node.js的異步式的I/O設計模型以及事件循環(huán)機制有了更為深刻的理解，也深刻體會了Node.js 技術在高并發(fā)Web 系統(tǒng)的中的應用，以及如何提升網站高并發(fā)處理能力。在這其中，我最要感謝的就是我的指導老師張輝老師，從開始的選題到確定研究方向，張輝老師不僅給了我技術上的指導，更是讓我對前端這個行業(yè)有了一個清楚的認知，也重新定位了職業(yè)規(guī)劃。此外，研究過程中張老師身上體現(xiàn)出的對技術的嚴謹，細致也讓我學到了很多，這在我以后的成長道路上都是不可多得的財富。最后，我要感謝我的家人，在我大學期間的無私付出，他們的理解和支持是我求學道路上最大的動力，謝謝。參考文獻BYVoid.郭家寶.Node.js開發(fā)指南 M.北京,人民郵電出版社2012,(7):11.Stevens. Fenner. Rudolf, UNIX network programming M北京,人民郵電出版社. 2009.賀琛，陳肇雄，黃河燕. Web緩存技術綜述J.小型微型計算機系統(tǒng)，2013, 25(5): 836-842.Xiao-zhong Z.Web Caching Server Built on Mem