基于爬取数据的新闻查询网站构建(Express+AngularJS)

基于爬取数据的新闻查询网站构建(Express+AngularJS)

一学期在家的自主学习后，Web编程的课程也来到了期末。
其实这是我第二次写这篇博客，第一次是边做开发边写的，发现思路很紊乱，而且不知所云，因而在写了七千多字的时候推倒重来。
这次开始动笔的时候项目大概已经能够实现绝大多数功能了。
在这里特别感谢助教与同学对本次实验项目提供的帮助，还要特别感谢菜鸟教程给我提供的html、angularJS、bootstrap教程，以及百度官方提供的echarts教程。

思路简述

第一次作业的重点在爬虫功能的实现上，而这次的实验项目对后端、前端以及工程的整体构建要求都很高，所以总体上来说是非常困难的，尤其对于我这种前后端都不会写的人来说可以说是一筹莫展了。
本次实验过程遇到了很多问题，特别感谢助教和老师提供的帮助，还要感谢一下先行完成的同学给我的启发，帮助我磕磕绊绊地完成了一份非常普通的作业。
作业中用到了Bootstrap、AngularJS、Express以及Echarts来实现基本需求，分前后端来介绍。

页面的构建与美化(HTML语言为主)

能够调用爬虫爬取到的数据，且进行查询的前端页面其实在上次的项目中实现过了。

看得出页面很简陋，只用到了非常简单的HTML框架，以及一些用于查询的jQuery功能。
第二次的项目中，我用到了Bootstrap来进行前端页面的美化，又用到了AngularJS进行一些简单功能的函数书写、以及前端框架的构筑。

接下来详细介绍一下各个部分的具体实现以及思路。

登陆界面

第一次的前端页面中，我们已经用"input"与"button"标签实现了查询以及按钮，是比较基础的HTML语言。
这次要求能够实现用户的注册与登陆，这一要求的主要难点在于后端以及路由的代码，前端构筑并不算太难。
这里详细介绍一下Bootstrap用到的一些功能。

Bootstrap网格功能

Bootstrap网格功能的基本结构非常简单：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

这一功能支持跨设备的页面布局，能够根据屏幕的尺寸自动分为12列。
举个简单的例子来说，页面布局会根据浏览器窗口的大小进行调整，页面上的元素如按钮、输入框等都会自动调整到最合适当前尺寸的大小与位置。虽然可能这次的项目也没有机会在其他设备上使用。
另一方面，能够使用网格功能来非常工整地布置每个元素的位置，这一点是使用Bootstrap网格功能的最主要的目的。
我们使用HTML文本布置的元素会拥挤在左上角，需要定位具体位置还需要输入数值进行调整，而Bootstrap只需要改变所在的网格列数便可以进行便捷地左右横调，而且非常方便对齐。
我们登录界面整体都是用这样的网格功能作为框架来布局的。

Bootstrap面板

我们用面板功能把文本框以及切换登陆、注册功能的链接按钮绑定到一起。
面板功能的代码也很简单：

<div class="panel panel-default">
	<div class="panel-heading">
		<!--面板的标题内容-->
    <div class="panel-body">
        <!--面板主体内容-->
    </div>
    <div class="panel-footer">面板脚注</div>
</div>

这样的整体布局比较紧凑美观，且可以通过Bootstrap的自定义样式来美化登陆面板。

在文本框部分使用的是表单功能，这个在后面的主页面构筑中也用到了，在这里就先不具体展开了。

最后成品如下：
登录页面的前端并不算太难，毕竟没有用到什么很复杂的东西，甚至我觉得极简风格不美化也没什么影响，只是在此做个Bootstrap的安利，因为美化功能非常方便强大。

主页面

这里用到的是Bootstrap的导航栏(Navbar)功能，以及表格、表单功能。

Bootstrap导航栏

这可谓是使用Bootstrap进行前端页面的构建的过程中，最让人赏心悦目的一部分了。多亏了其强大的自定义样式和功能，能够很轻松地实现极为个性化的导航栏功能，我这里使用的是最简单的导航栏模板：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <!--导航栏的头部，即网站logo，文本会比其他元素大一号-->
    </div>
    <div>
        <ul class="nav navbar-nav">
         	<!--这里使用无序列表向导航栏添加元素-->
        </ul>
    </div>
</nav>

可以使用CSS样式进行背景颜色的自定义，我这里还用到和下拉菜单来为后续的可视化功能做菜单。
Navbar还可以非常便捷地把元素固定在左侧或是右侧，达到快速定位的效果。

我在这里还锦上添花地用到了Bootstrap的字体图标，只需要在元素前加上"span"标签，在其中定义一个Glyphicon类就行了，这一部分我觉得也是非常有趣的功能。

Bootstrap表格功能

Bootstrap的表格功能也很强大，稍微改变一下前缀便可以自定义表格样式，我这里使用了悬停表格与边框表格，相较于HTML自带的表格而言格局更加清晰，布局更加美观大方，表格的代码模板也很简单：

<table class="table">
  <thead>
    <tr>
    	<!--这里填写表头项目-->
    </tr>
  </thead>
  <tbody>
    <tr>
      	<!--这里填写表格内容-->
    </tr>
  </tbody>
</table>

悬停在上面能够显出浅灰色，这就是悬停表格的效果。
"thead"标签内的字体会加粗，能更明晰地区分出表头，边框会让界面更清楚美观。
我随便找了条电竞新闻做个演示，希望能过审核。FPX今年能再拿个s赛冠军让我开心开心吗

前端页面的构建大概就是这样，比较简单，分别介绍了一些好用的Bootstrap功能，接下来的部分是后端代码以及功能的实现，这里要详细介绍一下Angular。

Angular与jQuery实现具体功能

Angular作为一款前端框架，其强大功能在单页面Web应用中非常有效，这次的项目都可以用Angular来实现页面的交互效果，比如点击Login和Register时进行动态更新页面，实现登录注册的功能。
而jQuery在书写页面包含的Javascript代码时也能够起到简化且非常强大的功能。

在html文本中直接书写登陆与注册函数

要在文本中使用Angular，需要使用ng-app指令来启动，来规定这个应用程序的活动范围。
在这次的实验项目里，我是直接从一开始就启动Angular应用，有效范围便是整个前端框架的代码。
这里用到了Angular支持将数据绑定在页面元素的功能，即ng-model，我们可以使用这样的方式将用户登录或注册时填写的用户名、密码以及确认密码绑定在某一变量上，调用函数时传入的值便是用户输入的数据。这里选取几行代码作为示例：

<input ng-model="username" tabindex="1" class="form-control" placeholder="Username" value=""/>
<input type="password" ng-model="password" tabindex="2" class="form-control" placeholder="Password">

我们这里把用户在用户名和密码这一栏的输入绑定在了username和password这两个变量中，那么接下来在函数调用时就会使用这一组变量。
以下为登陆与注册的函数：

var app = angular.module('login', []);
        app.controller('loginCtrl', function ($scope, $http, $timeout) {
   

            // 登录时，检查用户输入的账户密码是否与数据库中的一致
            $scope.