微信公众号数据分析平台趋势分析模块设计与实现

1、苏州大学本科生毕业设计（论文）学院(部)计算机科学与技术学院题 目微信公众号数据分析平台趋势分析模块设计与实现目 录前 言1第一章 绪 论21.1微信公众号数据分析平台21.2本文工作的特色21.3论文的组织结构2第二章 相关技术42.1PHP42.2MySQL42.3AdminLTE42.4CodeIgniter52.5Chart.js62.6JQuery6第三章 系统需求分析与设计73.1设计目标73.2需求分析73.3系统设计73.3.1系统流程图73.3.2系统模块组成93.3.3权限控制流程103.3.4权限提取流程11第四章 系统实现134.1系统架构134.2数据库设计134.2

2、.1文章表134.2.2分组表144.2.3公众号表144.2.4 文章状态表154.2.5角色表154.2.6用户表164.2.7角色权限表164.3页面实现174.3.1页面整体架构174.3.2登录界面174.3.3公众号阅读量点赞量184.3.4发布规律194.3.5热门分析204.3.6点赞数224.4实现难点234.4.1页面切换234.4.2下拉框的级联变化与多选设置244.4.3全局登录控制27第五章 总结与展望295.1课题总结295.2后续工作展望29参考文献31致 谢32附 录33摘 要近年来，作为一种社交媒体，微信的发展趋势可以用势不可挡来形容。而随着微信的不断发展，微

3、信公众号的数量也随着微信用户的增加不断上涨，呈现出百花齐放的景象。面对总量庞大、层出不穷的微信公众号，对其进行分类，有助于将微信公众号细分、简单化，从而加深对微信公众平台的认识，掌握微信公众号的发展规律。微信公众号数据分析平台对微信公众号进行了分组管理，对公众号和其发布的文章进行统计排行分析，对欠活跃公众号，持续发文，异动文章分别进行统计分析，对公众号的阅读量点赞量以及发布规律进行图表展示，对文章和公众号进行热门分析，对点赞数进行可视化展示等。本文主要分析微信数据分析平台趋势分析模块的设计与实现。该模块主要分为四部分，分别是对公众号阅读量、点赞量的折线图展示和柱状图展示，对文章的发布规律以及公

4、众号活跃度的折线图和饼状图的展示，根据阅读量对热门文章进行分析以及其详细情况的展示，以及对文章，公众号点赞数的统计等。关键词：微信公众号；分组管理；数据可视化；AbstractIn recent years, as a social media, the development trend of WeChat can be described as unstoppable. With the continuous development of WeChat, the number of WeChat public accounts has also been increasing with t

5、he increase of WeChat users, showing a flourishing scene. Faced with a large number of WeChat accounts numbered in an endless stream, the classification of the WeChat accounts will help to subdivide and simplify the WeChat public number, thereby deepening the understanding of the WeChat public platf

6、orm and grasping the development law of the WeChat public number.The WeChat public number data analysis platform has grouped management of the WeChat public number, conducted statistical analysis on the public number and articles published by it, conducted statistical analysis on the under-active pu

7、blic number, continuous publication, and transaction articles, and the number of public number readings. We liked the quantity and published rules to display charts, conducted popular analysis on articles and public numbers, and visualized the number of likes.This article mainly analyzes the design

8、and implementation of the trend analysis module of the WeChat data analysis platform. The module is mainly divided into four parts, which are the line chart display and bar chart display of the public number reading amount, the number of like points, the publishing rule of the article, and the line

9、chart and pie chart display of the active number of the public number. The analysis of the article and the display of detailed information, as well as statistics on articles, public points, etc.Keywords: WeChat public number; group management; visual display;IV前 言随着微信公众号越来越多，公众号及其文章的相关数据越来越复杂，对公众号的管

10、理以及运行情况的了解也越来越困难，因此一种通过web来管理特定公众号并对其文章等数据进行统计分析的系统应运而生。微信公众号数据分析平台的趋势分析模块主要是对公众号及其文章的相关数据进行统计分析后以图形和表格的形式进行可视化展示，比如说对部分公众号的阅读量和点赞量以折线图的形式展示其变化趋势，并用柱状图对二者进行对比。分析公众号或文章在一天，一周，一月的发布规律，以及对公众号的活跃度以环形图的形式进行统计分析。以阅读量为度量统计在各个阶段的文章或公众号的数量，并显示其详细信息。或者是对公众号和文章的点赞数进行分析等等。微信公众号数据分析平台采用B/S架构，也就是通常说的浏览器/服务器架构，用户只

