计算机生产实习报告.完整项目

1、、理论学习1、设计1)UI 基础概念及 UI 的发展前景2)网站设计规范及流程3)Photoshop 软件的基本认识和使用2、前端1) Html5 + CSS3 技术HTML5相关基础知识，包括 HTML5既述、Web开发历史、HTML标签、HTML5文档结构与创建HTML5文档;CSS3概述，CSS选择器，页面元素布局方式(浮动、定位)，定义文本、字体与颜色，设计背景、阴影和边框，使用2D 3D变换，设计动画以及 CSS3的其他新特性。2) JavaScript 语言JavaScript 发展、概述， js 变量、流程控制、循环、函数、对象等基础语法;利用 JavaScript 操作浏览器、

2、文档模型，页面动效制作;使用 Ajax 技术与后台 进行异步数据交互;分析和处理数据并进行前台可视化展示3) Nodejs 框架Nodejs 的发展、 概述， 使用 Nodejs 制作简单服务器， 用以接收请求读取本地 数据文件，4) Echarts 可视化插件利用百度 Echarts 插件进行数据可视化开发，制作可交互的动态图表。2、 后端部分1) 网络通信概述TCP/IP 协议学习， wireshark 抓包工具使用，网络通信过程详解2) LinuxLinux 操作系统基本命令，系统管理，权限管理，软件安装， Shell 脚本编写3) Java 核心编程数据类型，流程控制语句，面向对象，

3、IO4) Hadoop分布式文件系统 HDFS并行处理框架 MapReduce Hadoop集群搭建，项目幵发项目内容、项目内容项目名称：海量网站日志的 KPI 数据分析可视化平台项目介绍：以“海量网站日志的 KPI 数据分析可视化平台”为主线，包括项目 可视化技术、大数据平台后台数据分析，挖掘技术，最终完成该项目，提升学生 项目的设计、分析，实施等各项能力，以便适应企业的需求。功能介绍：本次海量日志KPI项目系统采用大数据技术HadooP,通过搭建Hadoop集群，学习如何运用 Hadoop集群里分布式文件系统 HDFS存储海量数据,与并行计算处理框架 MapReduce完成海量日志的分析。

4、前台使用Photoshop按照网站制作标准对网站进行 shejishi 先，最主要不包含导航栏、侧导航、今日流量HTML+ CSS可视化、时间可视化、趋势图可视化、新老访客可视化六个模块。通过 对设计稿进行 Web页面实现，同时使用 Nodejs搭建服务器，通过JavaScript对后台数据进行请求与处理， 将处理好的数据使用 Echarts 插件将进行可视化展示。直观的通过网站KPI指标的分析，从而对网站的发展运营做出战略性预测三、项目详细设计1、设计部分1.1模块设计项目结构主要分为六个模块，分别为导航栏、侧导航、今日流量可视化、时间可视化、趋势图可视化、新老访客可视化。页面细节优化页面主

5、要色调白色和蓝色构成，蓝色色值：#107eee.网站尺寸为1440 * 900;文字大小14号、16号、18号；文字颜色主要是 #333333、#666666;页面应用到的图层样式有投影、描边。2、前端页面及功能的实现HTML+CSS页面布局网站的布局使用HTML进行页面元素的合理分配，CSS3对元素进行布局修饰,氏“Em-斗7C*<7 ui?Jitrg 人以及页面效果的实现。JavaScript 进行数据请求及分析处理JavaScript 是一个浏览器脚本语言，用它可以操作页面元素，从而实现页面 数据的渲染及更新。使用 JavaScript 中的 Ajax 技术可以发送异步数据请求No

6、dejs 进行服务器环境搭建Nodejs 是 JavaScript 的运行环境，可以使 JavaScript 语言在服务器端运行， 由于 Ajax 必须在服务器环境下运行，所以使用 Nodejs 搭建 web 服务器，从而支 持 ajax 技术，以及使用 Nodejs 中的“文件模块”读取本地文件的内容并将读取 到数据返回前台。Echarts 插件进行数据可视化展示在网站 KPI 分析中，有很多数据是需要使用图标进行展示的，如用户每小时PV 统计、页面独立 IP 的访问量统计、用户的访问设备统计等，复杂的图标使用css或Photoshop制作时会非常复杂。Echarts是百度一款可视化插件，可

