Node.js新闻爬虫实验项目(9)express前后端基于之前成果的扩展

最新推荐文章于 2024-08-14 22:24:56 发布

置顶 Learner_uni

最新推荐文章于 2024-08-14 22:24:56 发布

阅读量229

点赞数

分类专栏： Node.js新闻爬虫实验项目文章标签： nodejs html5

本文链接：https://blog.csdn.net/qq_20781643/article/details/105633349

版权

Node.js新闻爬虫实验项目专栏收录该内容

10 篇文章 0 订阅

订阅专栏

mysql.js文件相关

在这里插入图片描述
将第四节的mysql.js文件拷贝到项目中
运行mysql.js

node mysql.js

npm install mysql --save

在这里插入图片描述
save将mysql安装到这个项目，更重要的是将它保存进package.json

npm install

安装所有package.json中的依赖项
在这里插入图片描述
打开routes/index.js，准备修改

原来自动创建出的代码见上
我们需要加入代码

var express = require('express');
var router = express.Router();
var mysql = require('../mysql.js');//mysql.js与index.js并不在同一个文件夹下


/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });//路由部分将在以后学习，这里不用管

});

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;

为了方便比较，附上第七节后端代码

var express = require('express');  //须安装express
var mysql = require('./mysql.js')  //见第4篇的mysql.js
var app = express();
//app.use(express.static('public'));
app.get('/7.03.html', function(req, res) {
    res.sendFile(__dirname + "/" + "7.03.html");  //如果请求的是7.03.html,向前端发送7.03.html即不断刷新原来的页面
})

app.get('/process_get', function(req, res) {//发送process_get,从mysql中调取信息发送给前端
    res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' }); //设置res编码为utf-8,向前端发送信息时，建议带上writehead
    //sql字符串和参数
    var fetchSql = "select url,source_name,title,author,publish_date from fetches where title like '%" +
        req.query.title + "%'";//mysql语句
    mysql.query(fetchSql, function(err, result, fields) {
        console.log(result);//类似于之前的vals,向命令行中发送result
        res.end(JSON.stringify(result));//向前端发送字符化的result
    });
})
var server = app.listen(8080, function() {
    console.log("访问地址为 http://127.0.0.1:8080/7.03.html")

})//8080端口，第二个参数回调函数

创建后端

search.html

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!--设置编码，防乱码>
    <title>
        Welcome to Search!
    </tilte>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <!--引入jquery,bootcdn已经挂了，采用jsdelivr>
</header>

<body>
    <form>
        <br/> 
        标题：
        <input type="text" name="title_text">
        <input class="form-submit" type="button" value="查询">
        <!--button常与js配合>
    </form>//
    <div class="cardLayout" style="margin: 10px 0px">
        <table width="100%" id="record2"></table>
        <!--div是一个块级元素，常使用class和id，将文档分出一个部分进行管理>
    </div>
    <script>
        $(document).ready(function() {
            //读取后进行操作函数
            $("input:button").click(function() {//input:button即上方的button,click为它注册一个函数
                $.get('/process_get?title=' + $("input:text").val(), function(data) {//等我们打入关键词查询时网址栏会出现/process_get？title=xxx,val返回所填关键词.
                    $("#record2").empty();//上面的table元素，#加一个id表示一个元素,$为动态运算,empty让表格清空
                    $("#record2").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
                        '<td>title</td><td>author</td><td>publish_date</td></tr>');//append是指在被选元素的末尾插入一级子元素，此处插入第一行标志，效果可以见下一部分,jquery填加td tr是十分常见的,td为单元格.
                    for (let list of data) {//let没有变量提升，有块级作用域，此处遍历元素
                        let table = '<tr class="cardLayout"><td>';
                        Object.values(list).forEach(element => {
                            table += (element + '</td><td>');
                        });//list为遍历中的一个对象,forEach设置一个操作函数,使table动态修改.
                        $("#record2").append(table + '</td></tr>');//与上面tr,td对应
                    }
                });
            });

        });
    </script>
    <!--script为js代码部分>
</body>

</html>

执行代码

node bin/www

在这里插入图片描述

功能补充

forever start bin/www
forever start crawler1.js
forever start crawler2.js
forever start crawler3.js

forever使用见第四节
在这里插入图片描述
这样实现了后台运行代码

具体实现可以登上

www.guofjpt.cn:3000/index.html
或者www.guofjpt.cn:3000
(已失效)

将search.html命名为index.html,就不用在访问时多打/search.html

后面可能进行功能的扩展

补充http状态码

它在之前的图片中出现
在这里插入图片描述
304就是其中一种
为了简便，我附上http状态码的百科
http状态码