11、需连接互联网（局域网）便可通过浏览器访问系统，无需安装客户端。该系统采用PHP语言搭建，使用MySQL进行数据的存储，保证了系统的快速和稳定性，同时MySQL数据库也使得系统对小数据处理的效率得到了保证，并且不会占用电脑过多的资源。在该系统中各分组归类条理清晰，用户可以直观的学习使用本系统。本毕业设计专注于微信公众号数据分析平台的趋势分析模块的设计，主要是以各种图形的形式显示公众号和文章的相关信息。该模块的主要内容包括：（1） 以折线图的形式展示一段时间内一个分组中部分或全部微信公众号的阅读量和点赞量变化趋势，并以柱状图的形式展示二者的比较情况。（2） 以折线图的形式展示某个分组在天、周、月内

12、的文章发布规律和公众号获取程度，并同时添加公众号活跃度的饼状图表示。（3） 以折线图的形式展示一段时间内一个分组中的公众号或文章阅读数在不同范围内的趋势，并附上一个表格提供图中文章或公众号的详细数据。（4） 一段时间内一个分组中文章平均点赞数、公众号平均点赞数和总点赞书的折线图展示。第一章 绪 论1.1微信公众号数据分析平台随着微信用户的增加和新媒体的兴起，微信中各种公众号如雨后春笋般冒出，公众号及其文章的相关数据也越来越复杂，对于许多拥有多个公众号的组织或公司来说，对这些特定的公众号进行管理和数据分析也是无法直接实现的。目前市面上出现了各种公众号数据统计分析相关的系统，但依然远远不能满足市场

13、需求。微信公众号数据分析平台在学习其它先进简捷的公众号数据分析系统的技术和分析了市场需求后，将主要目标放在了对公众号进行分组后再分析其数据情况的需求上。这里的分组不仅仅是进行政务类，媒体类这样大体上的分类，更是做到了有针对性的分类，客户可以自己选择要添加到分组中的公众号，从而在进行公众号的数据统计和分析是，集中在这个分组中的公众号，避免了不必要的干扰，也使得操作更加方便。1.2本文工作的特色本文实现了微信公众号数据分析平台的趋势分析模块，主要目的是以图表的形式展示某个分组中公众号和文章的相关数据，分析其变化趋势，并提供良好的交互性能使得用户可以轻松的选择想要查看的数据并获得最直观的展示。此外，

14、该模块显示界面简洁，交互操作友好，用户只需要通过简单的知道就可以对整个模块进行操作。1.3论文的组织结构第一章：绪论。该章介绍了微信公众号数据分析平台的研究背景、用户对象、本文的工作特色以及微信公众号数据分析平台的趋势分析模块的主要功能，在最后介绍了本文的结构内容。第二章：相关技术简介。该章介绍了实现系统各部分所需的相关技术，包括选择使用PHP作为核心的开发语言，MySQL作为数据库存储，admiLTE提供前端页面支持，CodeIgniter进行后端逻辑处理，Chart.js提供作图技术，JQuery提供事件绑定功能和AJAx异步处理机制。第三章：系统需求分析与设计。该章介绍了微信公众号数据分

15、析平台趋势分析模块的设计目标、需求分析、概要设计以及预期的成果。通过对微信公众号数据分析平台趋势分析模块进行市场调研分析，对该系统模块进行初步设计，画出相关的系统流程图、类图和数据字典。第四章：系统实现。该章介绍了系统模块的架构、数据库表的设计，各个页面的实现，页面展示数据的说明等。第五章：总结与展望。总结课题的完成度，研究成果，分析依然存在的缺点、可行的改进的方式等。第二章 相关技术2.1PHPPHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于W

16、eb开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法1。它可以比CGI或者Perl更快速地执行动态网页。PHP语言简单、易学、源码开放、可操纵多种主流与非主流的数据库、支持面向对象的编程、支持跨平台以及完全免费等特点，越来越受到广大程序员的欢迎2。PHP的解释运行机制使得每个PHP页面被解释执行后，会对所有的相关资源进行回收3。也就是说，PHP在语言级别上没有办法让某个对象常驻内存。2.2MySQLMySQL是最流行的关系型数据库管理系统之一，在WEB应用方面，MySQL是最好的关系数据库管理系统应用软件。作为一种关系数据库管理系统，MySQL将数据保存在不同的表中

17、，增加了速度并提供了灵活性。MySQL支持视图、事务、触发器和存储过程等4。phpMyAdmin 是一个以PHP为基础的，以网站方式架构出来的MySQL的数据库管理工具，他让用户可以在浏览器中以WEB的形式管理MySQL数据库。本系统采用PHPMyAdmin作为数据库的管理工具，可以通过web方式控制和操作MySQL数据库，如建立、复制、删除和修改数据等等。使用PHPMyAdmin可以简化传统的MySQL命令行的操作，并且如果数据库的访问量很大，命令行中数据的读取显示就会变得相当繁杂，PHPMyAdmin使得数据库的管理变得相当简单，让我们可以轻松的查看表的结构以及其中的数据，并且对于查询出的