7、以使用代码将数据方便快捷的转化为各类图表。3、后台搭建及设计部分Nginx 日志分析一个网站服务器日志中，每条日志都代表着用户的一次访问，下面就是一条Nginx 服务器日志：其中包含了多种信息，包含访问者IP 、访问用户名称、访问时间、状态码、 访问设备等等，从一个网站的日志可以分析出运行情况等。网站 KPI 指标网站 KPI 指标可以看出一个网站的运行情况， 并且通过大数据分析可以得到用 户的习惯，为网站的发展运营做出战略性判断PV( page view )即页面浏览量，通常是衡量一个网络新闻频道或网站甚至一 条网络新闻的主要指标。网页浏览数是评价网站流量最常用的指标之一，简称为PagePV

8、o监测网站PV的变化趋势和分析其变化原因是很多站长定期要做的工作。Views 中的 Page 一般是指普通的 html 网页，也包含 php、jsp 等动态产生的 html内容。来自浏览器的一次html内容请求会被看作一个 PV,逐渐累计成为PV总数。UV( unique visitor )，指访问某个站点或点击某条新闻的不同 IP 地址的人 数。在同一天内， uv 只记录第一次进入网站的具有独立 IP 的访问者，在同一天内 再次访问该网站则不计数。 独立IP访问者提供了一定时间内不同观众数量的统计 指标，而没有反应出网站的全面活动。IP ，网站每天的访问 IP 数Browser (访问设备)

9、，可以看到用户平常喜欢用PC还是移动端等访问设备访项目背景 - 架构分析1、在少量数据的情况下1).少量数据的情况(10Mb 100Mb 10G),在单机处理尚能忍受的时候，我们可以直接利用各种工具， awk、grep、sort 、join 等都是日志分析的利器，再配 合 perl ，python ，正则表达式，基本就可以解决问题2).例如，从Nginx日志中得到访问量最高的 5分IP，实现很简单:”t ”ab' | sort -k2 -r|head -n 102、在海量数据的情况下1).当数据量每天以10G, 100G增长的时候，单机处理能力已经不能满足需求。Hadoop出现我们就需

10、要增加系统的复杂性，用计算机集群，存储阵列来解决。在 之前，海量数据存储，和海量日志分析都是非常困难的。只有少数一些公司，掌 握着高效的并行计算，分布式计算，分布式存储的核心技术2)HadooP的出现，大幅度的降低了海量数据处理的门槛，让小公司甚至是个人都有能力，搞定海量数据。并且，Hadoop也非常适合日志分析系统日志的手机方式1脚本收集架构设计：应用系统及日志系统架构1).日志是有业务系统产生的， 我们可以设置web服务器每天产生一个新的目录，目录下面会产生多个日志文件，每个日志文件64M)2).设置系统定时器CRON夜间在0点后，向HDFS导入昨天的日志文件。3).完成导入后，设置系统定

11、时器，启动MapReduce程序，提取并计算统计指4).完成计算后，设置系统定时器，从 HDFS导出统计指标数据到数据库，方便以后的即时查询2、 FlumeHDFSagent tier collector tier storage tiermasterFlume体系架构1) .data flow描述了数据从产生，传输、处理并最终写入目标的一条路径(图 中的实线)2) .Agent用于采集数据，是Flume中产生数据流的地方，将产生的数据流传输至y collector3) .collector用于对数据进行聚合，往往会产生一个更大的流4).收集数据有2种主要工作模式，如下:Push Source

