計(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開發(fā)歷史、HTML標(biāo)簽、HTML5文檔結(jié)構(gòu)與創(chuàng)建HTML5文檔；CSS3概述，CSS選擇器，頁(yè)面元素布局方式(浮動(dòng)、定位)，定義文本、字體與顏色，設(shè)計(jì)背景、陰影和邊框，使用2D 3D變換，設(shè)計(jì)動(dòng)畫以及 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)求讀取本地 數(shù)據(jù)文件，4) Echarts 可視化插件利用百度 Echarts 插件進(jìn)行數(shù)據(jù)可視化開發(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 腳本編寫3) Java 核心編程數(shù)據(jù)類型，流程控制語(yǔ)句，面向?qū)ο?/p>

3、， IO4) Hadoop分布式文件系統(tǒng) HDFS并行處理框架 MapReduce Hadoop集群搭建，項(xiàng)目幵發(fā)項(xiàng)目?jī)?nèi)容二、項(xiàng)目?jī)?nèi)容項(xià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ì)圖可視化、新老訪客可視化。頁(yè)面細(xì)

5、節(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)HTML+CSS頁(yè)面布局網(wǎng)站的布局使用HTML®行頁(yè)面元素的合理分配，CSS3對(duì)元素進(jìn)行布局修飾,c HBa33UM%0 =1冊(cè)"2llt-E二WR以及頁(yè)面效果的實(shí)現(xiàn)。JavaScript 進(jìn)行數(shù)據(jù)請(qǐng)求及分析處理JavaScript 是一個(gè)瀏覽器腳本語(yǔ)言，用它可以操作頁(yè)面元素，從而實(shí)現(xiàn)頁(yè)面 數(shù)據(jù)的渲染及更新。使用 JavaScript 中的 Aja

6、x 技術(shù)可以發(fā)送異步數(shù)據(jù)請(qǐng)求 Nodejs 進(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)。Echarts 插件進(jìn)行數(shù)據(jù)可視化展示在網(wǎng)站 KPI 分析中，有很多數(shù)據(jù)是需要使用圖標(biāo)進(jìn)行展示的，如用戶每小時(shí) PV 統(tǒng)計(jì)、頁(yè)面獨(dú)立 IP 的訪問量統(tǒng)計(jì)、用戶的訪問設(shè)備統(tǒng)計(jì)等，復(fù)雜的圖標(biāo)使用 CSS或Photoshop制作時(shí)會(huì)非常復(fù)雜。

7、Echarts是百度一款可視化插件，可以使用 代碼將數(shù)據(jù)方便快捷的轉(zhuǎn)化為各類圖表。3、后臺(tái)搭建及設(shè)計(jì)部分Nginx 日志分析一個(gè)網(wǎng)站服務(wù)器日志中，每條日志都代表著用戶的一次訪問，下面就是一條Nginx 服務(wù)器日志：其中包含了多種信息，包含訪問者 IP 、訪問用戶名稱、訪問時(shí)間、狀態(tài)碼、 訪問設(shè)備等等，從一個(gè)網(wǎng)站的日志可以分析出運(yùn)行情況等。網(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)

