前言:我们已经成功完成了对数据的收集和存储,但是只有这两步是远远不够的,数据的价值并不在数据本身,而是人对数据的使用。所以本节我们想要对爬虫功能进一步扩展——查询数据库里的数据。
本节目标
用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>
学习笔记
(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/');
学习笔记
(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
前端页面
输入关键词查询
后端显示
成功!
小结一下:
至此,我们已经基本完成了爬虫项目,实现了数据爬取、数据存储、数据查询以及前端显示的基本功能。当然,我们依然可以对爬虫进行其他扩展,期待后续吧~