計(jì)算機(jī)生產(chǎn)實(shí)習(xí)報(bào)告.完整項(xiàng)目

1、、理論學(xué)習(xí)1、設(shè)計(jì)1) UI 基礎(chǔ)概念及 UI 的發(fā)展前景2) 網(wǎng)站設(shè)計(jì)規(guī)范及流程3) Photoshop 軟件的基本認(rèn)識(shí)和使用2、前端1) Html5 + CSS3 技術(shù)HTML5相關(guān)基礎(chǔ)知識(shí)，包括 HTML5概述、Web開(kāi)發(fā)歷史、HTML標(biāo)簽、HTML5文檔結(jié)構(gòu)與 創(chuàng)建HTML5文檔；CSS3既述，CSS選擇器，頁(yè)面元素布局方式(浮動(dòng)、定位)，定義文本、字體與顏色， 設(shè)計(jì)背景、陰影和邊框，使用2D 3D變換，設(shè)計(jì)動(dòng)畫(huà)以及 CSS3的其他新特性。2) JavaScript 語(yǔ)言JavaScript 發(fā)展、概述， js 變量、流程控制、循環(huán)、函數(shù)、對(duì)象等基礎(chǔ)語(yǔ)法；利用 JavaScript 操

2、作瀏覽器、文檔模型，頁(yè)面動(dòng)效制作；使用 Ajax 技術(shù)與后臺(tái)進(jìn)行異步數(shù)據(jù)交 互；分析和處理數(shù)據(jù)并進(jìn)行前臺(tái)可視化展示3) Nodejs 框架Nodejs 的發(fā)展、概述，使用 Nodejs 制作簡(jiǎn)單服務(wù)器， 用以接收請(qǐng)求讀取本地?cái)?shù)據(jù)文件，4) Echarts 可視化插件利用百度 Echarts 插件進(jìn)行數(shù)據(jù)可視化開(kāi)發(fā)，制作可交互的動(dòng)態(tài)圖表。2 、 后端部分1) 網(wǎng)絡(luò)通信概述TCP/IP 協(xié)議學(xué)習(xí)， wireshark 抓包工具使用，網(wǎng)絡(luò)通信過(guò)程詳解2) LinuxLinux 操作系統(tǒng)基本命令，系統(tǒng)管理，權(quán)限管理，軟件安裝，Shell 腳本編寫(xiě)3) Java 核心編程數(shù)據(jù)類(lèi)型，流程控制語(yǔ)句，面向?qū)ο?/p>

3、， IO4) Hadoop分布式文件系統(tǒng) HDFS并行處理框架 Map Reduce Hadoop集群搭建，項(xiàng)目開(kāi)發(fā)項(xiàng)目?jī)?nèi) 容二、項(xiàng)目?jī)?nèi)容項(xiàng)目名稱(chēng)：海量網(wǎng)站日志的 KPI 數(shù)據(jù)分析可視化平臺(tái) 項(xiàng)目介紹： 以“海量網(wǎng)站日志的 KPI 數(shù)據(jù)分析可視化平臺(tái)”為主線，包括項(xiàng)目可視化技 術(shù)、大數(shù)據(jù)平臺(tái)后臺(tái)數(shù)據(jù)分析，挖掘技術(shù)，最終完成該項(xiàng)目，提升學(xué)生項(xiàng)目的設(shè)計(jì)、分析， 實(shí)施等各項(xiàng)能力，以便適應(yīng)企業(yè)的需求。功能介紹：本次海量日志 KPI項(xiàng)目系統(tǒng)采用大數(shù)據(jù)技術(shù)Hadoop,通過(guò)搭建Hadoop集群,學(xué)習(xí)如何運(yùn)用Hadoop集群里分布式文件系統(tǒng)HDFS存儲(chǔ)海量數(shù)據(jù)，與并行計(jì)算處理框架MapReduce 完成海量