18、数据PHPMyAdmin还提供了排序和筛选功能。2.3AdminLTE系统前端使用adminLTE协助开发。adminLTE是基于bootstrap3的前端框架，并且将bootstrap3进行修改来适应自身的样式。而除了使用bootstrap3的大多数样式之外，自身也提供了一些非常实用的样式包装，使得前端的开发更加快捷高效5。AdminLTE提供了许多成型的组件，良好的颜色搭配，简化了系统中前端的开发。虽然少了个性化的定制，但是对于一般的显示需求，该框架足以满足。Bootstrap是当今一个十分流行的开源前端框架，主要用于WEB应用程序和网站的建设。以HTML、CSS、JavaScript为基

19、础，提供了优雅的前端组件样式，如链接的动画，button的颜色、大小，输入框的圆角、边框粗细、颜色等等。此外还包含了JQuery插件，使得Bootstrap可以样式的动态效果，如手风琴、下拉框、模态框等等。在Bootstrap中还提供了一个先进的栅格系统，将页面中的一个内容块等分成十二个部分，便于布局和排版。结合栅格系统和Bootstrap针对许多样式提供的不同尺寸，便可以轻易的制作出响应式布局页面。Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等，以及十几个自定义的jQuery插件6。2.4CodeIgniterPHP开发框架把使用PHP开发WEB

20、程序的过程摆到了流水线上。也就是说，PHP开发框架让我们可以以工厂化的形式快速进行软件开发（RAD）。这节约了我们的时间，并且使得我们开发的程序更加稳定和有预见性，也使得我们减少了重复代码的开发7。这些框架还通过确保正确的数据库操作以及只在表现层编程的方式帮助初学者创建稳定的程序。CodeIgniter是一个简单快速的PHP MVC框架8。许多企业尝试体验过大部分的PHP MVC框架之后，都选择了使用CodeIgniter，主要是由于它让企业有更多的自由空间进行开发，并且提高项目的开发速度9。CodeIgniter不需要大量代码（1.6.2 版本仅为2.8 MB，其中的1.3 MB是可以删除的

21、用户文档），也不会要求插入类似于 PEAR 的庞大的库。它在PHP 4和PHP 5中表现同样良好，允许创建可移植的应用程序。最后，不必需要模板引擎来创建视图只需沿用旧式的HTML和PHP即可10。CodeIgniter中数据流贯穿整个系统的过程：1.index.php是前端默认的初始控制器，在其中会对运行项目所需要的资源进行初始化。2.Router可对请求的URL进行判断，以确定应该有哪一个控制器来处理这个请求。3.如果用户请求的页面存在缓存文件，则系统不会像正常情况下一样到服务器请求页面，而是由浏览器直接读取缓存数据进行显示。4. 在应用程序控制器（ApplicationController

22、）装载之前，会对HTTP请求以及用户提交的数据进行过滤检查，以判断是否存在风险。5.控制器（Controller）装载模型、核心库、插件、辅助函数，以及任何处理特定请求所需的其它资源。控制器（Controller）负责装载核心库、模型、视图、辅助函数等其他处理请求会用到的资源。6.视图（View）是发送到浏览器端解析渲染并进行显示的内容。如果开启了缓存（Caching），则视图会被缓存起来，之后对该页面的请求可能就是直接从缓存中读取11。2.5Chart.jsChart.js是一个简单的，面向对象的客户端图形库，允许开发人员使用多种不同的方式来对数据进行可视化。其中每个方式都是完全自定义，带有

23、动画效果，而且看起来非常好看。它依赖于HMTL5中的 canvas元素，并且支持所有现代浏览器。Chart.js使用不同的方式让数据变得可视化。基于HTML5 cnavas技术，Chart.js不依赖任何外部工具库，是一个轻量级的图形库，且使用效果流畅12。微信公众号数据分析平台的趋势分析模块结合Chart.js技术，就可以显示出直观生动的图表，能够清晰的展示数据的变化趋势，以及相关的数据统计情况。2.6JQueryJQuery是一个快速、简洁、优秀的JavaScript框架，倡导写更少的代码，做更多的事情13。它对JavaScript的常用功能代码进行了封装，并提供了一种简便的JavaScr

