新闻爬虫及爬取结果查询网站的搭建(三）
新闻爬虫及爬取结果查询网站的搭建(三）
- 概要
- 用express构建网站访问pgsql
- 用表格显示查询结果
- 对查询结果进行分页
- 查询结果排序
- 前端界面
- 展示
概要
本节主要介绍对爬取结果进行查询的网站搭建。
主要有以下几个部分：
1、用pgsql查询已爬取的数据
2、用网页发送请求到后端查询
3、用express构建网站访问pgsql
4、用表格显示查询结果
- 对数据进行查询
其中用pgsql查询数据，在第一章pgSQL连接池部分已经介绍过，在这里构建sql查询语句并且调用pgsql.query_noparam进行查询即可。
用express构建网站访问pgsql
首先构造前端，代码如下：
<html>
<body>
<form action="http://127.0.0.1:8080/process_get" method="GET">
<br> 标题：<input type="text" name="title">
<input type="submit" value="Submit">
form>
<script>
script>
body>
html>
效果如下图：
后端获取查询的参数，并且在数据库中进行查询的代码如下：
var express = require('express');
var app = express();
var pgsql = require('./pg.js');
//app.use(express.static('public'));
app.get('/7.03.html', function(req, res) {
res.sendFile(__dirname + "/" + "7.03.html");
})
app.get('/process_get', function(req, res) {
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
console.log(req.query.title);
var fetchSql = "select url,source_name,title,author,publish_date " +
"from fetches where title like '%" + req.query.title + "%'" ;
pgsql.query_noparam(fetchSql, function(err, result, fields) {
console.log(result.rows);
res.end(JSON.stringify(result.rows));
});
})
var server = app.listen(8080, function() {
console.log("访问地址为 http://127.0.0.1:8080/7.03.html")
})
 {
//sql字符串和参数
console.log(request.query.title);
console.log(request.query.sort);
try {
var fetchSql = "select url,source_name,title,author,publish_date " +
"from fetches where title like '%" + request.query.title + "%'" +
"order by " + request.query.sort;
pgsql.query_noparam(fetchSql, function(err, result, fields) {
if(err) {
console.log(err)
}
response.writeHead(200, {
"Content-Type": "application/json"
});
console.log(result.rows);
response.write(JSON.stringify(result.rows));
response.end();
});
}catch(e) {
console.log(e);
}
});
module.exports = router;
在search_site/public/下创建一个search.html，在其中添加一个表格，并且为前面的提交按钮，绑定一个脚本。
在点击时，清空id=record2的表格，然后添加表头，再对GET操作得到的每一行数据改成符合表格形式，最后添加到record2中。
<div class="cardLayout" style="margin: 10px 0px">
<table width="100%" border="1" id="record2"></table>
</div>
<script>
$(document).ready(function() {
$("input:button").click(function() {
var title = $("input:text").val();
console.log("title = " + title);
var params = '/process_get?title=' + $("input:text").val() ;
$.get(params, function(data) {
$("#record2").empty();
$("#record2").append('url source_name ' +
'title author publish_date ';
Object.values(list).forEach(element => {
table += (element + ' ');
});
table = table.substring(0, table.length - 4);
$("#record2").append(table + ' 然后后端的查询语句改成：
var fetchSql = "select url,source_name,title,author,publish_date " +
"from fetches where title like '%" + request.query.title + "%'" +
"order by " + request.query.sort;
对查询结果进行分页
在这部分，使用了bootstrap table插件，使用了其提供的分页和其他功能。
在使用时可以参考bootstrap table 官方文档
在使用HTML5时应该在其中添加：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous">script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js">script>
body>
html>
- 使用
在这里我使用的是通过javascript来以表格的形式显示数据。
通过GET方法访问给定的url，并且将返回的json文件，解析生成表格，注意下面field的值应该和返回的json文件对应属性的keyvalue相同。
生成表格的代码如下：
$(function(){
console.log(params);
$("#record2").empty();
$('#record2').bootstrapTable({
url:params,
method:'GET',
pagination:true,
sidePagination:'client',
pageSize:5,
striped : true,
sortable : true,
sortOrder:"asc",
showRefresh:true,
search:true,
showToggle: true,
toolbar: '#toolbar',
showColumns : true,
columns:[{
field :'url',
title : 'url'
}, {
field:'title',
title:'title'
}, {
field:'source_name',
title:'source_name'
},{
field:'author',
title:'author'
},{
field:'publish_date',
title:'publish_date'
}]
})
});
查询结果排序
除了在查询的时候进行排序，还通过bootstrap table 提供了一个前端排序的方法，用户能够通过指定列旁边的小箭头，来对该列值进行升序或降序排序
$('#record2').bootstrapTable({
url:params,
method:'GET',
pagination:true,
sidePagination:'client',
pageSize:5,
striped : true,
sortable : true,
sortOrder:"asc",
showRefresh:true,
search:true,
showToggle: true,
toolbar: '#toolbar',
showColumns : true,
columns:[{
field :'url',
title : 'url',
sortable : true
}, {
field:'title',
title:'title'
}, {
field:'source_name',
title:'source_name',
sortable : true
},{
field:'author',
title:'author'
},{
field:'publish_date',
title:'publish_date',
sortable : true
}]
})
如下图：
前端界面
在前面设计得到的界面，没有调整格式的效果是下图这样的：
这个界面非常丑，下面将逐一对其进行修改。
- 对查询条件那一行进行字体大小的更改和字体更改
代码如下：<style> .title { border:1px solid rgb(199, 193, 193); font-family : 'FangSong'; font-size : x-large; } style>新闻查询 div>- 改变查询按钮格式
<input type="button" class="form-submit" value="查询">对应设置样式的css：
.form-submit { background-color: rgb(0, 75, 214); border-radius:5px; color: #fff; font-size: 20px; border: none; }- 设置复选框、按钮、输入框在同一行
为了美观，将查询条件的设置放在一行。从上面可以看到输入框和提交按钮在同一个div中，下拉菜单在另一个菜单中。为了使他们在同一行，使用了float和inline显示进行调整。
代码如下：
.select { display: inline; } .container { display: inline; }