4、日志的分析。前臺(tái)使用Photoshop 按照網(wǎng)站制作標(biāo)準(zhǔn)對(duì)網(wǎng)站進(jìn)行shejishi 先,最主要不包含導(dǎo)航欄、側(cè)導(dǎo)航、今日流量可視化、時(shí)間可視化、趨勢(shì)圖可視 化、新老訪客可視化六個(gè)模塊。通過(guò)HTML+ CSS對(duì)設(shè)計(jì)稿進(jìn)行Web頁(yè)面實(shí)現(xiàn)，同時(shí)使用Nodejs 搭建服務(wù)器,通過(guò) JavaScript 對(duì)后臺(tái)數(shù)據(jù)進(jìn)行請(qǐng)求與處理,將處理好的數(shù)據(jù)使用 Echarts 插件將進(jìn)行可視化展示。 直觀的通過(guò)網(wǎng)站 KPI 指標(biāo)的分析, 從而對(duì)網(wǎng)站的發(fā)展運(yùn)營(yíng)做出戰(zhàn)略 性預(yù)測(cè)。三、項(xiàng)目詳細(xì)設(shè)計(jì)1、設(shè)計(jì)部分1.1模塊設(shè)計(jì)項(xiàng)目結(jié)構(gòu)主要分為六個(gè)模塊，分別為導(dǎo)航欄、側(cè)導(dǎo)航、今日流量可視化、時(shí)間可視化、 趨勢(shì)圖可視化、新老訪客

5、可視化。1.2頁(yè)面細(xì)節(jié)優(yōu)化頁(yè)面主要色調(diào)白色和藍(lán)色構(gòu)成，藍(lán)色色值：#107eee.網(wǎng)站尺寸為1440 * 900 ;文字大小14號(hào)、16號(hào)、18號(hào)；文字顏色主要是#333333、#666666;頁(yè)面應(yīng)用到的圖層樣式有投影、 描邊。2、前端頁(yè)面及功能的實(shí)現(xiàn)2.1 HTML+CSS頁(yè)面布局網(wǎng)站的布局使用 HTML進(jìn)行頁(yè)面元素的合理分配，CSS3對(duì)元素進(jìn)行布局修飾，以及頁(yè)面效果的實(shí)現(xiàn)。2.2 JavaScript進(jìn)行數(shù)據(jù)請(qǐng)求及分析處理JavaScript是一個(gè)瀏覽器腳本語(yǔ)言，用它可以操作頁(yè)面元素，從而實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的渲染及更新。使用JavaScript中的Ajax技術(shù)可以發(fā)送異步數(shù)據(jù)請(qǐng)求2.3 Node

6、js進(jìn)行服務(wù)器環(huán)境搭建Nodejs是JavaScript的運(yùn)行環(huán)境，可以使JavaScript 語(yǔ)言在服務(wù)器端運(yùn)行，由于Ajax 必須在服務(wù)器環(huán)境下運(yùn)行， 所以使用Nodejs搭建web服務(wù)器，從而支持ajax技術(shù)，以及使 用Nodejs中的"文件模塊”讀取本地文件的內(nèi)容并將讀取到數(shù)據(jù)返回前臺(tái)。2.4 Echarts 插件進(jìn)行數(shù)據(jù)可視化展示在網(wǎng)站KPI分析中，有很多數(shù)據(jù)是需要使用圖標(biāo)進(jìn)行展示的，如用戶每小時(shí)PV統(tǒng)計(jì)、頁(yè)面獨(dú)立IP的訪問(wèn)量統(tǒng)計(jì)、用戶的訪問(wèn)設(shè)備統(tǒng)計(jì)等，復(fù)雜的圖標(biāo)使用CSS或 Photoshop制作時(shí)會(huì)非常復(fù)雜。Echarts是百度一款可視化插件，可以使用代碼將數(shù)據(jù)方便快捷