8、站流量最常用的指標(biāo)之一，簡(jiǎn)稱為PVo監(jiān)測(cè)網(wǎng)站PV的變化趨勢(shì)和分析其變化原因是很多站長(zhǎng)定期要做的工作。PageViews中的Page一般是指普通的 html網(wǎng)頁(yè)，也包含 php、jsp等動(dòng)態(tài)產(chǎn)生的html 內(nèi)容。來(lái)自瀏覽器的一次html內(nèi)容請(qǐng)求會(huì)被看作一個(gè) PV,逐漸累計(jì)成為PV總數(shù)。UV(unique visitor)，指訪問某個(gè)站點(diǎn)或點(diǎn)擊某條新聞的不同 IP 地址的人數(shù)。在同一天內(nèi)，uv只記錄第一次進(jìn)入網(wǎng)站的具有獨(dú)立IP的訪問者，在同一天內(nèi)再次訪問該網(wǎng)站則不計(jì)數(shù)。獨(dú)立IP訪問者提供了一定時(shí)間內(nèi)不同觀眾數(shù)量的統(tǒng)計(jì)指標(biāo)，而沒有反應(yīng)出網(wǎng)站的全面活動(dòng)。IP，網(wǎng)站每天的訪問IP數(shù)Browser (訪問

9、設(shè)備)，可以看到用戶平常喜歡用PC還是移動(dòng)端等訪問設(shè)備訪問項(xiàng)目背景 - 架構(gòu)分析1、在少量數(shù)據(jù)的情況下1) .少量數(shù)據(jù)的情況(10Mb 100Mb 10G)，在單機(jī)處理尚能忍受的時(shí)候，我 們可以直接利用各種工具， awk、 grep、 sort 、 join 等都是日志分析的利器，再配 合 perl ， python ，正則表達(dá)式，基本就可以解決問題2) . 例如，從 Nginx 日志中得到訪問量最高的 5 分 IP ，實(shí)現(xiàn)很簡(jiǎn)單：”t ”ab' | sort -k2 -r|head -n 102、在海量數(shù)據(jù)的情況下1).當(dāng)數(shù)據(jù)量每天以10G, 100G增長(zhǎng)的時(shí)候，單機(jī)處理能力已經(jīng)不能

10、滿足需求。Hadoop出現(xiàn)我們就需要增加系統(tǒng)的復(fù)雜性，用計(jì)算機(jī)集群，存儲(chǔ)陣列來(lái)解決。在 之前，海量數(shù)據(jù)存儲(chǔ)，和海量日志分析都是非常困難的。只有少數(shù)一些公司，掌 握著高效的并行計(jì)算，分布式計(jì)算，分布式存儲(chǔ)的核心技術(shù)2)Hadoop的出現(xiàn)，大幅度的降低了海量數(shù)據(jù)處理的門檻，讓小公司甚至是個(gè)人都有能力，搞定海量數(shù)據(jù)。并且，Hadoop也非常適合日志分析系統(tǒng)日志的手機(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è)新的目 錄，目錄下面會(huì)產(chǎn)生多個(gè)日志文件，每個(gè)日志文件64M2) .設(shè)置系統(tǒng)定時(shí)器CRON夜間在0點(diǎn)后，向H

11、DFS導(dǎo)入昨天的日志文件。3) .完成導(dǎo)入后，設(shè)置系統(tǒng)定時(shí)器，啟動(dòng)MapReduce程序，提取并計(jì)算統(tǒng)計(jì)指 標(biāo)4) .完成計(jì)算后，設(shè)置系統(tǒng)定時(shí)器，從HDFS導(dǎo)出統(tǒng)計(jì)指標(biāo)數(shù)據(jù)到數(shù)據(jù)庫(kù)，方 便以后的即時(shí)查詢2、Flumeagent Bagent Dagent Iagent Emasteragent C _collector Acollector Bcollector CHDFSagent tier collector tier storage tierFlume體系架構(gòu)(圖1) .data flow描述了數(shù)據(jù)從產(chǎn)生，傳輸、處理并最終寫入目標(biāo)的一條路徑 中的實(shí)線)2) .Agent用于采集數(shù)據(jù)，是F

12、lume中產(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)中獲取數(shù)據(jù)需求分析此次項(xiàng)目要統(tǒng)計(jì)出來(lái)的 KPI指標(biāo)1) PV (PageView)：頁(yè)面訪問量統(tǒng)計(jì)2) .IP :頁(yè)面獨(dú)立IP的訪問量統(tǒng)計(jì)3) .Time :用戶每小時(shí)PV的統(tǒng)計(jì)4) .Browser ：用戶的訪問設(shè)備的統(tǒng)計(jì)算法模型1、變量分析1、remote_addr :記錄客戶端的 IP 地址

