新闻爬虫作业2（简单应用搭建）

最新推荐文章于 2021-10-06 01:45:56 发布

Yuhui Wang

最新推荐文章于 2021-10-06 01:45:56 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/qq_40208392/article/details/105970190

版权

！！！ps: 因为最近一段时间都在忙毕业论文（5.6提交），所以博客方面并没有持续更新，是最后做完一块更新的

接着，在爬虫完成后，我们要搭建一个简单的本地网页应用，来展示爬虫结果

（1）搭建一个前端页面，大体设计就是用户输入新闻关键字、新闻来源（提供选项），返回数据库中的爬虫结果。

<!DOCTYPE html>
<html>
<head>
    <title>新闻爬虫作业</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>

<body>

<div  style="padding:15px;height:100%;width:65%;margin:0 auto;margin-top:15px;">
            
    <div class="card card-primary" style="width:100%;">
      <div class="card-header" style="background:	#1E90FF;">
        <h3 class="card-title">爬虫内容查询</h3>
      </div>
      
                     <div class="panel-body">
    
                        <form id="searchRelationForm" class="form-inline" style="padding-left: 5% ; padding-right: 5%" method="get">
                        <p>标题：</p>
                        <div  class="form-group" style="padding: 2%">
                            <input type="text" id="title" name="title" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>

                        <p>来源：</p>
                        <div  class="form-group" style="padding: 2%">
                            <input id="source" name="source" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" list="kindlist">
                            <datalist id="kindlist">
                                <option>网易新闻</option>
                                <option>网易体育</option>
                                <option>新浪网体育</option>
                            </datalist>
                            
                        
                        </div>

                        <div class="btn-group" style="padding: 2%">
                            <button type="button" id="btnSearch" class="btn btn-primary" onclick="">search</button>
                        </div>
                    </form>
                </div>
    </div>
   
  </div>
  

  <div  id="firstShow" style="display:none;padding:15px;height:100%;width:65%;margin:0 auto;margin-top:15px;">
            
    <div class="card card-primary" style="width:100%;">
     <div class="card-header"  style="background:	#1E90FF;" >
        <h3 class="card-title">爬虫结果</h3>
      </div>
      
      <table width="100%" id="record2"></table>
        
    </div>
   
 </div>


</body>

</html>

前端用了bootstrap，方便定义格式

大概长这样（吃藕=丑）

（2）定义网页行为（JavaScript），点击search之后，就搜索数据库，并且返回


<script>
    $(document).ready(function() { //网页加载完之后执行的函数
        $("#btnSearch").click(function() { //按钮点击时执行的函数
            document.getElementById("firstShow").style.display="";
            $.get('/process_get?title=' + $("input[name='title']").val() +'&source='+ $("input[name='source']").val(),function(data) { 
                $("#record2").empty(); //清空原列表
                $("#record2").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
                    '<td>title</td><td>author</td><td>publish_date</td></tr>'); //添加表头
                for (let list of data) { //遍历添加数据
                    let table = '<tr class="cardLayout"><td>';
                    Object.values(list).forEach(element => {
                        table += (element + '</td><td>');
                    });
                    $("#record2").append(table + '</td></tr>');
                }
            });
        });

    });
</script>

当然，现在还不能用，等我配置好后端才可以

（3）后端配置：使用express框架来搭建网络应用

先安装express

npm install express-generator -g

然后运用下面的语句，即可自行搭建一个网络简单框架：

express -e search

接着在编辑器里打开search文件夹，将routes文件夹下的index.js添加对mysql.js的引用，并添加request路径‘/process_get’的response，此时index.js负责用于回应，前端‘/process_get’的信号

var express = require('express');
var router = express.Router();
var mysql = require('../mysql.js');
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
router.get('/process_get', function(request, response) {
  console.log(request.query.title);
  var fetchSql = "select href, source, title, author, time from sina"
                   +" where title like '%" + request.query.title + "%'"
                   +" and source = '" + request.query.source + "'";
  mysql.query(fetchSql, function(err, result, fields) {
      response.writeHead(200, {
        "Content-Type": "application/json"
      });
      //console.log(result)
      response.end(JSON.stringify(result));
      response.end();

  });
})

记得在search文件夹下面，加入mysql.js，跟刚刚在爬虫里面的mysql.js一模一样

var mysql = require("mysql");
var pool = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: '12345678',
    database: '前端设计case'
});
var query = function(sql, sqlparam, callback) {
    pool.getConnection(function(err, conn) {
        if (err) {
            callback(err, null, null);
        } else {
            conn.query(sql, sqlparam, function(qerr, vals, fields) {
                conn.release(); //释放连接 
                callback(qerr, vals, fields); //事件驱动回调 
            });
        }
    });
};
var query_noparam = function(sql, callback) {
    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); //事件驱动回调 
            });
        }
    });
};
exports.query = query;
exports.query_noparam = query_noparam;

最后，把写好的前端，复制到public 文件夹下面，待会即可访问到！！！

这里强调一下，search文件夹下面的app.js其实就是负责整个网站的响应分配，如果你没有把前端放在public下面，修改app.js映射到你的文件里面去就行

（4）最终运行

在search文件夹下运行 node bin/www ，然后便可在浏览器里打开
http://127.0.0.1:3000/search.html

效果