基于爬虫爬取的数据，完成数据展示网站

zhangXX77

已于 2022-06-10 18:54:07 修改

阅读量2.5k

点赞数 3

文章标签：爬虫前端

于 2021-06-30 17:10:02 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56686924/article/details/118164463

版权

文章目录

前言
一、列表分页
二、注册登录
三、查询支持布尔表达式
四、图表
五、入口创建
总结

前言

学期进入尾声 web编程课程迎来了期末大作业作业要求如下：

基于第一个项目爬虫爬取的数据，完成数据展示网站。

基本要求：

1 、用户可注册登录网站，非注册用户不可登录查看数据

2 、用户注册、登录、查询等操作记入数据库中的日志

3 、爬虫数据查询结果列表支持分页和排序

4 、用 Echarts 或者 D3 实现 3 个以上的数据分析图表展示在网站中

5 、实现一个管理端界面，可以查看（查看用户的操作记录）和管理（停用启用）注册用户。

爬虫数据：利用Nodejs实现爬虫_zhangXX77的博客-优快云博客_node 爬虫库

大作业整体：

其中routes存放所有路由文件，参照Node.js Express 路由文件分类 - 歪头儿在帝都 - 博客园

users.js为index.html路由代码（登录注册）

news.js为news.html路由代码（查询图表）

public存放所有前端静态资源

index.html 为登录界面

news.html为登录后跳转页面

search.html为布尔查询页面

使用的图像images，美化网页样式的stylesheets文件夹css文件前端html等存放

一、列表分页

如图所示在我们爬取数据在网页进行展示时是一种混乱的状态

这里首先用express脚手架创建网页构架

参考博客：express-generator脚手架的使用_Zmikoo成长之路的博客-优快云博客

以及分页：在news.js文件中

// 分页
    $scope.initPageSort=function(item){
        $scope.pageSize=5;　　//每页显示的数据量，可以随意更改
        $scope.selPage = 1;
        $scope.data = item;
        $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
        $scope.pageList = [];//最多显示5页，后面6页之后不会全部列出页码来
        $scope.index = 1;
        // var page = 1;
        // for (var i = page; i < $scope.pages+1 && i < page+5; i++) {
        //     $scope.pageList.push(i);
        // }
        var len = $scope.pages> 5 ? 5:$scope.pages;
        $scope.pageList = Array.from({length: len}, (x,i) => i+1);

        //设置表格数据源(分页)
        $scope.items = $scope.data.slice(0, $scope.pageSize);

    };

    //打印当前选中页
    $scope.selectPage = function (page) {
        //不能小于1大于最大（第一页不会有前一页，最后一页不会有后一页）
        if (page < 1 || page > $scope.pages) return;
        //最多显示分页数5，开始分页转换
        var pageList = [];
        if(page>2){
            for (var i = page-2; i <= $scope.pages && i < page+3; i++) {
                pageList.push(i);
            }
        }else {
            for (var i = page; i <= $scope.pages && i < page+5; i++) {
                pageList.push(i);
            }
        }

        $scope.index =(page-1)*$scope.pageSize+1;
        $scope.pageList = pageList;
        $scope.selPage = page;
        $scope.items = $scope.data.slice(($scope.pageSize * (page - 1)), (page * $scope.pageSize));//通过当前页数筛选出表格当前显示数据
        console.log("选择的页：" + page);
    };

    //设置当前选中页样式
    $scope.isActivePage = function (page) {
        return $scope.selPage == page;
    };
    //上一页
    $scope.Previous = function () {
        $scope.selectPage($scope.selPage - 1);
    };
    //下一页
    $scope.Next = function () {
        $scope.selectPage($scope.selPage + 1);
    };

    $scope.searchsortASC = function () {
        $scope.sorttime = '1';
        $scope.search();
    };
    $scope.searchsortDESC = function () {
        $scope.sorttime = '2';
        $scope.search();
    };

二、注册登录

在数据库中建两张表存储用户信息和记录用户的登陆，查询（具体查询语句）操作

配置数据库对myspl进行定义确认

文件位置：

module.exports = {
    mysql: {
        host: 'localhost',//本地数据库
        user: 'root',
        password: 'root',//数据库密码
        database:'crawl',//使用的database
        // 最大连接数，默认为10
        connectionLimit: 10
    }
};//数据库

前端 index.html登录界面

<!DOCTYPE html>
<html ng-app="login">
<head>
    <meta charset="utf-8" />
    <title>Login</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--    <script src="../node_modules/angular/angular.min.js"></script>-->
    <script src="/angular/angular.min.js"></script>

<!--    引入自己的样式与js-->
    <link rel="stylesheet" type="text/css" href="stylesheets/index.css">
    <script type="text/javascript" src="javascripts/index.js"></script>
    <script>
        var app = angular.module('login', []);
        app.controller('loginCtrl', function ($scope, $http, $timeout) {

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