24、ipt设计模式，目的是为了事件处理过程、HMTL文档操作、Ajax交互和动画设计。本模块使用JQuery主要是为了便于开发，一是系统中经常作为搜索条件之一的日期选择器是依赖于JQuery的；二是使用JQuery可以更方便的实现页面的事件绑定，提高用户的操作的可交互性；最后也是最重要的是，JQuery简化了ajax的操作，使得系统可以轻松的进行异步请求和局部刷新。第三章 系统需求分析与设计3.1设计目标本毕业设计的目标，是实现基于Web的微信公众号数据分析平台的趋势分析模块。此模块主要是对微信公众号及其文章的发布规律，阅读数和点赞数以图表的形式进行可视化展示，便于管理人员和用户直观的了解公众号和

25、文章的相关数据情况。3.2需求分析微信公众号数据分析平台系统的是一款Web端管理系统，用于对公众号进行分组管理。而其趋势分析模块则主要是对公众号及其文章的发布规律以及阅读数、点赞数等相关数据进行可视化展示。其中页面显示主要需求主要分为四个部分：1. 对公众号阅读量点赞量的展示。可以选择查看相应分组内的部分公众号在一段时间内点赞量和阅读量的变化趋势，并以柱状图的形式展示二者的比较情况 2. 发布规律。可以查看相应分组内公众号在天、周、月内发布文章的规律，以及对各个公众号发布文章数量进行统计。3. 热门分析。统计相应分组内的公众号或文章在一段时间内阅读量在5000+、10000+、50000+以及

26、100000+的数量并进行可视化展示，且显示出相关的详细数据。4. 点赞数分析。对相应分组内公众号或文章在一段时间内的总点赞数、平均点赞数进行统计分析并展示。最后需要提出的是，一般情况下，文章的阅读量和点赞量都是会变化的。也就是说，文章发布当天和第二天的数据是不同的。因此，本系统在数据库中存储了一篇文章的相关数据在7天内的情况，但对数据进行统计分析的时候，一般统一选择发布当天的数据。3.3系统设计3.3.1系统流程图图3.1 系统流程图如图3.1系统流程图所示，系统流程主要分为以下几个步骤（1）在系统开始运行时，系统会先连接数据库，如果连接成功，则显示登录页面；若连接不成功，则显示错误信息。（

27、2）在数据库连接成功的情况下，会显示登录页面，用户可选择免登陆预览或者用户名密码登录。登录成功则显示系统首页，不成功则显示错误信息，用户可以再次登录。（3）进入系统首页后，在左边的导航栏中点击趋势分析模块，可在其二级目录下选择更具体的功能模块进行操作分析。趋势分析是系统的一级导航菜单，其下还有四个二级导航菜单，分别为：公众号阅读量点赞量，发布规律，热门分析和点赞数。点击想要查看的二级菜单，页面才会跳转到对应的内容页面，提供之后的查询和数据显示功能。整个系统采用经典B/S（Browser/Sserver）网络架构模式，也就是浏览器/服务器架构。该架构将大部分的逻辑业务都放在了服务器上执行，而客户

28、端一般只提供与用户进行交互和简单的数据处理功能。使用这样的架构，使得用户只需要一台能联网的电脑便可以使用系统，不需要再去下载客户端，非常方便。而且当系统需要更新维护时，只需要修改发布到服务器上的代码即可，而不需要针对每一个客户端进行修改。但是本系统还没有实现完全的前后端分离，前端和后端之间仍有一定的耦合性。3.3.2系统模块组成根据系统流程图，设计系统模块。如图3.2所示，显示了系统模块图，系统后端采用的是MVC设计模式。根据系统流程图中的主要流程分析，基于B/S架构模式，系统还采用了MVC模式来对系统进行功能分解，其主要思想如图3.2所示。图3.2 系统模块图使用MVC模式后，系统大致上可以

29、分为四个本模块，除了M，V，C三个模块之外，还有一个DB也就是数据库模块。DB是数据库模块，主要负责数据的存储，并提供简单快速的存取，排序等操作。M是Model的简写，主要负责对数据的操作，也就是一般系统的业务逻辑处理。此外，Model也负责对数据库的直接操作，一般意义上的增删查改都是在Model中直接进行。C是Controller的简写，主要负责对请求的处理和数据的加工以及传送。在前端显示页面中用户进行查询或其它操作后，请求都是先传到Controller模块中，Controller提取请求中的信息，在对数据进行简单的加工后传到Model中进行逻辑处理。再对Model中传回的处理结果进行简单的