7、的轉(zhuǎn)化為 各類(lèi)圖表。不同時(shí)段網(wǎng)鮎訪問(wèn)量3、后臺(tái)搭建及設(shè)計(jì)部分3.1 Ngi nx 日志分析一個(gè)網(wǎng)站服務(wù)器日志中，每條日志都代表著用戶的一次訪問(wèn)，下面就是一條Nginx服務(wù)器日志：- - 18/Sep/2017:06:51:36 +0000 "GET /wp-i ncludes/js/comme nt-reply.mi n.js?ver=3.6 HTTP/1.1" 304 0 " ns.me/nodejs-socketio-chat/""Mozilla/5.0(Windows NT 5.1;rv:23.0)Gecko/20100101Firefo

8、x/23.0"其中包含了多種信息，包含訪問(wèn)者IP、訪問(wèn)用戶名稱(chēng)、訪問(wèn)時(shí)間、狀態(tài)碼、訪問(wèn)設(shè)備等等，從一個(gè)網(wǎng)站的日志可以分析出運(yùn)行情況等。3.2網(wǎng)站KPI指標(biāo)網(wǎng)站KPI指標(biāo)可以看出一個(gè)網(wǎng)站的運(yùn)行情況，并且通過(guò)大數(shù)據(jù)分析可以得到用戶的習(xí)慣，為網(wǎng)站的發(fā)展運(yùn)營(yíng)做出戰(zhàn)略性判斷PV( page view )即頁(yè)面瀏覽量，通常是衡量一個(gè)網(wǎng)絡(luò)新聞?lì)l道或網(wǎng)站甚至一條網(wǎng)絡(luò)新聞的主要指標(biāo)。網(wǎng)頁(yè)瀏覽數(shù)是評(píng)價(jià)網(wǎng)站流量最常用的指標(biāo)之一，簡(jiǎn)稱(chēng)為PV。監(jiān)測(cè)網(wǎng)站PV的變化趨勢(shì)和分析其變化原因是很多站長(zhǎng)定期要做的工作。Page Views中的Page 一般是指普通的html網(wǎng)頁(yè)，也包含php、jsp等動(dòng)態(tài)產(chǎn)生的html內(nèi)

9、容。來(lái)自瀏覽器的一次 html內(nèi)容 請(qǐng)求會(huì)被看作一個(gè) PV逐漸累計(jì)成為PV總數(shù)。UV (unique visitor)，指訪問(wèn)某個(gè)站點(diǎn)或點(diǎn)擊某條新聞的不同IP地址的人數(shù)。在同一天內(nèi)，uv只記錄第一次進(jìn)入網(wǎng)站的具有獨(dú)立IP的訪問(wèn)者，在同一天內(nèi)再次訪問(wèn)該網(wǎng)站則不計(jì)數(shù)。獨(dú)立IP訪問(wèn)者提供了一定時(shí)間內(nèi)不同觀眾數(shù)量的統(tǒng)計(jì)指標(biāo)，而沒(méi)有反應(yīng)出網(wǎng)站的全面活動(dòng)。IP，網(wǎng)站每天的訪問(wèn)IP數(shù)Browser (訪問(wèn)設(shè)備)，可以看到用戶平常喜歡用PC還是移動(dòng)端等訪問(wèn)設(shè)備訪問(wèn)3.3項(xiàng)目背景-架構(gòu)分析1、在少量數(shù)據(jù)的情況下1) .少量數(shù)據(jù)的情況(10Mb 100Mb, 10G),在單機(jī)處理尚能忍受的時(shí)候，我們可以直 接利用

10、各種工具，awk、grep、sort、join等都是日志分析的利器，再配合 perl ， python， 正則表達(dá)式，基本就可以解決問(wèn)題2) .例如，從Nginx日志中得到訪問(wèn)量最高的5分IP，實(shí)現(xiàn)很簡(jiǎn)單：| awk 'a$1+ ENDfor(b in a) print b” t ” ab'| sort-k2 -r|head -n 102、在海量數(shù)據(jù)的情況下1) .當(dāng)數(shù)據(jù)量每天以10G, 100G增長(zhǎng)的時(shí)候，單機(jī)處理能力已經(jīng)不能滿足需求。我們就 需要增加系統(tǒng)的復(fù)雜性，用計(jì)算機(jī)集群，存儲(chǔ)陣列來(lái)解決。在Hadoop出現(xiàn)之前，海量數(shù)據(jù)存儲(chǔ)，和海量日志分析都是非常困難的。只有少數(shù)一些公

