第一个爬虫项目完成后,在mysql已经有了一张表格存储爬取到的三个网站的数据。现在大作业要求如下:
首先要对这个过程中使用的一些包进行安装,也就是在项目文件的终端中输入 npm install 将安装所有依赖的node modules。
但是在安装过程中出现了无法安装nodejieba的问题,于是我去网上搜索了相关的安装nodejieba的方法,进行了相应的操作后又出现如下的问题:(由于过程中没有及时的截图保存错误情况,所以报错页面只有下面这一张)
这一长串的报错看的我眼花缭乱,但是至少能大概看出似乎我还需要再安装一些别的工具,然后对其中的一些语句进行了查询后,我在网上找到了如下的解决方法:
然后进行了一定的调试后,终于安装成功。
但是后来助教也在群里说了关于这个问题的解决方法:
具体的我也没有尝试过,应该是可以解决的。
然后既然我们这次是要对需要对用户的信息进行保存并且还要使得用户可以有注册和登录的操作,并将用户的账号密码保存在数据库中,所以要在数据库中创建两张表格,一张用来保存用户的账号信心,一张用来保存用户的操作日志:
既然我们要对数据库进行访问,所以相应的mysql配置文件也是必不可少的:
这样我们对于mysql的相关操作基本就完成了。
接下来就是对所要建立的网站前端后端的功能的一些完成:
首先对用户的注册登录进行完善,要尽量做到和我们平时生活中遇到的注册登录界面功能差不多。
通过上面的angular.js可以实现登陆成功后进入news.html也就是我们的主要网页界面。
然后是注册界面:
同时我们还要实现注册用户和非注册用户对网站访问的区别:
通过在app.js中的这一段代码实现注册用户可访问网站,非注册用户不可访问网站。
同时在users.js中分别完成登录和注册的路由代码
登录路由:
注册路由:
同时在登录页路由中引用UseDao并保存上述session信息以达到记录特定用户操作日志的效果:
然后在search.html中写好查询页面代码:
<form class="form-horizontal" role="form">
<div class="row" style="margin-bottom: 10px;">
<label class="col-lg-2 control-label">标题关键字</label>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="标题关键字" ng-model="$parent.title1">
</div>
<div class="col-lg-1">
<select class="form-control" autocomplete="off" ng-model="$parent.selectTitle">
<option selected="selected">AND</option>
<option>OR</option>
</select>
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="标题关键字" ng-model="$parent.title2">
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<label class="col-lg-2 control-label">内容关键字</label>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="内容关键字" ng-model="$parent.content1">
</div>
<div class="col-lg-1">
<select class="form-control" autocomplete="off" ng-model="$parent.selectContent">
<option selected="selected">AND</option>
<option>OR</option>
</select>
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="内容关键字" ng-model="$parent.content2">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-9">
<button type="submit" class="btn btn-default" ng-click="search()">查询</button>
</div>
</div>
</form>
<!--显示查询结果-->
<div ng-show="isisshowresult">
<table class="table table-striped">
<thead>
<tr>
<td>序号</td>
<td>标题</td>
<td>作者</td>
<!-- <td>内容</td>-->
<td>关键词</td>
<td>链接</td>
<td>发布时间</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, item) in items">
<td>{{index+key}}</td>
<td>{{item.title}}</td>
<td>{{item.author}}</td>
<!-- <td>{{item.content}}</td>-->
<td>{{item.keywords}}</td>
<td>{{item.url}}</td>
<td>{{item.publish_date}}</td>
</tr>
</tbody>
</table>
<div class="row">
<!-- <div class="form-group">-->
<div class="pull-left" style="margin-top: 12px;">
<button type="submit" class="btn btn-primary" ng-click="searchsortASC()" >发布时间升序</button>
<button type="submit" class="btn btn-primary" ng-click="searchsortDESC()">发布时间降序</button>
</div>
<!-- </div>-->
<div class="pull-right">
<nav>
<ul class="pagination">
<li>
<a ng-click="Previous()" role="button"><span role="button">上一页</span></a>
</li>
<li ng-repeat="page in pageList" ng-class="{active:isActivePage(page)}" role="button">
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()" role="button"><span role="button">下一页</span></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
然后在news.html中引入查询界面
然后实现查询允许布尔表达式:
其中var myurl=……一行及后续相关部分是拼路由,get方法传给后端处理。其中排序是按照发表时间排的,也是传的参数,也在路由中。
查询的路由如下:
其中newsDAO.search函数位于dao/newsDAO.js。
search :function(searchparam, callback) {
// 组合查询条件
var sql = 'select * from fetches ';
if(searchparam["t2"]!="undefined"){
sql +=(`where title like '%${searchparam["t1"]}%' ${searchparam['ts']} title like '%${searchparam["t2"]}%' `);
}else if(searchparam["t1"]!="undefined"){
sql +=(`where title like '%${searchparam["t1"]}%' `);
};
if(searchparam["t1"]=="undefined"&&searchparam["t2"]=="undefined"&&searchparam["c1"]!="undefined"){
sql+='where ';
}else if(searchparam["t1"]!="undefined"&&searchparam["c1"]!="undefined"){
sql+='and ';
}
if(searchparam["c2"]!="undefined"){
sql +=(`content like '%${searchparam["c1"]}%' ${searchparam['cs']} content like '%${searchparam["c2"]}%' `);
}else if(searchparam["c1"]!="undefined"){
sql +=(`content like '%${searchparam["c1"]}%' `);
}
if(searchparam['stime']!="undefined"){
if(searchparam['stime']=="1"){
sql+='ORDER BY publish_date ASC ';
}else {
sql+='ORDER BY publish_date DESC ';
}
}
sql+=';';
pool.getConnection(function(err, conn) {
if (err) {
callback(err, null, null);
} else {
conn.query(sql, function(qerr, vals, fields) {
conn.release(); //释放连接
callback(qerr, vals, fields); //事件驱动回调
});
}
});
},
主要是用来拼起sql。
然后在search.html中显示查询结果(这一部分代码在上面已经复制上去了):
效果如下:
然后我们对搜索结果的分页功能进行实现:
在search.html中也有相关的代码(也已经在上面复制过了):
首先要显示第一页的内容,同时算好一共分多少页,pageList是一个最多长为5(可以改变)的数组,表示右下角截图的框里最多展示5(相应改变)个页码。
然后用Echarst添加了相应的4个数据分析图表:柱状图、饼状图、折线图、词云:
以折现图为例:
折线图的路由如下:
相似的最后得到如下效果:
(可能因为之前爬取的新闻内容问题或者是其他我没想到的问题,饼状图无法正常显示出来,所以这里给出老师的示例视频中的饼状图)
最后实现用户注册、登录、查询等操作记入数据库中的日志。
在app.js中直接引入var logger = require('morgan’);
在每次操作后都会进行保存。同时也可以在mysql里打印出表格:
以上就是对所有功能的一个大概的实现。
然后效果如下:
(注册完毕后)
图表已经在上面给出过效果。
以上就是这次大作业的报告。在做这个项目的过程中,主要还是参考了老师的示例,也没有做太多的修改,还是自己能力不足,不太清楚应该怎么改,有个大概的思路但是不知道怎么用代码实现。