30、包装，结合相应的前端显示页面进行用户操作结果的反馈显示。总的来说，Controller相当于一个转运中心和控制中心，连接着数据处理模块和视图模块，并判断应该选择哪一个页面在显示数据。系统使用的CodeIgniter框架便是是基于MVC模式的，这样的设计模式使得视图层和业务成分离，降低了二者之间的耦合性，很容易改变程序的数据层和业务规则。且该模式允许使用各种不同样式的视图来访问同一个服务器端的代码，使得多个视图能共享通过一个模型，提高了代码的重用性。但是虽然数据层和业务层耦合性低了，业务层也就是视图层和控制器也是相分离的，但二者却是联系紧密的部件，如果没有控制器的存在，视图的应用是很有限的，反之

31、亦然，这样也就使得二者难以独立重用。3.3.3权限控制流程出于对数据的安全性和保密性，有的用户不希望自己所管理的公众号分组的内容被其他人操作或查看。或者是有的用户只关心自己管理的的分组中的公众号信息，不希望因为其他分组公众号或文章掺杂在操作内容和操作结果中反而使得操作过程更加复杂，操作结果更加冗余。图3.3 权限控制流程图因此系统添加了权限控制，如图3.3所示，主要是显示了系统权限控制的流程图，该系统的权限控制主要是为了对各个分组管理员的权限做出限制，既在对公众号分组管理之后，某个角色下的管理员，只能查看一个或几个分组的数据。此系统权限控制的主要思路如下：（1） 在数据库中创建角色表，用户表，

32、角色权限对应表。其中用户表中每个用户对应一个角色，而角色权限对应表中则规定了每个角色可以访问的公众号分组。因此当一个用户登录后，可以通过这几张表的关联查询获得用户能够访问的公众号分组，从而在前端页面中只显示这些分组。（2） 用户在登录界面，可选择免登录预览或用户名密码登录。然后在后台判断用户的角色以及该用户可以访问的分组数据，并在页面中只显示这些可以访问的分组相关的数据。3.3.4权限提取流程图3.4 权限提取流程图如图3.4所示，验证权限的流程中，首先需要用户登录页面。在本系统中，即使用户选择了免登陆预览，对于系统来说，也是采用了用户名和密码登录。不过用户名和密码是在系统中早已设定好的默认值

33、。之后，根据登录后的用户信息，获得用户能够访问的公众号分组。之后进入到前端界面中，用户只能看到和操作自己能够访问的数据，其余数据不予显示。如图3.5所示，显示了在权限控制中，用户、角色和所能访问的权限的类图，用户拥有getUserRole()和getUserPermission()方法，由此用户可以获得角色和权限。Role类中包含roleId和roleName属性，getRole()方法主要用于获取角色。Permission类中包含permissionId和permissionName属性，getPermission()方法用于获取权限，既对应的公众号分组14。图3.5 用户角色权限类图第四章

34、 系统实现4.1系统架构图4.1系统架构图系统的整体架构如图4.1所示，用户通过浏览器访问服务器（nginx），服务器对用户的请求进行处理，根据用户的请求，可能会对数据库进行读写操作。服务器端所有操作完成后，会将操作结果返回给客户端，客户端再根据改结果决定将要显示的内容。根据请求的不同，返回的结果可能是帮助页面显示的纯数据，也有可能是这个将要显示的页面代码。值得指出的是，并不是所有的用户操作都会被传到服务器端。有的情况是前端页面的JavaScript提供的交互效果和简单的验证措施便已经足够，还有的情况则是用户请求的内容被保存在浏览器的缓存中，浏览器可以直接从缓存中读取结果，而不需要再次占用网络

35、资源去访问服务器。4.2数据库设计4.2.1文章表如下页表4.1，显示微信公众号文章的数据字典，文章表存储文章的基本信息，是系统中显示、统计和分析数据的主要来源。有一个外键official_account，表明发表这个文章的公众号，指向公众号表的主键。而对于一篇文章而言，该文章可能是该公众号原创的，也可能是该公众号进行转载的，因此添加了copyright字段，来表示该文章是否是原创文章。4.2.2分组表如下页表4.2，显示微信公众号分组的数据字典，分组表存储的分组信息。分组表中将公众号进行了分组，既方便了系统给用户提供的查询操作，也使得公众号进入了权限控制系统，既如用户没用相关权限，不能查看相

36、关公众号的信息。4.2.3公众号表如下两页表4.3，显示公众号表的数据字典，公众号表主要存储公众号的基本信息，也包含了该公众号最新发布的文章的基本信息。其中qr_code是公众号的二维码图片的访问地址，在系统的显示页面中，查看公众号的分组状态时，可通过该字段直接将二维码图片显示出来。该表中的biz字段可以理解为公众号的身份证ID，对于同一个公众号而言，这个biz的值是固定不变的，且每个公众号的biz都应该是唯一的。表4.1 文章表 wsa_article字段类型说明IdInt编号official_accountVarchar公众号的账号publish_timeDatetime文章发布时间tit

