需求:
1、用户可注册登录网站,非注册用户不可登录查看数据
2、用户注册、登录、查询等操作记入数据库中的日志
3、爬虫数据查询结果列表支持分页和排序
4、用Echarts或者D3实现3个以上的数据分析图表展示在网站中
5、实现一个管理端界面,可以查看(查看用户的操作记录)和管理(停用启用)注册用户。
网站展示:
一、注册登陆界面实现
网站界面展示:
点击登陆或者注册按钮可以滑窗切换注册或者登陆界面。
html处register代码实现:首先判断两次密码输入是否一致,如果不一致则直接返回错误;如果一致,则向users/register处传输数据(username和password),如果成功则跳转至login界面。
后端users.js注册代码:
调用在userDAO中定义的getByUsername检查数据库中是否存在该用户名,如果存在则返回用户已存在,否则返回注册成功消息。
后端登陆代码实现:
检查数据库中用户是否存在并检查密码是否正确。特殊情况,admin为管理员的用户名,为其设置了专门的管理界面,用来停用启用用户以及查看用户的操作记录。特别的,为了实现管理员停用启用用户的功能,在数据库中为每个用户多维护了一个state(用int表示),0表示被停用,1表示启用,注册时初始为1,在被停用时将其置为0,此时该用户不能登陆,直到管理员将其启用。
数据库中user表界面:
二、用户操作记入
利用sql语句将传入的参数值写入user_action表中。
user_action表展示
三、爬虫数据查询结果列表分页展示与排序
查询代码:根据用户输入的标题或者内容关键词形成查询url并get,定义函数search将上述的查询词嵌入sql语句中,到数据库的fetches表中进行查询。
将search返回的结果进行划分,定义pagesize为每页的数据展示量,利用结果//pagesize得到分页数量,并将结果在查询界面动态显示;在用户选择页面时,判断page是否违规,并根据用户的选择改变展示的内容,是通过对search检索的结果进行切分实现,而非基于url实现的分页,所以无需更改url的path。
定义两个排序状态,1为按时间升序排序,2为按时间逆序排序
是通过对sql语句的修改实现的不同的查询结果,相等于重新对数据库的表进行查询,1为asc,2为desc,表示按时间的升序或者降序,在通过initpagesort完成在界面的不同结果展示。
四、用Echarts实现4个数据分析图表
图片都在一开始的网站展示上。
1.柱状图:
利用sql语句从数据库中按照发布时间统计数量并返回结果
对返回的数据逐条利用正则表达式提取时间,并将时间作为x轴,数量作为y轴绘制柱形图。
2.饼状图
sql查询语句:var fetchSql = "select author as x,count(author) as y from fetches where author like'%责任编辑%' group by author;"
查看数据库中新闻的作者,都以责任编辑开头,担心前面有空格填充,故在前后都写了%通配符,并利用正则表达式提取作者的名字,按照其发表的文章的数量绘制饼状图。
3.线型图
sql查询语句:var fetchSql = "select content,publish_date from fetches where content like'%" + keyword + "%' order by publish_date;";
'''
var moment = require('moment');
moment().format();
var freqchange = function(vals, keyword) {
var regex_k = eval('/'+keyword+'/g');
var word_freq = {};
vals.forEach(function (data){
var content = data["content"].replace(regex_c,'');
var publish_date=moment(data['publish_date'], 'ddd, MMM DD YYYY HH:mm:ss ZZ').format('MM-DD');
console.log(publish_date);
var freq = content.match(regex_k).length;// 直接搜这个词。或者是先分词再统计词频(可自己尝试)
word_freq[publish_date] = (word_freq[publish_date] + freq ) || 0;
});
return word_freq;
};
'''
因为我爬取的网站的publish_date格式比较特殊,使用通常的正则表达式无法正确的提取月和日(会出现null),所以引入了moment,将其转化成moment再进行提取。
4.词云图
对新闻内容进行jieba分词,按照自己指定的图片制作出对应形状的词云图。
5.实现管理员功能,启用、停用用户,并查看用户的操作
数据库提前预设了一个管理员,用户名、密码均为admin。我的设想是管理员与普通用户不同,其不会进行新闻查询,而是只进行网站的管理与监管问题,所以为其设计了这个简洁的网站界面,在输入框中输入用户名称即可将其停用或者启用,点击查询按钮即可查看所有用户按时间顺序的操作记录。
这是管理员特有功能的后端代码实现,直接通过sql语句进行查询以及用户状态的更改。前面描述了数据库中为用户额外设置了一个状态变量,0表示停用,此时用户不能正常登陆,1表示正常状态。
总结:这是web编程的期末项目,网站的实现功能复杂且完善,需要很精巧的架构,但是助教提供的代码功能非常完善,框架搭的很完美,没有什么改进的空间,就根据自己爬取的新闻特殊性修改了一些正则表达式以及代码中的一些小的问题。将重点落在了设计前端界面上,将其与后端代码相连接,最后的结果差强人意。通过本次实验,学习了设计网站的框架的使用,复习了平时上课所学习的知识,有了更深入的理解。