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

一、理论学习

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操作浏览器、文档模型，页面动效制作；使用Ajax技术与后台进行异步数据交互；分析和处理数据并进行前台可视化展示

3）Nodejs框架

Nodejs的发展、概述，使用Nodejs制作简单服务器，用以接收请求读取本地数据文件，

4）Echarts可视化插件

利用百度Echarts插件进行数据可视化开发，制作可交互的动态图表。

2、后端部分

1）网络通信概述

TCP/IP协议学习，wireshark抓包工具使用，网络通信过程详解

2）Linux

Linux操作系统基本命令，系统管理，权限管理，软件安装，Shell脚本编写

3）Java核心编程

数据类型，流程控制语句，面向对象，IO

4）Hadoop

分布式文件系统HDFS，并行处理框架MapReduce，Hadoop集群搭建，项目开发项目内容

二、项目内容

项目名称：海量网站日志的KPI数据分析可视化平台

项目介绍：以“海量网站日志的KPI数据分析可视化平台”为主线，包括项目可视化技术、大数据平台后台数据分析，挖掘技术，最终完成该项目，提升学生项目的设计、分析，实施等各项能力，以便适应企业的需求。

功能介绍：本次海量日志KPI项目系统采用大数据技术Hadoop，通过搭建Hadoop集群，学习如何运用Hadoop集群里分布式文件系统HDFS存储海量数据，与并行计算处理框架MapReduce完成海量日志的分析。前台使用Photoshop按照网站制作标准对网站进行shejishi先，最主要不包含导航栏、侧导航、今日流量可视化、时间可视化、趋势图可视化、新老访客可视化六个模块。通过HTML + CSS对设计稿进行Web页面实现，同时使用Nodejs搭建服务器，通过JavaScript对后台数据进行请求与处理，将处理好的数据使用Echarts插件将进行可视化展示。直观的通过网站KPI指标的分析，从而对网站的发展运营做出战略性预测。

三、项目详细设计

1、设计部分

1.1模块设计

项目结构主要分为六个模块，分别为导航栏、侧导航、今日流量可视化、时间可视化、趋势图可视化、新老访客可视化。

页面细节优化

页面主要色调白色和蓝色构成，蓝色色值：#107eee. 网站尺寸为1440 * 900；文字大小14号、16号、18号；文字颜色主要是#333333、#666666；页面应用到的图层样式有投影、描边。

2、前端页面及功能的实现

HTML+CSS页面布局

网站的布局使用HTML进行页面元素的合理分配，CSS3对元素进行布局修饰，以及页面效果的实现。

JavaScript进行数据请求及分析处理

JavaScript是一个浏览器脚本语言，用它可以操作页面元素，从而实现页面数据的渲染及更新。使用JavaScript中的Ajax技术可以发送异步数据请求

Nodejs进行服务器环境搭建

Nodejs是JavaScript的运行环境，可以使JavaScript语言在服务器端运行，由于Ajax 必须在服务器环境下运行，所以使用Nodejs搭建web服务器，从而支持ajax技术，以及使用Nodejs中的“文件模块”读取本地文件的内容并将读取到数据返回前台。

Echarts插件进行数据可视化展示

在网站KPI分析中，有很多数据是需要使用图标进行展示的，如用户每小时PV统计、页面独立IP的访问量统计、用户的访问设备统计等，复杂的图标使用CSS或Photoshop 制作时会非常复杂。Echarts是百度一款可视化插件，可以使用代码将数据方便快捷的转化为各类图表。

3、后台搭建及设计部分

Nginx日志分析

一个网站服务器日志中，每条日志都代表着用户的一次访问，下面就是一条Nginx服务器日志：

- - [18/Sep/2017:06:51:36 +0000] "GET /wp-includes/js/