37、leVarchar文章标题summaryVarchar文章摘要urlVarchar文章地址add-timeDatetime文章信息入库时间rankingInt文章当天推送位置排行，1为头条，其他为位置顺序source_urlVarchar原文地址authorVarchar文章作者copyrightVarchar1原创|2非原创|3未知delete_timedatetime最后一次修改/删除时间deletedInt文章状态,1删除，0正常，2修改表4.2 分组表 wsa_group字段类型说明IdInt编号nameVarchar分组名称descriptionVarchar分组描述tagsVarc

38、har分组标签official_accountstext分组内的公众号的ids，以','分隔delete_timeDatetime删除时间deletedInt是否删除4.2.4 文章状态表如下页表4.4，显示文章状态表的数据字典，该表主要存储文章自发布以来一周内的阅读数、点赞数等相关信息。从发布当天起，每天记录一次，既一片文章最终总共记录七行数据。这也意味着，在表中，一般情况下，一篇文章的article_id会出现7次，系统中显示和统计时一般以第一天的数据为准，而在遇到需要展示连续趋势或者总阅读、总点赞数是才会使用这些数据。表中article_id为外键，依赖于wsa_arti

39、cle中的id。4.2.5角色表如下页表4.5，显示角色表的数据字典，存储角色的相关信息。角色表主要用于权限控制，其主键作为用户表的外键，且与分组有着对应关系。除了各个分组对应的角色外，系统中还有一个管理员角色，可以访问操作所有数据，而且还有一个游客角色，使得即使没有用户名和密码的用户，也可以访问部分内容。表4.3 公众号表 wsa_official_account字段类型说明IdInt编号official_accountVarchar公众号账号nicknameVarchar公众号名字bizVarchar官方biz，即腾讯对外公布的公众号的唯一标识符typeInt公众号类型qr_codeVar

40、char公众号二维码地址descriptionVarchar公众号描述authenticationVarchar是否认证authentication_infoVarchar认证信息countryVarchar公众号国家provinceVarchar公众号省份cityVarchar公众号城市latest_article_titleVarchar最新发布文章标题latest_article_urlVarchar最新发布文章链接latest_article_publishtimeDatetime最新发布文章发布时间update_timeDatetime更新时间update_statusInt更新状态

41、statusInt公众号状态Delete_timeDatetime删除时间deletedInt是否删除,0未删除，1删除表4.4 文章状态表 wsa_article_stats字段类型说明IdInt编号article_idInt文章编号read_countInt阅读数like_countInt点赞数add_timeDatetime数据入库时间delete_timeDatetime删除时间deletedInt是否删除,1删除，0未删除表4.5 角色表 wsa_role字段类型说明IdInt编号nameVarchar角色名称descriptionVarchar角色描述rankInt角色等级排名st

42、atusenum(0,1)角色状态4.2.6用户表如表4.6，显示用户表的数据字典，该表主要存储用户的信息。表4.6 用户表 wsa_user字段类型说明IdInt编号accountVarchar账号passwordVarchar密码role_idInt权限分组realnameVarchar真实姓名genderVarcharf表示女，m表示男emailVarchar邮箱mobileVarchar手机号码visitsInt登录次数login_timeDatetime最后一次登录时间（时间戳）statusInt账号状态，1为可用，0为禁用delete_timeDatetime删除时间deleted

43、Int1:表示已删除，0表示未删除4.2.7角色权限表如表4.7，显示角色权限表的数据字典，主要是对角色分配相应的公众号分组，在结合用户对应不同的角色，因此可以判断用户可以访问的公众号分组数据。表4.7 角色权限表wsa_role_priv字段类型说明IdInt编号role_idInt角色表中对应的角色idmoduleVarchar角色对应的分组id, 以','分隔methodVarchar方法（页面、按钮等）名4.3页面实现4.3.1页面整体架构微信公众号数据分析平台页面显示分为四个部分。1. 公众号阅读量点赞量。可以选择查看相应分组内的部分公众号在一段时间内点赞量和阅读量的

44、变化趋势。2. 发布规律。可以查看相应分组内公众号在天、周、月内发布文章的规律，以及对各个公众号发布文章数量记性统计。3. 热门分析。统计相应分组内的公众号或文章在一段时间内阅读量在5000+、10000+、50000+以及100000+的数量并进行可视化展示，且显示出相关的详细数据。4. 点赞数分析。对相应分组内公众号或文章在一段时间内的总点赞数、平均点赞数进行统计分析并展示。4.3.2登录界面图4.2 登录界面如上页图4.2所示，登录提供了使用用户名密码以及免登录预览两种方式，使用用户名密码登录成功后用户会具有特定的角色，可以访问对应的数据。实际上，免登录预览也是一种系统默认的角色，该角色

