新闻爬虫以及爬取结果查询网站搭建（三）

最新推荐文章于 2024-07-24 10:38:58 发布

子安语

最新推荐文章于 2024-07-24 10:38:58 发布

阅读量242

点赞数 2

分类专栏： Web编程实验一文章标签： node.js 爬虫

本文链接：https://blog.csdn.net/qq_45378017/article/details/116202320

版权

Web编程实验一专栏收录该内容

4 篇文章 0 订阅

订阅专栏

新闻爬虫以及爬取结果查询网站搭建（三）

概要
前端网页设计
最终网页效果如下：

概要

本节主要介绍如何进行爬虫结果展示网站搭建。
有以下几部分：
1、前端网页设计
2、前端发送http post请求到后端
3、express构建后端访问pgsql
4、后端响应前端请求并在前端网页中用表格显示查询结果

前端网页设计

设计一

首先构造简单的前端，代码如下：

<!DOCTYPE html>
<html>
<body>
<title>新闻检索</title>
<form action="http://127.0.0.1:3030/title" method="GET">
    <h1 align="center">根据新闻标题搜索:</h1>
    <div style="text-align:center;vertical-align:middel;"><input type="text" name="title" id="title_text">  </div>
    <div style="text-align:center;vertical-align:middel;"><input type="button" value="搜索" id="title_button"> </div>
</form>
<form action="http://127.0.0.1:3030/source_name" method="GET">
	<h1 align="center">根据网站名搜索:</h1>
    <div style="text-align:center;vertical-align:middel;"> <input type="text" name="source_name" id="source_name_text">  </div>
    <div style="text-align:center;vertical-align:middel;"> <input type="button" value="搜索" id="source_name_button"> </div>
</form>
<form action="http://127.0.0.1:3030/keyword" method="GET">
	<h1 align="center">根据新闻关键词搜索:</h1>
    <div style="text-align:center;vertical-align:middel;"> <input align="center" type="text" name="keyword" id="keyword_text">   </div>
    <div style="text-align:center;vertical-align:middel;"> <input align="center" type="button" value="搜索" id="keyword_button">  </div>
</form>
<form action="http://127.0.0.1:3030/keywords" method="GET">
	<h1 align="center">根据新闻关键词查看时间热度:</h1>
    <div style="text-align:center;vertical-align:middel;"> <input type="text" name="keyword" id="order_keyword_text">  </div>
    <div style="text-align:center;vertical-align:middel;"> <input type="button" value="搜索" id="order_keyword_button"> </div>
</form>
</body>
</html>

显示效果如下图所示：

在这里插入图片描述

设计二

为了美观，在实现了基本功能后，后期又增加了博客中常见的动态图案。

<script type="text/javascript" opacity = 1 color = "0,0,255"  src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

对查询结果进行分页显示

前端网页使用了Js组件：bootstrap table。
Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能，最可贵的是，只需要一些简单的配置就可以实现一个功能完备的在线表格。
详情可以参考bootstrap table 官方文档
前端代码如下：（以其中的一个表格实现为例）

$("#title_button").click(function() {
            $('#soucename_table').bootstrapTable('destroy');
            $('#keyword_table').bootstrapTable('destroy');
            $('#keywords_table').bootstrapTable('destroy');
     var title = $("#title_text").val();
     var params = '/get_title?title=' + title;
     $(function(){
                    // console.log(params);
                    $("#title_table").empty();
                    $('#title_table').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:'publish_date',
                            title:'publish_date',
                            sortable : true
                        }]
                    })
                });
     $.get(params, function(data) {
                    $('#title_table').bootstrapTable('refresh',{
                        url:params,
                        method:'GET',
                        pagination:true,
                        sidePagination:'client',
                        showRefresh:true,
                        columns:[{
                            field :'URl',
                            title :'url'
                        }, {
                            field:'Title',
                            title:'title'
                        }, {
                            field:'Source',
                            title:'source_name'
                        },{
                            field:'Date',
                            title:'publish_date'
                        }]
                    })
                    $("#title_table").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
                       '<td>title</td><td>publish_date</td></tr>');
                });
                $('#title_text').val('');
  });

这段javascript代码内嵌在html网页中，当用户点击搜索新闻标题栏下的搜索按钮后，将会自动执行内嵌的javascript代码，并向后端服务器发送Get请求。后端服务器通过url获得title的信息并通过和数据库的交互实现查询功能，最后将查询结果发送http响应到前端，前端在接收到响应之后获取其中的参数信息并自动生成相应的表格信息。

最终网页效果如下：

在这里插入图片描述

子安语

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
新闻爬虫以及爬取结果查询网站搭建（三）

新闻爬虫以及爬取结果查询网站搭建（三）概要前端网页设计设计一设计二对查询结果进行分页显示最终网页效果如下：概要本节主要介绍如何进行爬虫结果展示网站搭建。有以下几部分：1、前端网页设计2、前端发送http post请求到后端3、express构建后端访问pgsql4、后端响应前端请求并在前端网页中用表格显示查询结果前端网页设计设计一首先构造简单的前端，代码如下：<!DOCTYPE html><html><body><title>新闻检
复制链接

扫一扫