Node.js爬虫一站到底系列七扩展篇：登堂入室——爬虫扩展

最新推荐文章于 2024-05-04 13:51:18 发布

Niya0515

最新推荐文章于 2024-05-04 13:51:18 发布

阅读量326

点赞数

分类专栏： Node.js爬虫一站到底系列文章标签： mysql nodejs web

本文链接：https://blog.csdn.net/Niya0515/article/details/105853718

版权

Node.js爬虫一站到底系列专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言：我们已经成功完成了对数据的收集和存储，但是只有这两步是远远不够的，数据的价值并不在数据本身，而是人对数据的使用。所以本节我们想要对爬虫功能进一步扩展——查询数据库里的数据。

本节目标

用mysql查询已爬取的数据

用网页发送请求到后端查询

用express构建网站访问mysql

用表格显示查询结果

（一）mysql查询

引入我们已经封装好的mysql连接池
定义关键词
将查询结果直接显示在后端

var mysql = require('./mysql.js');
var title = '科比';
var select_Sql = "select title,author,publish_date from fetches where title like '%" + title + "%'";

mysql.query(select_Sql, function(qerr, vals, fields) {
    console.log(vals);
});

成功！
在这里插入图片描述

（二）前端查询——后端显示

1. 首先创建一个myweb.html作为网页端（前端）

<!DOCTYPE html>
<html>

<body>
    <form action="http://127.0.0.1:8080/myweb.html" method="GET">
        <br> 标题：<input type="text" name="title">
        <input type="submit" value="Submit">
    </form>
    <script>
    </script>
</body>

</html>

在这里插入图片描述

学习笔记

HTML 标签的 action 属性

（1）语法<form action="value">
（2）定义和用法：必需的 action 属性规定当提交表单时，向何处发送表单数据。
（3）实例
下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 “form_action.asp” 的页面：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

2. 再创建一个myweb.js作为后端

var http = require('http');
var fs = require('fs');
var url = require('url');
var mysql = require('./mysql.js');
http.createServer(function(request, response) {
    var pathname = url.parse(request.url).pathname;//解析url,第一次输入地址，即发送request请求，读取到pathname:myweb.html
    var params = url.parse(request.url, true).query;//获取对象格式的query属性
    fs.readFile(pathname.substr(1), function(err, data) {//读取文件myweb.html
        response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        if ((params.title === undefined) && (data !== undefined))
            response.write(data.toString());//第一次渲染：显示前端页面
        else {//第二次渲染：按下submit按钮后，form向定义的页面提交数据，向新的url发送请求http://127.0.0.1:8080/7.02.html?title=科比
            response.write(JSON.stringify(params));//显示：{"title":"科比"}
            //把title传入，查询数据库
            var select_Sql = "select title,author,publish_date from fetches where title like '%" +
                params.title + "%'";
            mysql.query(select_Sql, function(qerr, vals, fields) {
                console.log(vals);
            });
        }
        response.end();
    });
}).listen(8080);//监听端口
console.log('Server running at http://127.0.0.1:8080/');

学习笔记

url.parse方法

（1）作用：将一个url字符串转换成对象并返回
（2）语法：url.parse(urlStr, [parseQueryString], [slashesDenoteHost]);

接收参数	含义
urlStr	url字符串
parseQueryString	默认为false，如果设置成true，query属性就会从查询字符串格式“a=1&b=2”转换为了对象格式{a: 1,b: 2}
slashesDenoteHost	默认为false，//foo/bar 形式的字符串将被解释成 { pathname: ‘//foo/bar’ }；如果设置成true，//foo/bar 形式的字符串将被解释成 { host: ‘foo’, pathname: ‘/bar’ }

（3）示例

var url = require('url');
var a = url.parse('http://localhost:8080/one?a=index&t=article');
console.log(a);

在这里插入图片描述

3. 网页发送请求到后端查询

Node运行myweb.js后访问：http://127.0.0.1:8080/myweb.html
输入任意查询词点击submit

（三）前端显示——用express构建网站访问mysql

1. 同样先创建一个myweb2.html作为前端

<!DOCTYPE html>
<html>

<body>
    <form action="http://127.0.0.1:8080/process_get" method="GET">
    //区别：把"/myweb.html"改为"/process_get"，作为后端操作字符串
        <br> 标题：<input type="text" name="title">
        <input type="submit" value="Submit">
    </form>
    <script>
    </script>
</body>

</html>

效果相同：
在这里插入图片描述

2. 再创建一个myweb2.js作为后端

var express = require('express');
var mysql = require('./mysql.js')
var app = express();
//app.use(express.static('public'));
app.get('/myweb2.html', function(req, res) {//如果访问的是myweb2.html
    res.sendFile(__dirname + "/" + "myweb2.html");//直接将myweb2.html显示在浏览器页面
})

