JS爬取新闻内容——初学者的历程（六）

最新推荐文章于 2023-01-13 18:48:09 发布

ECNUyzm

最新推荐文章于 2023-01-13 18:48:09 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/ECNUyzm/article/details/105588530

版权

今天老师又发出了关于项目的示例代码。这次的代码对于如何输入标题关键词查询数据库已爬取内容进行了示例。
在我之前的尝试中，我是通过js代码先使得服务器连接mysql然后进行相应的操作。在运行时需要在命令行种运行服务器，然后再再网站中进行操作。
但是这次老师给出的效果就是高出一个档次的那种。
首先通过express脚手架搭建一个search_site文件夹如下：
在这里插入图片描述
然后将之前写好的mysql.js放到这个目录下。

然后在命令行种依次进行以下操作：

这样就完成了网站的搭建。
然后对search_site中routes文件夹下的index.js进行修改：

将index.js修改为如下代码：

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' });
});

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;

接着在search_site的public目录下创建一个search.html。具体代码如下：

<!DOCTYPE html>
<html>
<header>
    <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>

在这里插入图片描述
然后在浏览器中访问127.0.0.1:3000/search.html

输入关键词“新冠”，就会返回所有标题中带有新冠字样的信息，并且以表格的形式呈现（这才是与我之前代码差距最大的地方）

具体如果要新增爬虫按钮其实我觉得操作和我之前的那个方法差不多，我觉得就没有必要再尝试了。
在这里插入图片描述
这里还有老师给出的可以尝试的其他扩展。只能说尽力试试，至少现在我是没有一点头绪的。
这次也就是把老师给的代码复制并应用了一遍。不是自己的成果。
打算有时间把之前我写的那个网站也改成现在老师给的这样用express脚手架捆绑在一起的这种，这应该是我目前能做到的事情。

ECNUyzm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS爬取新闻内容——初学者的历程（六）

今天老师又发出了关于项目的示例代码。这次的代码对于如何输入标题关键词查询数据库已爬取内容进行了示例。在我之前的尝试中，我是通过js代码先使得服务器连接mysql然后进行相应的操作。在运行时需要在命令行种运行服务器，然后再再网站中进行操作。但是这次老师给出的效果就是高出一个档次的那种。首先通过express脚手架搭建一个search_site文件夹如下：然后将之前写好的mysql.js放到...
复制链接

扫一扫