畢業(yè)設(shè)計(jì)-多類型互聯(lián)網(wǎng)前端開(kāi)發(fā)技術(shù)的研究與應(yīng)用

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

2、e.js；異步式I/O；高并發(fā)；事件驅(qū)動(dòng)； 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。第四：對(duì)前端人員Javascript技能要求更高，促使團(tuán)隊(duì)技能提升。但是，單頁(yè)應(yīng)用不利于SEO的優(yōu)化，同時(shí)存在初次加載時(shí)間也相對(duì)較多，cookie的保存等問(wèn)題。5.1 語(yǔ)音咨詢請(qǐng)求服務(wù)5.1.1 語(yǔ)音咨詢架構(gòu)設(shè)計(jì)語(yǔ)音咨詢業(yè)務(wù)提供用戶在線下單服務(wù)，最核心的功能是當(dāng)前消息的實(shí)時(shí)性分發(fā)，信息的推送使用融云提供的即時(shí)通訊云服務(wù)。當(dāng)用戶選擇服務(wù)后(先付費(fèi)或者后付費(fèi))，將當(dāng)前訂單推送到律師客戶端，由律師搶

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

7、陸verifyCode手機(jī)驗(yàn)證碼M手機(jī)驗(yàn)證碼表5-3響應(yīng)消息字段名稱必填說(shuō)明Code響應(yīng)結(jié)果Mok988-請(qǐng)求參數(shù)錯(cuò)誤desp響應(yīng)描述M描述tokentokenN登錄信息表5-4產(chǎn)品詳情接口接口名稱產(chǎn)品詳情接口接口格式http post接口描述產(chǎn)品詳情接口urlhttp:/user/cardDetailInfo表5-5請(qǐng)求消息字段名稱必填說(shuō)明token登錄信息M獲取登錄信息productId產(chǎn)品編號(hào)M產(chǎn)品ID表5-6響應(yīng)消息字段名稱必填說(shuō)明Code響應(yīng)結(jié)果Mok988-請(qǐng)求參數(shù)錯(cuò)誤desp響應(yīng)描述M描述tokentokenN登錄信息5.1.3異步式I/O請(qǐng)求服務(wù)Var request = fu

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

9、行 console.log(err) var r = JSON.parse(response); /轉(zhuǎn)為響應(yīng)的json字符串 console.log(rpc response : + response); if(r.status & r.status.code != 1) /判斷返回?cái)?shù)據(jù)在業(yè)務(wù)層面的正確性 callback(r.status.desp, r); / 回調(diào)具體的業(yè)務(wù)回調(diào)邏輯處理函數(shù) else callback(err, r); /執(zhí)行錯(cuò)誤回調(diào)函數(shù) /取消連接，釋放會(huì)連接池 global.pool.release(connection); ); if(_args) /請(qǐng)求RPC接口

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

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

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

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

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

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

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

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

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

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