如何用表格显示查询结果

Posted on
Words count in article: 1.3k | Reading time ≈ 5

如何用表格显示查询结果

写在前面

  • 这篇博客记录了如何通过express框架让我们前端能出现表格式的查询内容
  • 我会先讲述老师的操作
  • 然后，我会以 我建立的 经济新闻 为例子，展示搜索成果

1.老师操作：如何搭建express网站并实现查找

第一步，建立文件夹

  • 我们用express 脚手架来创建一个网站框架
1
2
express -e search_site
//-e 的参数说明我们用ejs作为缺省view引擎，而非采用jade（这句话不是很理解）
  • 然后 这样就可以建立一个search_site 文件夹
  • 由于我们需要使用mysql，因此将mysql.js拷贝到这个文件夹

  • 这里值得一提的是，因为我全把数据存储到一个database中了，也就是说，我们所有文件都可以引用这个mysql.js，但是如果是说存放在不同的databas中的话，我们就需要修改mysql.js中的database: ‘’中的值，名字就是你的database

  • 建立好后，我们还需要引入一些配置

1
2
3
4
//npm install mysql --save
//- --save表示将mysql包安装到该项目中，并且将依赖项存进package.json里
//在search_site文件夹内cmd运行npm instll
//- 将package.json中列举的依赖项全部安装，完成网站搭建

第二步，修改index.js和search.html

  • 修改index.js
  • 具体的express用法我不是很明白，更多的是照葫芦画瓢罢了，有时间会系统学习express框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//引入express模块，引入mysql.js 注意，这个mysql.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.html,在public文件夹下创建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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>
//上面是引入jquery的包，下面是操作代码。但是jquery我也没系统学习过，所以这里很多功能不是很明白
        $(document).ready(function() {
            //对查询按钮进行了一个操作，就是click后会进行下面操作
            $("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>');
                    //查询完后，信息放在data当中
                    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 文件夹下 的终端 打入以下命令
1
node bin/www

示例

2.模仿老师，建立自己查询页面

首先建立一个search_economy的文件夹，完成基本配置

示例

然后修改html和index的代码，主要集中在一句话上

1
2
('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
                        '<td>title</td><td>crawltime</td><td>author</td></tr>');
  • 说穿了就是改变类型，把原来的publish_date换成了crawltime，在最后加了个author
1
2
var fetchSql = "select url,source_name,title_format,crawltime,author " +
    "from 经济新闻 where title_format like '%" + request.query.title + "%'";
  • 在index.js中修改搜寻的表和内容样式

开始自己的搜寻

示例

这时候，爬取好几个网站的重要性就体现出来了，我们可以看到不同门户网站上的不同新闻，在这里，我的关键词是”股“

写在最后

这是系列博客的最后一篇，但是我并不会停止学习的脚步。在这个基础上，我还有很多工作可以做，比如美化操作界面，增加表格的美观程度，增加第二关键词搜索等功能。一周以来，我基本实现了每天更新爬虫博客，有些可能是JavaScript语法内容，也有可能是最新写的一些文章。我最大的感受就是：只要把时间花下去，肯定会有产出和收获。这也给我漫漫人生路增添了一段美好的经验和记忆。

-------------本文结束，感谢您的阅读-------------