12、s :外部系统会主动地将数据推送到FlumePolling Sources: Flume到外部系统中获取数据需求分析此次项目要统计出来的 KPI指标1) PV (PageView)：页面访问量统计2) .IP :页面独立IP的访问量统计3) .Time :用户每小时PV的统计4) .Browser ：用户的访问设备的统计算法模型1、变量分析1、remote_addr :记录客户端的 IP 地址，2、remote_user :记录客户端用户名称，3 、ti m e_local :记录时间与时区，4、request :记录请求的 url 与 http 协议，5、status :记录请求状态，6、b

13、ody_bytes_sent :记录发送内容大小7、http_referer:用来记录从哪个页面链接访问过来的8、http_user_agent :记录客户浏览器的相关信息，2、变量解析1、remote_addr 2、remote_user 3 、ti m e_local 4、request 5、status 6、body_bytes_sent 7、http_referer 8、http_user_agent要想获得上述变量，需要对 Nginx 日志进行分片处理3、并行算法本次采用Map Reduce并行算法框架各个模块算法解析如下1、PV (PageView)：页面访问量统计- Map ：

14、key:$request,value:1- Reduce ： key:$request,value: 求和( sum) 2、IP ：页面独立 IP 统计- Map ： key:$request,value:remote_addr- Reduce:key:$request,value:去重再求和( sum(unique) ) 3、Time：用户每小时PV的统计- Map ： key:$time_local,value:1- Reduce ： key:$time_local,value:求和( sum) 4、Browser ：用户的访问设备统计- Map ： key:$http_user-agen

15、t,value:1求和( sum) - Reduce :key:$http_user_agent,value:四、项目实现1 设计部分1U rE h取恵rih*1 g疇<>-1u:tai' JI詮虞:O% WAo瓠刊86.27.C门on35S3Ho n :匚肯可.o主一*肯P蠡箱ro刃-u-k岂亠*;讥屯Z斗rm闻円3辑S5Td-h门 已-使用Photoshop矢量工具、文字工具等进行网页设计2前端部分Ajax 其核心有 JavaScript、XMLHTTPRequestDOM寸象组成，通过 XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据，然后用Ja

16、vaScript来操作DOM而更新页面。传统的HTPP服务器会由Aphche、Nginx、IIS 之类的软件来担任，但是nodejs并不需要，nodejs提供了http模块，自身就可以用来构建服务器，而且httP模块是由C+实现的,性能可靠。打幵浏览器，输入localhost:88888我们就可以看到屏幕上的提示，这表明这个 最简单的nodejs服务器已经搭建成功了。Excel和Mac的Numbers里面所带有的图表功能，有一些基本的图表类型，如柱形图、折线图、饼图、条形图、面积图、散点图等等这些基本的图表类型，用Echartslet http require"http")

17、;ler fs = require("fs");let server - httpcreate5erv色r(Function Crequestresponse) “ ),llsten<8888)都可以实现，并且 Echarts通过程序来控制数据，因此能够做到及时拓展数据/ V, J 出 也；/iMdoni.沏昭化B had：他vjf myChart 二 echarts.init(document .getElementByIdl('main/ );/ 片 i 叮二均 (K I ' 'I 一I H i.ViI-I var option =myCh

18、art.setOption(option);使用Echarts绘制图标需要初始化 Echarts实例、配置图标数据、创建图表三个步骤:3后端部分Hadoo P集群搭建)，Hadoop 实现了一个分布式文件系统( Hadoop Distributed File System简称HDFS HDFS有高容错性的特点，并且设计用来部署在低廉的(low-cost )硬 件上；而且它提供高吞吐量(high through put )来访问应用程序的数据，适合那 些有着超大数据集(large data set )的应用程序。HDFS放宽了( relax)POSIX的要求，可以以流的形式访问(streami ng access )文件系统中的数据。Hadoop的框架最核心的设计就是：HDFS和Map Reduce HDFS为海量的数据提供了存储，则Map Reduce为海量的数据提供了计算。Hadoo P集群有三种配置模式1独立模式所有的程序运行在一个 JVM中，不需要启动hadoop的进程，应用的是