开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第五阶段）：（扩展）网站流量日志分析--数据可视化-- vue 版--前端项目搭建、接口规则说明】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/697/detail/12261
（扩展）网站流量日志分析--数据可视化-- vue 版--前端项目搭建、接口规则说明
内容介绍
一、前端项目的搭建
二、前端项目的启动
三、接口数据如何查看
另外一个版本 vue 版本的数据报表展示该如何实现，对于大数据开发来说，要做的是后台具体封装，因为前端需要怎样的数据格式会以建筑的形式发送，需要考虑的是如何在后端以它所需要的格式统计出来的数据。
一、前端项目的搭建
为了方便，必须让数据先运行起来。
1、打开参考资料中的 vue 版本，里面会讲到前端项目启动的方式，可以在 Windows 官网中安装。
（1）首先要安装 Node，在 Windows 中安装时要注意以下几个事项，需要打开Node 的官网，里面有提供 Windows 的安装包，下载之后安装即可。
（2）安装之后要进行优化，如果不做修改，后续的包会安装在 C 盘中，就会导致 C 盘越来越拥挤，可以在指定路径下指定两个文件夹，放在全局模块的路径上。
创建完两个空文件夹之后，需要在 npm 命令行中设置两个参数。
接下来设置环境变量，在里面把 node_path 路径改为刚才设置的路径。
改完之后的好处在于后续安装全局模块的时候，不会默认放在系统 c 盘中，对于后续维护比较方便。
（3）安装之后可以输入命令进行测试验证
（4）node 安装完之后还要安装一个 cnpm，指向淘宝的一个库。这是由于国内网络原因，下载一些包的时候会比较慢。
二、前端项目的启动
课程资料中的 project 文件就是前端项目的启动资料。
1、将其复制到 Windows 下的任一路径中解压，打开工程的根目录，安装依赖包并运行，如果报错，可能原因为网速慢，可以按照教程修改。
2、在 Windows 中要在当前目录打开可以按住键盘上的 shift 键，右击空白处选择在此处打开命令窗口
（1）填写 cnpm i，这一步是自动填写项目所需要的依赖包，接下来回车联网，就可以自动下载。
（2）代码跑完之后填写 npm start 启动，就可以自动加载。
（3）跑完之后提示可以通过一个网址进行访问。
打开浏览器输入网址，就可以看到前端项目。点击登录就来到了数据报告展示页面。
后端需要做的是如何将数据动态地展示出来，根据前端提供的接口方式按照前端所需要的格式进行拼接 .
三、接口数据如何查看
1、前端项目中打开 confit -index，如果是本地开发的话还要另起一个本地路径。
在企业当中，作为后端人员，开发接口输入格式都要根据接口的规范与前端进行配合 。
2、接下来查看接口，浏览器打开路径就进入了接口。点开项目分析组--大数据-盘析，这就是网站浏览日志分析项目，里面按照不同的模块展示了每个接口的路径，路径前面还要加上拼接。
3、接口不需要后端定义，但需要看一下参数，基本信息页面会显示接口的具体地址，下面有请求参数的相关说明，包括返回值的数据格式。
4、点开 mock 地址，会发现数据格式是 jason 格式。因此可以设置一个对象，把这个对象的数据通过后端的查询返回出来，放到前台就可以进行展示。
有些的接口数据格式稍比较复杂，X 轴可能只有一个时间，但y轴可能对应多个不同的数据。
但是打开接口，数据格式也是标准的 jason 格式，无论是什么样的数据接口，后端要做的都是把后端查询的数据以他所需要的定义格式返回。