13、，2、remote_user :記錄客戶端用戶名稱，3 、ti m e_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è)面鏈接訪問過(guò)來(lái)的8、http_user_agent :記錄客戶瀏覽器的相關(guān)信息，2、變量解析1、remote_addr2、remote_user3 、ti m e_local4、request5、status6、body_bytes_sent7、http_referer 8、http_user_ag

14、ent要想獲得上述變量，需要對(duì) Nginx 日志進(jìn)行分片處理3、并行算法本次采用MapReduce并行算法框架各個(gè)模塊算法解析如下1、PV (PageView)：頁(yè)面訪問量統(tǒng)計(jì)- Map ： key:$request,value:1- Reduce ： key:$request,value:求和( sum) 2、IP ：頁(yè)面獨(dú)立 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,v

15、alue:1- Reduce ： key:$time_local,value:求和( sum) 4、Browser ：用戶的訪問設(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矢量工具、文字工具等進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)2前端部分Ajax 其核心有 JavaScript、XMLHTTPRequestDOM寸象組成，通過(guò) XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用JavaScript來(lái)操作DOM而更新頁(yè)面

16、。傳統(tǒng)的HTPP服務(wù)器會(huì)由Aphche、Nginx、IIS之類的軟件來(lái)?yè)?dān)任，但是nodejs并不需要，nodejs提供了 http模塊，自身就可以用來(lái)構(gòu)建服務(wù)器，而且http模塊是由C+實(shí)現(xiàn)的，性能可靠。打幵瀏覽器，輸入localhost:88888我們就可以看到屏幕上的提示，這表明這個(gè)最簡(jiǎn)單的nodejs服務(wù)器已經(jīng)搭建成功了。Excel和Mac的Numbers里面所帶有的圖表功能，有一些基本的圖表類型，如柱形圖、折線圖、餅圖、條形圖、面積圖、散點(diǎn)圖等等這些基本的圖表類型，用Echartslet http = requlre(*'httpMy；let fs = require( bff

17、s");let server = http crmatmS色function (request response) listen(8888)都可以實(shí)現(xiàn)，并且 Echarts通過(guò)程序來(lái)控制數(shù)據(jù)，因此能夠做到及時(shí)拓展數(shù)據(jù)/堪十準(zhǔn)備好的dom.初始化e匸局rts實(shí)例var rriyChart - echarts i nit (document .get Elemen tByTd(' niEin");/指定圖衣的配置項(xiàng)和數(shù)據(jù)var option ；/使用剛抬定的配置項(xiàng)和數(shù)據(jù)顯亦圖表。myChart.setOption(option);使用Echarts繪制圖標(biāo)需要初始化 E

18、charts實(shí)例、配置圖標(biāo)數(shù)據(jù)、創(chuàng)建圖表三 個(gè)步驟：3后端部分Hadoop集群搭建Hadoop 實(shí)現(xiàn)了一個(gè)分布式文件系統(tǒng)(Hadoop Distributed File System )，簡(jiǎn)稱HDFS HDFS有高容錯(cuò)性的特點(diǎn)，并且設(shè)計(jì)用來(lái)部署在低廉的(low-cost )硬件上；而且它提供高吞吐量(high throughput )來(lái)訪問應(yīng)用程序的數(shù)據(jù)，適合那 些有著超大數(shù)據(jù)集(large data set )的應(yīng)用程序。HDFS放寬了( relax)POSIX 的要求，可以以流的形式訪問(streami ng access )文件系統(tǒng)中的數(shù)據(jù)。Hadoop的框架最核心的設(shè)計(jì)就是：HDFS和MapReduce HDFS為海量的數(shù)據(jù)提供了存儲(chǔ)，則MapReduce為海量的數(shù)據(jù)提供了計(jì)算。Hadoop集群有三種配置模式1、獨(dú)立模式所有的程序運(yùn)行在一個(gè) JVM中，不需要啟動(dòng)hadoop的進(jìn)程，應(yīng)用的是本