11、司，掌握著高效的并行計(jì)算，分布式計(jì)算，分布式存儲(chǔ)的核心技術(shù)2) Hadoop的出現(xiàn)，大幅度的降低了海量數(shù)據(jù)處理的門(mén)檻，讓小公司甚至是個(gè)人都有能力，搞定海量數(shù)據(jù)。并且，Hadoop也非常適合日志分析系統(tǒng)3.4日志的手機(jī)方式1、腳本收集架構(gòu)設(shè)計(jì)：應(yīng)用系統(tǒng)及日志系統(tǒng)架構(gòu)架構(gòu)設(shè)計(jì)：數(shù)據(jù)流1) .日志是有業(yè)務(wù)系統(tǒng)產(chǎn)生的，我們可以設(shè)置 web服務(wù)器每天產(chǎn)生一個(gè)新的目錄，目錄F面會(huì)產(chǎn)生多個(gè)日志文件，每個(gè)日志文件64M。2) .設(shè)置系統(tǒng)定時(shí)器 CRON夜間在0點(diǎn)后，向HDFS導(dǎo)入昨天的日志文件。3) .完成導(dǎo)入后，設(shè)置系統(tǒng)定時(shí)器，啟動(dòng)MapReduce程序，提取并計(jì)算統(tǒng)計(jì)指標(biāo)4) .完成計(jì)算后，設(shè)置系統(tǒng)定時(shí)器

12、，從HDFS導(dǎo)出統(tǒng)計(jì)指標(biāo)數(shù)據(jù)到數(shù)據(jù)庫(kù)，方便以后的 即時(shí)查詢2、FlumeFlume體系架構(gòu)agent tier collector tier storage tier1) .data flow描述了數(shù)據(jù)從產(chǎn)生，傳輸、處理并最終寫(xiě)入目標(biāo)的一條路徑(圖中的實(shí) 線)2) .Agent用于采集數(shù)據(jù)，是Flume中產(chǎn)生數(shù)據(jù)流的地方，將產(chǎn)生的數(shù)據(jù)流傳輸?shù)?collector3) .collector用于對(duì)數(shù)據(jù)進(jìn)行聚合，往往會(huì)產(chǎn)生一個(gè)更大的流4) .收集數(shù)據(jù)有2種主要工作模式，如下：Push Sources :外部系統(tǒng)會(huì)主動(dòng)地將數(shù)據(jù)推送到FlumePolling Sources: Flume到外部系統(tǒng)中獲取

13、數(shù)據(jù)3.5需求分析此次項(xiàng)目要統(tǒng)計(jì)出來(lái)的KPI指標(biāo)1) PV (PageView):頁(yè)面訪問(wèn)量統(tǒng)計(jì)2) .IP :頁(yè)面獨(dú)立IP的訪問(wèn)量統(tǒng)計(jì)3) .Time :用戶每小時(shí)PV的統(tǒng)計(jì)4) .Browser :用戶的訪問(wèn)設(shè)備的統(tǒng)計(jì)3.6算法模型1、變量分析1、remote_addr :記錄客戶端的IP地址,2、remote_user :記錄客戶端用戶名稱(chēng)，3、time_local :記錄時(shí)間與時(shí)區(qū)，4、request :記錄請(qǐng)求的 url與http 協(xié)議，5、status :記錄請(qǐng)求狀態(tài)，6、body_bytes_sent :記錄發(fā)送內(nèi)容大小7、 http_referer:用來(lái)記錄從哪個(gè)頁(yè)面鏈接訪問(wèn)過(guò)