app.get('/process_get', function(req, res) {//按下submit按钮，将得到访问的是/process_get
    res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' }); //设置res编码为utf-8
    //sql字符串和参数
    var fetchSql = "select url,source_name,title,author,publish_date from fetches where title like '%" +
        req.query.title + "%'";
    mysql.query(fetchSql, function(err, result, fields) {
        console.log(result);
        res.end(JSON.stringify(result));//result是对象列表，将其字符串化，res.end显示到浏览器中
    });
})
var server = app.listen(8080, function() {
    console.log("访问地址为 http://127.0.0.1:8080/myweb2.html")

})

3. 用express构建的网站访问mysql，将结果同时显示在前端

Node运行myweb.js后访问：http://127.0.0.1:8080/myweb2.html
输入任意查询词点击submit

（四）表格显示——用express脚手架创建网站框架

1. express-generator脚手架的使用

（1）全局安装express-generator： npm i express-generator -g（目的：运行 express命令）
（2）创建一个项目文件夹：express -e search_site（-e的参数表明我们用ejs作为缺省view引擎，而非采用jade）
（3）在search_site文件夹内cmd运行：npm install（将package.json包描述文件中列举的依赖项dependencies一次性全部安装完成，完成网站搭建）

由于我们需要使用mysql，因此将mysql.js拷贝进这个文件夹
mysql拷贝后，还需要在search_site文件夹内cmd运行：npm install mysql --save（–save表示将mysql包安装到该项目中，并且将依赖项保存进package.json里）

2. 修改路由文件

用vscode打开search_site/routes/index.js准备修改
routes：存放的是路由文件，路由主要定义url和资源的映射关系（一一对应关系），主要用来接收前端发送的请求，响应数据给前端

var express = require('express');
var router = express.Router();
var mysql = require('../mysql.js');//mysql.js在父目录中

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });//访问index.ejs
});



router.get('/process_get', function(request, response) {
  //sql字符串和参数
  var fetchSql = "select url,source_name,title,author,publish_date " +
      "from fetches where title like '%" + request.query.title + "%'";
  mysql.query(fetchSql, function(err, result, fields) {
      response.writeHead(200, {
          "Content-Type": "application/json"
      });
      response.write(JSON.stringify(result));
      response.end();
  });
});

module.exports = router;

3. 创建提供给用户的前端页面

在search_site/public/下创建一个search.html
public：存放的是所有的前端静态资源（html,css,image,js）

<!DOCTYPE html>
<html>
<header>
	<!-- 引用jquery包 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    
</header>

<body>
    <form>
        <br> 标题：<input type="text" name="title_text">
        <input class="form-submit" type="button" value="查询">
    </form>
    <div class="cardLayout" style="margin: 10px 0px">
        <table width="100%" id="record2"></table>
    </div>
    <script>
        $(document).ready(function() {//当页面在浏览器中读取完毕，调用函数
            $("input:button").click(function() {//按下按钮后调用函数
                $.get('/process_get?title=' + $("input:text").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>
</body>

</html>

学习笔记

HTML< script >标签的src属性
（1）语法：<script src="value">
（2）定义和用法：src 属性规定所链接的外部脚本文件的url。

有时我们需要在网站的多个页面中运行JavaScript。不需要重复编写相同的脚本，只需在单独的文件中创建JavaScript，并以 .js 为后缀保存，然后使用< script >标签中的 src 属性引用该文件即可。
注释：外部文件不能包含 < script > 标签！

jQuery get() 方法
（1）语法：$.get(URL,data,function(data,status,xhr),dataType)
（2）定义和用法：$.get()方法使用 HTTP GET 请求从服务器加载数据。

至此，已经准备完毕啦！

4. 运行效果

在search_site文件夹下cmd运行：node bin/www
用chrome浏览器打开http://127.0.0.1:3000/search.html
bin: 启动目录，里面包含了一个启动文件 www，默认监听端口是3000

前端页面
在这里插入图片描述
输入关键词查询

后端显示
成功！

小结一下：

至此，我们已经基本完成了爬虫项目，实现了数据爬取、数据存储、数据查询以及前端显示的基本功能。当然，我们依然可以对爬虫进行其他扩展，期待后续吧～

Niya0515

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js爬虫一站到底系列七扩展篇：登堂入室——爬虫扩展

前言：我们已经成功完成了对数据的收集和存储，但是只有这两步是远远不够的，数据的价值并不在数据本身，而是人对数据的使用。所以本节我们想要对爬虫功能进一步扩展——查询数据库里的数据。目标用mysql查询已爬取的数据用网页发送请求到后端查询用express构建网站访问mysql用表格显示查询结果（一）mysql查询引入我们已经封装好的mysql连接池定义关键词将查询结果直接显示在后端...
复制链接

扫一扫