爬虫项目④（前后端的搭建）

最新推荐文章于 2024-07-23 16:17:03 发布

秃头呆脑

最新推荐文章于 2024-07-23 16:17:03 发布

阅读量527

点赞数 2

分类专栏：爬虫项目

本文链接：https://blog.csdn.net/PLH799407332/article/details/116176916

版权

爬虫项目专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本文档记录了一次Web编程期中作业的过程，包括前后端的简单搭建，使用Express和MySQL实现数据查询，并通过HTML和CSS对查询结果进行美化，展示了一个搜索系统的实现。在原有基础上，作者改进了查询界面，添加了表格布局，调整了样式，增强了用户体验。最终，项目以一个功能完整且视觉效果良好的网页呈现。

摘要由CSDN通过智能技术生成

Web编程期中作业④

（前后端的搭建）

前言：

在实验项目③中，我们已经完成了MySQL数据库的建立，以及将实验②中爬取到的数据导入到数据库中，在这里我们将完成前后端的搭建，以实现数据的查阅。

目的：

完成对搜索内容的时间热度分析，比如搜索“新冠”，可以展示爬取数据内容中每一天包含“新冠”的条数，具体展示形式不限，可以用文字或表格展示，也可以用图表展示

简单的前后端搭建（老师的代码）

先创建一个7.03.html作为前端

<!DOCTYPE html>
<html>

<body>
    <form action="http://127.0.0.1:8080/process_get" method="GET">
        <br> 标题：<input type="text" name="title">
        <input type="submit" value="Submit">
    </form>
    <script>
    </script>
</body>

</html>

再创建一个7.03.js作为后端

var express = require('express');
var mysql = require('./mysql.js')
var app = express();
//app.use(express.static('public'));
app.get('/7.03.html', function(req, res) {
    res.sendFile(__dirname + "/" + "7.03.html");
})
app.get('/7.04.html', function(req, res) {
    res.sendFile(__dirname + "/" + "7.04.html");
})
app.get('/process_get', function(req, res) {
    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));
    });
})
var server = app.listen(8080, function() {
    console.log("访问地址为 http://127.0.0.1:8080/7.03.html")

})

查询示例

可以看到，在搜索中，我们呈现出了含有关键词“中国”的数据，但是显示方面排版不简洁，下面考虑改进用表格来进行显示

代码的升级

用express脚手架来创建一个网站框架，cmd运行

express –e search_site

然后生成出一个search_site的文件夹在search_site下cmd分别运行

npm install mysql –save

npm install

安装好所需的依赖项

修改search_site/routes文件夹下的index.js，变更部分如图红色部分所示

然后在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>

最后在search_site文件夹下cmd运行 node bin/www，在浏览器中打开网址127.0.0.1:3000/search.html，输入任意关键词搜索，如“A股”，可得到如下图所示的查询结果

可以看到查询的结果以表格的方式进行呈现，但是整个查询界面过于单调，下面用所学的html和css的知识加以润色

网页的润色

在先前的search.html文件中加以润色

添加标题：web编程期中作业展示，改为斜体和添加分隔符

 <h1><i> web编程期中作业展示 </i></h1>
  <hr />

加以css修饰，修改与左端的距离、字体格式以及字体大小

 h1 {
        top: 0px;
        margin-left: 500px;
        font-family: "Comic Sans MS";
        font-size: 35px;
    }

添加网格边框（css),设置边框的粗细、颜色和间距等

form,th,td {
            border: 1px solid black;  /*加入网格边框*/
           }
      td   {
            padding: 15px;
           }

对网页设置背景图片，将需要的背景图片移到search_site\public文件夹下，此处的背景图片为：背景图片.jfif

<body style="background: url(背景图片.jfif) ;
       background-size:100% 100% ; 
      background-attachment: fixed">

将提示语改为“请输入关键词进行搜索：”，改变字体颜色和与边框的距离等

  <p style="color:blue;margin-left:450px;">请输入关键词进行搜索:<input type="text" 
     name="title_text">

对查询按钮进行优化，改变颜色、字体大小、背景色、外框等参数，新增清除按钮（功能为清空输入的关键词）

 <input class="form-submit"   type="button"   value="查询"  
        style= " font-size: 20px; 
                 color:purple;
                 background-color:rgb(175, 127, 175);
                 border-radius: 15px;  " 
/>

 <input  type="reset"  value="清除" 
         style="  font-size: 20px ;
                  color:purple;
                  background-color:rgb(175, 127, 175);
                  border-radius: 15px;   " 
/>

在页面末尾居中处补充个人的联系方式，此处&nbsp为空格符

<footer>
     <div
          style=" position: relative; 
                  bottom: 0px; 
                  right: 10px; 
                  background-color:rgb(112, 99, 99); 
                  text-align: center;height: 50px;  " >
      &nbsp&nbsp&nbsp&nbsp  10205501456  &nbsp&nbsp&nbsp&nbsp 彭林航 <br>
           <address>联系邮箱：799407332@qq.com </address>
     </div>
 </footer>

在页面的左上角插入ecnu和dase的图片

css:

 img {
            width: 350px;
            height: 167px;
            position: absolute;
            top: 10px;
            left: 10px;
        }

html:

 <img src="ecnu_dase.png">

项目展示

经过以上项目代码的润色，在search_site问价下cmd运行node bin/www 后，在浏览器中打开127.0.0.1:3000/search.html，后能看到如下的页面输入关键词，如“A股”后可得到如下所示的查询结果

总结

在多数参考老师的代码、少数自己修改代码的情况下，耗时许久（~~赶时间~~）完成了此次web编程期中作业，在这里要感谢老师和两位助教的耐心指导，从空白到一知半解，再到有些许收获，离不开他们的帮助。通过这次爬虫项目，我学到了html、css、JavaScrip等网页开发方面的知识，也期待在接下来的学习之中收获更多！

秃头呆脑

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
爬虫项目④（前后端的搭建）

Web编程第一个实验项目④ （前后端的搭建）前言：在实验项目③中，我们已经完成了MySQL数据库的建立，以及将实验②中爬取到的数据导入到数据库中，在这里我们将完成前后端的搭建，以实现数据的查阅。目的：完成对搜索内容的时间热度分析，比如搜索“新冠”，可以展示爬取数据内容中每一天包含“新冠”的条数，具体展示形式不限，可以用文字或表格展示，也可...
复制链接

扫一扫