45、可以访问系统所指定的数据。4.3.3公众号阅读量点赞量如图4.3所示，系统显示了自媒体分组中6个公众号在4月29日到5月6日之间阅读量变化的曲线图。图4.3 公众号阅读量变化如图4.4所示，系统显示了自媒体分组中6个公众号在4月29日到5月6日之间阅读量变化的曲线图。图4.4 公众号点赞量变化如下页图4.5所示，系统显示了自媒体分组中6个公众号在4月29日到5月6日之间阅读量总数和点赞量总数的柱状图对比。图4.5 点赞量和阅读量对比图从上页图4.3中可以看出，在这一个部分，共提供了分组，公众号和时间三个查询条件，且下拉框的形式非常方便用户的查询且不会出现用户使用时输入格式错误的情况。此外，在公

46、众号部分，不仅提供了公众号的多选功能，还提供了全选，阅读量前十名和点赞量前十名这三种特殊的选择，如图4.6所示。其中点赞前十名，阅读量前十名和select all属于单选框，而其他具体公众号均可多选。图4.6 公众号的选择查询条件4.3.4发布规律系统在这一部分主要显示分组中公众号或文章在一段时间内的发布规律和活跃度。如下页图4.7所示，其中包含了文章发布规律曲线图和公众号活跃度环形图。在选择查询方式的下拉框中可以选择按天、周、月查询，公众号活跃度的环形图则是表示在这一段时间内发布一定数量的文章的公众号的个数统计。图4.7 发布规律此外，这一部分还提供了公众号活跃度曲线图，主要表现在每个时间点

47、发布了文章的公众号的个数。如图4.8所示：图4.8 发布规律-公众号活跃度4.3.5热门分析系统在这一部分主要是对文章或公众号的阅读数进行统计。如下页图4.9所示，在上方的选择查询方式下拉框中，可选择文章和公众号进行查询。而在曲线图的右上角可以看到，有5000+、10000+、50000+和100000+四个标签，选择任意一个标签，则曲线图显示阅读量来该数值范围内的趋势情况。且系统是在一开始就同时画好了这四个曲线图，因此在标签间切换时，系统不会再去请求数据，使得标签间的切换非常流畅。图4.9 热门分析在这一部分，不仅仅提供了这些文章或公众号的统计曲线图，还提供了与图对应的文章或者公众号的信息。

48、如图4.10所示，表格中内容与曲线图中的内容是相对应的，且表格的内容也会随着折线图中阅读量标签的切换而变化。值得一提的是，这个表格并不是使用html标签直接创建的，因为相关数据都是通过ajax异步请求获得的，所以整个表格以及其中的内容都是通过DOM操作动态添加的节点。图4.10 热门分析-详情此外，在表格中还提供了分页功能，在左上角，可以选择表格中一页显示10、25、50和100行数据。对应的，在表格的右下角可以看到，有对应的分页可以选择。另外，表格中还提供了排序功能，表中的“发布时间”、“当天阅读数”、“当天点赞数”和“周点赞数”这几个字段均可以进行排序，点击相应的表头列，表格中的内容可以根

49、据该列进行从小到大或从大到小的排序，且相应的表头列上的图表也会随之变化，表示排序情况。当以文章为查询条件时，标题一列不仅仅提供了文章的标题，其中还加入了文章的链接，也就是说，点击该标题会打开一个新标签，显示文章内容。最后，在表格的最右上角，有一个导出当前表格按钮，可以将表格中的内容导出为Excel表格。如图4.11所示，该图显示了导出与曲线图和表格对应的数据的导出情况。图4.11 热门分析-导出4.3.6点赞数图4.12 点赞数曲线图点赞数是评判文章或公众号的重要标准之一，在这一部分系统提供了分组中的文章和公众号在一段时间内的点赞数曲线图。如上页图4.12，显示了县市区发布类分组中的公众号在5

50、月3日到5月9日之间的平均点赞数。另外，在这一部分还可查看文章平均点赞数和总点赞数。4.4实现难点4.4.1页面切换系统采用的adminLTE框架来构造前端内容，adminLTE提供了很多已经成形的组件，省去了我们很多自己布局、写样式、调位置的麻烦，使得开发可以快速进行。AdminLTE的整体结构如下页图4.13所示，其结构大体将页面分为4各个部分，其中header是页面的头部，主要显示系统的logo、名称以及当前用户的信息等；left是系统的侧边栏，也就会说系统的导航栏，其中包含了一级菜单，二级菜单甚至更多层次；main中为系统显示信息的主要页面，用户想要查询的信息基本都在main中显示，用

