基于期中项目爬取的新闻,完成一个数据展示网站
基本要求:
- 用户可注册登录网站,非注册用户不可登录查看数据
- 用户注册、登录、查询等操作记入数据库中的日志
- 爬虫数据查询结果列表支持分页和排序
- 用Echarts或者D3实现3个以上的数据分析图表展示在网站中
- 实现一个管理端界面,可以查看(查看用户的操作记录)和管理(停用启用)注册用户。
接下来将依次实现以上五个功能。
前期准备
- 创建三个表,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`))
- 对网页整体框架进行规划
- 基本的登录注册界面
- 用户检索界面(包含输入框和结果显示,结果需要分页)
- 展示图片
- 账号管理(退出登录和用户行为管理)
网站展示
用户通过注册界面可以选择注册成为普通用户或者管理员。
如果注册成为管理员可以查看所有用户的行为,并对账号停用或启用。
用户可以通过点击图片栏下的柱状图,饼状图,折线图,词云来显示数据的图表
管理员可以访问用户管理界面,管理用户
普通用户只能实行退出登录功能。
管理员可以通过输入用户的用户名来对停用或启用
也可以在输入框中输入用户的用户名来查询该用户的行为数据,若输入为空,则默认查询所有用户的行为。
具体功能实现
登录注册功能实现
username 用户名
password 密码
login-submit 登录,调用check_pwd()函数
如果是管理员就跳转入管理员的界面,可以进行用户管理
如果是普通用户跳转入普通用户界面,不可以用户管理
去数据库中查看当前这个用户名的情况
- 用户名是否存在
- 用户是否被停用
- 账号密码是否正确
- 用户是否是管理员
分别返回响应的msg,可以通过前端反馈给用户
注册:
整体思路跟登录类似,从前端界面获取用户输入信息,如果是要注册成为管理员就将admin置为1,否则初始化为0。
关键词检索
整体思路
- 从用户的输入中读取要查询的关键词和查询的逻辑。
- 在后端根据相关数据拼接处sql语句去表中查询
- 根据查询出来的结果构建表格反馈给用户
-
对查询结果进行分页处理,并新增按时间排序的功能
在实际实现时,用一个新的html来放输入框和显示结果,在这里要特别注意页面也页面上的一些组件是否展示出来
以上代码可以通过用户的输入查询获得相应的新闻数据
结果分页:
在这里使用Angular.js的分页实现,不需要后台配合,前端一次性拿完所有的数据,然后进行分页展示
主要逻辑是设置好每页要显示的条数,对数据进行切片,将符合叶妙条件的数据筛选出来显示在页面上。在这里要设计页码按钮,还有上一页下一页的按钮,触发相应的行动。
绘图
在这里我们绘制了四种图,柱状图,饼图,折线图和词云
实现的逻辑都是相似的
- 通过sql语句查询出相应的数据
- 整理数据格式,传给绘图的函数
- 调用echarts,对图像样式进行设置绘制出图像
- 需要注意在图像在网页中的显示情况
柱状图
在这里绘制的是新闻数岁时间变化的柱状图
需要查询每个时间段(每天)发布的新闻数,为了方便展示,还需要对时间进行排序
select publish_date as x,count(publish_date) as y
from news
group by publish_date
order by publish_date;
对于获取到的数据,由于时间的格式不方便显示,要根据正则表达式更改时间的格式。
饼图
绘制每个记者发布文章数的比例
需要查询每个记者发布的文章数,为了方便后续编辑人的处理,需要对记者名进行筛选
select author as x,count(author) as y
from news
where author like'责任编辑%'
group by author;
同样需要对记者名进行正则化匹配,便于后续展示
折线图
用户可以输入关键词来查询该关键词在新闻中的出现次数随时间的变化图
需要查询关键词在新闻中出现的次数,也就是说需要先对文章进行分词,统计词频,使用nodejieba库进行分词
select content, publish_date
from news
where content like'% keyword %'
order by publish_date;
分词统计词频
分词,并通过moment库对日期的格式进行解析处理,方便绘图数据的传入
词云
查询新闻的内容
select content from news;
同样调用刚刚的分词统计词频函数,来获取文章内容中关键词的出现频率,方便后续图像的绘制
用户管理
用户管理主要有以下几部分:
- 记录每个用户的行为,并存入数据库
- 查询用户行为的功能与关键词检索类似
-
停用和启用就是改变用户的状态,使其无法正常登陆/可以正常登陆
用户当前状态的管理和将用户行为存入数据库在app.js中实现
查询用户行为与关键词检索类似
将查询框和结果显示放在一个新的html中,同样需要注意一些组件是否显示
image.png
去表中查找数据
select *
from user_action
where username=='name';
将结果组织成表格,并分页显示出来分页函数与关键词检索一致
停用/启用
主要逻辑:
- 获取要停用/启用用户的用户名
- 更改该账户的状态:若账户正在登陆,强制退出登录使其无法使用,并更改status的状态使其无法登陆上;若账户未登陆,直接更改status使其无法登陆。启用则直接更改用户的status,使其可以正常登陆
总结
本次实验通过express和anjular.js实现了一个数据展示网站。
通过此次实验对前后端的交互有了更深刻的认识。从前端传需求处理需求,再反馈给前端。在实验的过程中,能对用户状态、行为进行管理和记录;处理数据库查询出来的结果,对其进行加工整理来绘制表格或图像使展示更清晰;也能通过更改一下页面的设置来控制一些组件是否出现,对整个框架有了更深刻的理解。