HTTP/" 304 0 " socketio-chat/" "Mozilla/ (Windows NT ; rv: Gecko/ Firefox/"

其中包含了多种信息，包含访问者IP、访问用户名称、访问时间、状态码、访问设备等等，从一个网站的日志可以分析出运行情况等。

网站KPI指标

网站KPI指标可以看出一个网站的运行情况，并且通过大数据分析可以得到用户的习惯，为网站的发展运营做出战略性判断

PV（page view）即页面浏览量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。网页浏览数是评价网站流量最常用的指标之一，简称为PV。监测网站PV 的变化趋势和分析其变化原因是很多站长定期要做的工作。 Page Views中的Page一般是指普通的html网页，也包含php、jsp等动态产生的html内容。来自浏览器的一次html 内容请求会被看作一个PV，逐渐累计成为PV总数。

UV（unique visitor），指访问某个站点或点击某条新闻的不同IP地址的人数。

在同一天内，uv只记录第一次进入网站的具有独立IP的访问者，在同一天内再次访问该网站则不计数。独立IP访问者提供了一定时间内不同观众数量的统计指标，而没有反应出网站的全面活动。

IP，网站每天的访问IP数

Browser（访问设备），可以看到用户平常喜欢用PC还是移动端等访问设备访问

项目背景-架构分析

1、在少量数据的情况下

1）.少量数据的情况（10Mb，100Mb，10G），在单机处理尚能忍受的时候，我们可以直接利用各种工具，awk、grep、sort、join等都是日志分析的利器，再配合perl，python，正则表达式，基本就可以解决问题

2）.例如，从Nginx日志中得到访问量最高的5分IP，实现很简单：

cat | awk '{a[$1]++} END {for(b in a) print b”\t”a[b]}' | sort -k2 -r|head -n 10

2、在海量数据的情况下

1）.当数据量每天以10G，100G增长的时候，单机处理能力已经不能满足需求。我们就需要增加系统的复杂性，用计算机集群，存储阵列来解决。在Hadoop出现之前，海量数据存储，和海量日志分析都是非常困难的。只有少数一些公司，掌握着高效的并行计算，分布式计算，分布式存储的核心技术

2）Hadoop的出现，大幅度的降低了海量数据处理的门槛，让小公司甚至是个人都有能力，搞定海量数据。并且，Hadoop也非常适合日志分析系统

日志的手机方式

1、脚本收集

架构设计：应用系统及日志系统架构

架构设计：数据流

1）.日志是有业务系统产生的，我们可以设置web服务器每天产生一个新的目录，目录下面会产生多个日志文件，每个日志文件64M。

2）.设置系统定时器CRON，夜间在0点后，向HDFS导入昨天的日志文件。

3）.完成导入后，设置系统定时器，启动MapReduce程序，提取并计算统计指标

4）.完成计算后，设置系统定时器，从HDFS导出统计指标数据到数据库，方便以后的即时查询

2、Flume

Flume体系架构

1）.data flow描述了数据从产生，传输、处理并最终写入目标的一条路径（图中的实线）

2）.Agent用于采集数据，是Flume中产生数据流的地方，将产生的数据流传输到

collector

3）.collector用于对数据进行聚合，往往会产生一个更大的流

4）.收集数据有2种主要工作模式，如下：

Push Sources：外部系统会主动地将数据推送到Flume

Polling Sources：Flume到外部系统中获取数据

需求分析

此次项目要统计出来的KPI指标

1）.PV（PageView）：页面访问量统计

2）.IP：页面独立IP的访问量统计

3）.Time：用户每小时PV的统计

4）.Browser：用户的访问设备的统计

算法模型

1、变量分析

1、remote_addr：记录客户端的IP地址，

2、remote_user：记录客户端用户名称，

3、time_local：记录时间与时区，

4、request：记录请求的url与http协议，

5、status：记录请求状态，

6、body_bytes_sent：记录发送内容大小

7、http_referer：用来记录从哪个页面链接访问过来的

8、http_user_agent：记录客户浏览器的相关信息，

2、变量解析

1、remote_addr

2、remote_user

3、time_local

4、request

5、status

6、body_bytes_sent

7、http_referer

8、http_user_agent

要想获得上述变量，需要对Nginx日志进行分片处理

3、并行算法

本次采用MapReduce并行算法框架

各个模块算法解析如下

1、PV（PageView）：页面访问量统计

- Map：{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-agent,value:1}

- Reduce :{key:$http_user_agent,value:求和（sum）}

四、项目实现

1 设计部分

使用Photoshop矢量工具、文字工具等进行网页设计

2 前端部分

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。传统的HTPP服务器会由Aphche、Nginx、IIS之类的软件来担任，但是nodejs并不需要，nodejs提供了http模块，自身就可以用来构建服务器，而且http模块是由C++实现的，性能可靠。

打开浏览器，输入localhost:88888我们就可以看到屏幕上的提示，这表明这个最简单的nodejs服务器已经搭建成功了。

Excel和Mac的Numbers里面所带有的图表功能，有一些基本的图表类型，如柱形图、折线图、饼图、条形图、面积图、散点图等等这些基本的图表类型，用Echarts都可以实现，并且Echarts通过程序来控制数据，因此能够做到及时拓展数据

使用Echarts绘制图标需要初始化Echarts实例、配置图标数据、创建图表三个步骤：

3 后端部分

Hadoop集群搭建

Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。

Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。

Hadoop集群有三种配置模式

1、独立模式

所有的程序运行在一个JVM中，不需要启动hadoop的进程，应用的是本地文件系统

2、伪分布式

完全类似于完全分布式，但是只有一个节点

3、完全分布式

可以真正体现出分布式存储及分布式处理思想

我们在这里搭建一个三台Centos主机的完全分布式集群

Hadoop开发环境搭建

在这个部分，我们主要进行Windows+Idea+的一个开发环境搭建，并且让其能够远程提交任务到Hadoop集群

代码开发

1、首先编写代码将文件用脚本或者工具导入到HDFS中

2、进行MapReduce分布式处理程序开发

1.对日志行的解析

函数的实现

函数的实现

4.启动函数的实现

3、远程提交任务到Hadoop集群，对日志文件进行处理

4、将项目打jar包，放在集群进行定时处理