Node.js爬虫实验项目(四)代码实现

(电脑出了一些问题暂时不能放图)

构建网站

搭建express手脚架来搭建网络构架。

npm install -g express-generator 

搭建项目,创建基本文件。

express -e search_site

进入项目,补齐依赖

npm install mysql --save
npm install

随后就可以把mysql.js文件拷贝和之前写好的代码放入文件夹里cmd运行。

一切就绪就可以开始准备在public文件夹里准备前端

<!DOCTYPE html>
<html>
<header>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> //引入jq
</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>

随后就在search_site文件夹下用命令行运行(其实有一些不理解,之后会再查询),node bin/www,来运行前端网站。

随后就可以进行了。

链接

之前几个写得较早所以把链接整理到一起吧。
Node.js爬虫实验项目(三)基础代码与更新
Node.js爬虫实验项目(二)数据库的建立与储存
Node.js爬虫实验项目(一)需求与基础

感想

过程真的太过于一波三折,光是mysql就下载了六次才摸清原理。虽然出来了但是还是一知半解,还是需要多查找多学习。之后还是需要找老师助教询问一些细节问题,不然总是不清不楚。这次的项目给了我一个很大的教训就是一定要先了解足够的知识再开始实践,不然真的是漏洞百出并且令人迷惑。在下一次的项目里需要更早地了解相关知识然后进行实验。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值