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; "
/>
- 在页面末尾居中处补充个人的联系方式,此处 为空格符
<footer>
<div
style=" position: relative;
bottom: 0px;
right: 10px;
background-color:rgb(112, 99, 99);
text-align: center;height: 50px; " >
     10205501456      彭林航 <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等网页开发方面的知识,也期待在接下来的学习之中收获更多!