数据展示网站

基于期中项目爬取的新闻,完成一个数据展示网站

基本要求:

  1. 用户可注册登录网站,非注册用户不可登录查看数据
  2. 用户注册、登录、查询等操作记入数据库中的日志
  3. 爬虫数据查询结果列表支持分页和排序
  4. 用Echarts或者D3实现3个以上的数据分析图表展示在网站中
  5. 实现一个管理端界面,可以查看(查看用户的操作记录)和管理(停用启用)注册用户。

接下来将依次实现以上五个功能。

前期准备

  1. 创建三个表,news, user, user_action
    其中news是之前爬取出的新闻的数据
    user存储用户信息
    user_action存储用户行为
user表:
  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT, 用户id(自增)
  `username` VARCHAR(45) NOT NULL,用户名
  `password` VARCHAR(45) NOT NULL,用户密码
  `registertime` datetime DEFAULT CURRENT_TIMESTAMP,注册时间
  `status` INT DEFAULT 1, 用户状态(停用/可用)
  `administor` INT DEFAULT 0,是否注册为管理,拥有管理员权限
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_UNIQUE` (`username`))
user_action表:
 `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,用户id
  `username` VARCHAR(45) NOT NULL,用户名
  `request_time` VARCHAR(45) NOT NULL,申请某一页面的时间
  `request_method` VARCHAR(20) NOT NULL,申请方法
  `request_url` VARCHAR(300) NOT NULL,申请的网页
  `status` int(4),状态
  `remote_addr` VARCHAR(100) NOT NULL,离开页面的时间
   PRIMARY KEY (`id`))
  1. 对网页整体框架进行规划
  • 基本的登录注册界面
  • 用户检索界面(包含输入框和结果显示,结果需要分页)
  • 展示图片
  • 账号管理(退出登录和用户行为管理)

网站展示

用户登录界面
用户注册界面

用户通过注册界面可以选择注册成为普通用户或者管理员。
如果注册成为管理员可以查看所有用户的行为,并对账号停用或启用。


登录后主界面

检索功能实现
图片栏功能

用户可以通过点击图片栏下的柱状图,饼状图,折线图,词云来显示数据的图表


柱状图

饼状图

折线图

词云
管理员账号管理功能

管理员可以访问用户管理界面,管理用户


普通用户账号管理功能

普通用户只能实行退出登录功能。


用户管理界面

管理员可以通过输入用户的用户名来对停用或启用
也可以在输入框中输入用户的用户名来查询该用户的行为数据,若输入为空,则默认查询所有用户的行为。
查询所有用户行为

查询特定用户的行为

停用某一用户

此用户无法登陆

具体功能实现

登录注册功能实现

登录功能前端html实现
username 用户名
password 密码
login-submit 登录,调用check_pwd()函数
angular.js传送数据处理

如果是管理员就跳转入管理员的界面,可以进行用户管理
如果是普通用户跳转入普通用户界面,不可以用户管理


登录处理

去数据库中查看当前这个用户名的情况

  1. 用户名是否存在
  2. 用户是否被停用
  3. 账号密码是否正确
  4. 用户是否是管理员

分别返回响应的msg,可以通过前端反馈给用户

注册:
整体思路跟登录类似,从前端界面获取用户输入信息,如果是要注册成为管理员就将admin置为1,否则初始化为0。

关键词检索

整体思路

  1. 从用户的输入中读取要查询的关键词和查询的逻辑。
  2. 在后端根据相关数据拼接处sql语句去表中查询
  3. 根据查询出来的结果构建表格反馈给用户
  4. 对查询结果进行分页处理,并新增按时间排序的功能
    在实际实现时,用一个新的html来放输入框和显示结果,在这里要特别注意页面也页面上的一些组件是否展示出来




以上代码可以通过用户的输入查询获得相应的新闻数据
结果分页:
在这里使用Angular.js的分页实现,不需要后台配合,前端一次性拿完所有的数据,然后进行分页展示
主要逻辑是设置好每页要显示的条数,对数据进行切片,将符合叶妙条件的数据筛选出来显示在页面上。在这里要设计页码按钮,还有上一页下一页的按钮,触发相应的行动。

绘图

在这里我们绘制了四种图,柱状图,饼图,折线图和词云
实现的逻辑都是相似的

  1. 通过sql语句查询出相应的数据
  2. 整理数据格式,传给绘图的函数
  3. 调用echarts,对图像样式进行设置绘制出图像
  4. 需要注意在图像在网页中的显示情况

柱状图

在这里绘制的是新闻数岁时间变化的柱状图
需要查询每个时间段(每天)发布的新闻数,为了方便展示,还需要对时间进行排序

select publish_date as x,count(publish_date) as y 
from news 
group by publish_date 
order by publish_date;

对于获取到的数据,由于时间的格式不方便显示,要根据正则表达式更改时间的格式。


image.png

image.png

饼图

绘制每个记者发布文章数的比例
需要查询每个记者发布的文章数,为了方便后续编辑人的处理,需要对记者名进行筛选

select author as x,count(author) as y 
from news 
where author like'责任编辑%' 
group by author;

同样需要对记者名进行正则化匹配,便于后续展示


image.png

图表配置

折线图

用户可以输入关键词来查询该关键词在新闻中的出现次数随时间的变化图
需要查询关键词在新闻中出现的次数,也就是说需要先对文章进行分词,统计词频,使用nodejieba库进行分词

select content, publish_date 
from news 
where content like'% keyword %' 
order by publish_date;

分词统计词频


分词统计词频

分词,并通过moment库对日期的格式进行解析处理,方便绘图数据的传入


图像设置

词云

查询新闻的内容

select content from news;

同样调用刚刚的分词统计词频函数,来获取文章内容中关键词的出现频率,方便后续图像的绘制

用户管理

用户管理主要有以下几部分:

  1. 记录每个用户的行为,并存入数据库
  2. 查询用户行为的功能与关键词检索类似
  3. 停用和启用就是改变用户的状态,使其无法正常登陆/可以正常登陆
    用户当前状态的管理和将用户行为存入数据库在app.js中实现
    查询用户行为与关键词检索类似
    将查询框和结果显示放在一个新的html中,同样需要注意一些组件是否显示


    image.png

    去表中查找数据

select *
from user_action
where username=='name';

image.png

将结果组织成表格,并分页显示出来分页函数与关键词检索一致
停用/启用
主要逻辑:

  1. 获取要停用/启用用户的用户名
  2. 更改该账户的状态:若账户正在登陆,强制退出登录使其无法使用,并更改status的状态使其无法登陆上;若账户未登陆,直接更改status使其无法登陆。启用则直接更改用户的status,使其可以正常登陆

总结

本次实验通过express和anjular.js实现了一个数据展示网站。
通过此次实验对前后端的交互有了更深刻的认识。从前端传需求处理需求,再反馈给前端。在实验的过程中,能对用户状态、行为进行管理和记录;处理数据库查询出来的结果,对其进行加工整理来绘制表格或图像使展示更清晰;也能通过更改一下页面的设置来控制一些组件是否出现,对整个框架有了更深刻的理解。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容