計算機生產(chǎn)實習(xí)報告.完整項目

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

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

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

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

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

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

7、的轉(zhuǎn)化為 各類圖表。不同時段網(wǎng)鮎訪問量3、后臺搭建及設(shè)計部分3.1 Ngi nx 日志分析一個網(wǎng)站服務(wù)器日志中，每條日志都代表著用戶的一次訪問，下面就是一條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"其中包含了多種信息，包含訪問者IP、訪問用戶名稱、訪問時間、狀態(tài)碼、訪問設(shè)備等等，從一個網(wǎng)站的日志可以分析出運行情況等。3.2網(wǎng)站KPI指標(biāo)網(wǎng)站KPI指標(biāo)可以看出一個網(wǎng)站的運行情況，并且通過大數(shù)據(jù)分析可以得到用戶的習(xí)慣，為網(wǎng)站的發(fā)展運營做出戰(zhàn)略性判斷PV( page view )即頁面瀏覽量，通常是衡量一個網(wǎng)絡(luò)新聞頻道或網(wǎng)站甚至一條網(wǎng)絡(luò)新聞的主要指標(biāo)。網(wǎng)頁瀏覽數(shù)是評價網(wǎng)站流量最常用的指標(biāo)之一，簡稱為PV。監(jiān)測網(wǎng)站PV的變化趨勢和分析其變化原因是很多站長定期要做的工作。Page Views中的Page 一般是指普通的html網(wǎng)頁，也包含php、jsp等動態(tài)產(chǎn)生的html內(nèi)

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

10、各種工具，awk、grep、sort、join等都是日志分析的利器，再配合 perl ， python， 正則表達式，基本就可以解決問題2) .例如，從Nginx日志中得到訪問量最高的5分IP，實現(xià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增長的時候，單機處理能力已經(jīng)不能滿足需求。我們就 需要增加系統(tǒng)的復(fù)雜性，用計算機集群，存儲陣列來解決。在Hadoop出現(xiàn)之前，海量數(shù)據(jù)存儲，和海量日志分析都是非常困難的。只有少數(shù)一些公

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

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

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

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

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

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

17、/ 4* 通過onreadyst at echange 玄件監(jiān)測啊應(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ù)器會由Aphche、Nginx、IIS之類的軟件來擔(dān)任，但是 nodejs并不 需要，nodejs

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

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