14、來(lái)的8、http_user_agent :記錄客戶瀏覽器的相關(guān)信息，2、變量解析1、remote_addr2、remote_user3、time_local4、request5、status6、body_bytes_sent7、http_referer8、http_user_agent要想獲得上述變量，需要對(duì)Nginx日志進(jìn)行分片處理3、并行算法本次采用MapReduce并行算法框架各個(gè)模塊算法解析如下1、PV（ PageView）:頁(yè)面訪問(wèn)量統(tǒng)計(jì)-Map : key:$request,value:1-Reduce : key:$request,value:求和（sum） 2、IP :頁(yè)面獨(dú)立

15、IP統(tǒng)計(jì)-Map : key:$request,value:remote_addr-Reduce:key:$request,value:去重再求和（sum（unique） ）3、Time :用戶每小時(shí) PV的統(tǒng)計(jì)-Map : key:$time_local,value:1-Reduce : key:$time_local,value:求和（sum）4、Browser:用戶的訪問(wèn)設(shè)備統(tǒng)計(jì)-Map : key:$http_user-agent,value:1-Reduce :key:$http_user_agent,value:求和（sum） 四、項(xiàng)目實(shí)現(xiàn)1設(shè)計(jì)部分使用Photoshop矢量工具、

16、文字工具等進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)FaHASMX*'屮鬥戲zJfJ*年燈厲F： ： Hi1X283QS86.27,23&2前端部分2.1 Ajax 其核心有 JavaScript、XMLHTTPReques、DOM寸象組成，通過(guò) XmlHttpRequest 對(duì) 象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用JavaScript來(lái)操作DOM而更新頁(yè)面。/ 1.實(shí)例化ajaxXfrequest - 口仙 XMLHttpRequest ()/ 2.打幵連接request open (11 GE T ", '*data/time,h)/ 3+發(fā)逸請(qǐng)壊request.send)

17、/ 4* 通過(guò)onreadyst at echange 玄件監(jiān)測(cè)啊應(yīng) request * onreadystatechanEe f ric t .)n () /狀態(tài)碼2昵正幣r(request.redyState 4 恥 request,status 20e)1 "t dtarequest,response!extH數(shù)據(jù)獲JR成功/ 3SON*parse 將字將宰轉(zhuǎn)化為j/n搭式數(shù)據(jù)1rt d 3SON+parse(dat)console lof*(d)/使用數(shù)據(jù)2.2傳統(tǒng)的HTPP服務(wù)器會(huì)由Aphche、Nginx、IIS之類(lèi)的軟件來(lái)?yè)?dān)任，但是 nodejs并不 需要，nodejs

18、提供了 http模塊，自身就可以用來(lái)構(gòu)建服務(wù)器，而且 http模塊是由C+實(shí)現(xiàn) 的，性能可靠。let http = requlre(,rhttp");let fS = require( 'fsM)let server - http cre白t電5gver(fiin(:tion (request,response) i<listen(8888)打開(kāi)瀏覽器，輸入localhost:88888 我們就可以看到屏幕上的提示，這表明這個(gè)最簡(jiǎn)單的nodejs服務(wù)器已經(jīng)搭建成功了。2.3 Excel和Mac的Numbers里面所帶有的圖表功能，有一些基本的圖表類(lèi)型，如柱形圖、 折線圖

19、、餅圖、條形圖、面積圖、散點(diǎn)圖等等這些基本的圖表類(lèi)型，用Echarts都可以實(shí)現(xiàn),并且Echarts通過(guò)程序來(lái)控制數(shù)據(jù)，因此能夠做到及時(shí)拓展數(shù)據(jù)使用Echarts繪制圖標(biāo)需要初始化 Echarts實(shí)例、配置圖標(biāo)數(shù)據(jù)、創(chuàng)建圖表三個(gè)步驟：/基于準(zhǔn)備好的初始化echartsC例var my匚hartecharts nitf document gEtElEEntBy：d( 'm日in')H扌旨定圖表的配置項(xiàng)和數(shù)據(jù)var option - ；/使用剛18定的配置項(xiàng)和數(shù)據(jù)顯示圖表“myChart.setOption(aption);3后端部分3.1 Hadoop集群搭建Hadoop實(shí)現(xiàn)了一個(gè)分布式文件系統(tǒng)( Hadoop Distributed File System)，