51、户大部分的操作也在main中进行分；footer则主要显示系统的授权、开发团队、错误反馈等信息。图4.13 前端页面结构图在正常情况下，用户对系统进行操作时，header、left、footer几乎是不会有变化的，除了为了方便用户的查看，left中的导航栏一般会根据当前main中显示的信息对与其相对应的菜单使用不同的样式，使得菜单的显示更具有针对性。在这样的情况下，明显可以看出：header、footer、left是可以复用的模块，但是adminLTE框架却并没有对其进行分离。因此在adminLTE框架中，系统的每一个html页面中，都包含有header、footer、left部分的代码，在这

52、些页面中它们几乎是一模一样的。所以，在系统开发的时候，我们将header、footer、left改为系统中的可重用模块。整个系统依然分为header、footer、left、mian四个部分，但是header、left和footer在第一次传到浏览器端之后，就作为一个大的框架，不再变动（除了left部分中的导航栏样式会随着main的变化而有所不同之外，该变化可使用JavaScript或者jquery来解决）。然后使用PHP将main中的内容嵌入到其中即可，这样做的好处是使得每一次改变页面内容时，服务器只需要传递一个main页面的代码即可，减少了数据的传输。也使得开发代码时将header、foo

53、ter、left的内容作为一个可重用的代码模块来看待，有效的减少了代码的冗余。值得提出的是，随着技术的发展，对于这样的情况，有很多的解决方案。对于现在前端流行的单页应用框架而言，这是可以从根本上解决的问题。因为在如angular2、react、vue等单页应用框架中，用户进行请求后，服务器端传回的将只是显示所需要的数据，然后由前端根据用户的操作和服务器端的数据进行变化，在整个过程中，基本上浏览器端只需要进行一次页面请求就足够了，之后的操作都是在该页面上进行的变化，因此叫做单页应用。在单页应用框架中，基本不需要页面的传递，进行的大多是页面中局部的刷新或改变，因此这样的应用场景其实在单页应用中得到

54、了很好的解决。4.4.2下拉框的级联变化与多选设置在用户进行查询操作时，为了提供更好的用户体验，我们将分组的选择和公众号的选择以下拉框的形式展示出来。这样不仅仅避免了用户需要输入内容的麻烦，也使得系统中不必为了验证用户输入的正确性或考虑用户输入无效数据而做大量的预防措施。但是每个分组中都含有多个公众号，因此公众号下拉框中的内容是由分组下拉框中选定的分组决定的。如图4.14和图4.15所示，分别展示了自媒体分组和政务类分组选中后的选择公众号中的内容标签。从图中还可以看出，考虑到公众号内容可能过多不易于显示的情况，我们提供了滚动条和搜索功能，使得用户对公众号的查找变得更加方便。图4.14 自媒体分

55、组公众号图4.15 政务类分组公众号公众号下拉框中的内容会随着选中的分组变化，但这并不意味着这些对应内容是直接写好在页面代码中，由JavaScript或JQuery进行事件绑定来完成下拉框的级联变化的。事实上，考虑到分组中的公众号的可扩展性，也就是说，分组中的公众号可能会增加或减少，因此如果将这些对应的内容直接写好在代码中，则每一次分组内容有变化都需要修改这些代码，这无疑增加了系统维护的复杂性，每一次修改数据库这部分内容时，都需要对应的修改页面中的代码，无疑是增加的系统的耦合性。而考虑到分组也是可能增加的，因此，在本系统中，分组的内容是从数据库中读取的，也就是说，每次点击侧边栏进入到另一个页面

56、时，服务器除了传回页面显示的基本内容外，还从数据库中读取了分组的信息。之后再由前端页面显示在下拉框中。与分组的获取和显示不同的是，分组是一次性获取所有分组，而公众号必须先确定分组，才能确定获取并显示哪些公众号。因此，虽然在表面上看起来，选择了分组之后，接着在选择公众号下拉框中就会出现对应的分组以供选择，这似乎是理所当然的。然而，其实在选择了分组之后，首先会出发在页面中使用JQuery绑定的内容变化事件，然后在该事件处理代码中，会获取选中的分组的信息，在通过AJAX向服务器端发送请求以获取分组中的公众号数据。在获取到服务器传回的数据后，再通过JQuery将这些公众号数据动态的添加到公众号选择的下拉框中。因此，在本系统中，对于一个简单的下拉框级联，实际上每一次变化都会有一次http请求。而且为了显示的方便，服务器端不仅仅是传输的数据，在服务器端，获取了数据之后，是在将其拼接成HTML代码的形式在传送回来的。客户端在获取到这些代码后，在进行简单的