新闻爬虫及查询网站的实现（五）：前端设计及总结_可以点击爬取最新新闻数据的页面设计-CSDN博客

本文链接：https://blog.csdn.net/weixin_46817778/article/details/116286765

上文：新闻爬虫及查询网站的实现（〇）：实验任务与内容介绍新闻爬虫及查询网站的实现（一）：爬虫基本框架的实现新闻爬虫及查询网站的实现（二）：具体网站具体解析新闻爬虫及查询网站的实现（三）：数据库交互操作新闻爬虫及查询网站的实现（四）：新闻检索1. 实验内容完成最少一个目标网站的分析和爬虫设计；爬取不少于100条数据（每条数据包括最少3个字段，标题、内容和时间），并存储在数据库中；完成对数据库中爬取数据内容或标题的搜索功能，搜索结果以表格形式展示在前端页面中；完成对搜索内容的时间热度分析。

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

上文：
新闻爬虫及查询网站的实现（〇）：实验任务与内容介绍
 新闻爬虫及查询网站的实现（一）：爬虫基本框架的实现
 新闻爬虫及查询网站的实现（二）：具体网站具体解析
 新闻爬虫及查询网站的实现（三）：数据库交互操作
 新闻爬虫及查询网站的实现（四）：新闻检索

1. 实验内容

完成最少一个目标网站的分析和爬虫设计；
爬取不少于100条数据（每条数据包括最少3个字段，标题、内容和时间），并存储在数据库中；
完成对数据库中爬取数据内容或标题的搜索功能，搜索结果以表格形式展示在前端页面中；
完成对搜索内容的时间热度分析。

2. 实验任务

爬取数据。
数据库交互。
新闻检索。
前端设计：
1. 前后端交互
2. 页面实现；
3. 搜索结果展示；

3. 实验步骤

1. 爬取数据

2. 数据库交互

3. 新闻检索

4. 前端设计

写在前面
采用Express框架搭建前端。安装好Express后，直接执行指令express -e myapp，就会创建一个文件夹，当中包含整个框架。其中，-e是ejs的缩写。

前后端交互
设想一下前端的样子：长得很像一般搜索引擎的高级搜索，可以搜索url、标题、正文、作者、来源、时间、关键词；然后每次输入的信息进行一下预处理，以需要的格式传到后端。
这里基本上就是判断一下是否有缺省（因为有的栏是可以空着的），然后把没有缺省的项转为之前的搜索需要的参数，传入进去。

router.get('/', function(req, res, next) {
var q = req.query;
var cols_all = ["title","url","keywords","source_name","author","desc","content"];
var columns = new Array();
var vagues = new Array();
var inputs = new Array();
var ret = {table:null};
for (var i = 0; i < 7; i+=1) {
   var col = cols_all[i];
   
   if (q[col]){
      columns.push(col);
      if (i<5){
      vagues.push(q["v"+i]);
      }else{
      vagues.push(1);
      }
      inputs.push(q[col]);
   }
}
if(q["output"]){
   var tr = q["output"].concat("title","url");
   var terms=tr.join(', ');

   //console.log(columns,inputs);

   //console.log(terms);
   search.search(columns,inputs,vagues,terms,q["orderby"],q["order"],function(err,result1, result2){
      //console.log(result1);
      ret = {table:output_table(tr,result1,result2)}; //处理结果为输出值
      res.render('index',ret);
      
   }) 
}else{
   ret[err]='no params';
   res.render('index',ret);
}

});

页面实现
比较简单，就做了很多表单。把那些value都和数据库中的值设计的一样之后，操作起来非常快，都不需要过多分析，比较讨巧。

<!DOCTYPE html>
<html>
<head>
   <title>搜索</title>
</head>
<body>
   <h1>这是一个不太高级的搜索页面……</h1>
   <h2>输入搜索信息</h2>
   <form name="f1" method="GET">
      <p>
      标题<input type="text" name="title" size=30><br>
      完全匹配
      <input type="radio" name="v0" id="v0strict" value=0>是
      <input type="radio" name="v0" id="v0vague" value=1 checked="checked">否
      </p>

      <p>
      url<input type="text" name="url" size=50><br