Web编程期末大作业

张嘉睿大聪明

已于 2022-06-27 11:32:31 修改

阅读量1.2w

点赞数 27

文章标签： js javascript nodejs

于 2020-06-30 12:09:09 首次发布

本文链接：https://blog.csdn.net/weixin_45975575/article/details/106965671

版权

大作业要求

在这里插入图片描述

准备阶段

刚开始什么都没做，直接打开网页，发现和老师展示的效果大相径庭，之后了解到要先npm start进行启动，接下来的一系列结果就更傻眼了。。。
首先少了nodejieba这个安装包；
在这里插入图片描述
居然安不上；
然后我换个方法继续安；

所以我就索性不用这个nodejieba

正片来袭

建user表
这里还有个小插曲，上面的问题解决之后，我直接打开http://localhost:3000/，结果发现还是什么都没有，助教提醒要建user表，我这才反应过来上次只建了一个，这次需要两个。。。

--创建用户信息数据表
CREATE TABLE `crawl`.`user` (
  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(45) NOT NULL,
  `password` VARCHAR(45) NOT NULL,
  `registertime` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_UNIQUE` (`username`))
ENGINE=InnoDB DEFAULT CHARSET=utf8;

--记录用户的登陆，查询（具体查询语句）操作
CREATE TABLE `crawl`.`user_action` (
  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(45) NOT NULL,
  `request_time` VARCHAR(45) NOT NULL,
  `request_method` VARCHAR(20) NOT NULL,
  `request_url` VARCHAR(300) NOT NULL,
  `status` int(4),
  `remote_addr` VARCHAR(100) NOT NULL,
    PRIMARY KEY (`id`))
ENGINE=InnoDB DEFAULT CHARSET=utf8;

在这里插入图片描述建立mysql配置文件

module.exports = {
    mysql: {
        host: 'localhost',
        user: 'root',
        password: 'root',
        database:'crawl',
        // 最大连接数，默认为10
        connectionLimit: 10
    }
};

注册登录页面
用户注册可登录网站，非注册用户不可登录。
登录：

<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) {
            $scope.check_pwd = function () {
                var data = JSON.stringify({
                    username: $scope.username,
                    password: $scope.password
                });
                $http.post("/users/login", data)
                    .then(
                    function (res) {
                        if(res.data.msg=='ok') {
                            window.location.href='/news.html';
                        }else{
                            $scope.msg=res.data.msg;
                        }
                    },
                        function (err) {
                        $scope.msg = err.data;
                    });

            };

$scope.doAdd = function () {
                if($scope.add_password!==$scope.confirm_password){
                    $scope.msg = '两次密码不一致！';
                }
                else {
                    var data = JSON.stringify({
                        username: $scope.add_username,
                        password: $scope.add_password
                    });
                    $http.post("/users/register", data)
                        .then(function (res) {
                            if(res.data.msg=='成功注册！请登录') {
                                $scope.msg=res.data.msg;
                                $timeout(function () {
                                    window.location.href='index.html';
                                },2000);

                            } else {
                                $scope.msg = res.data.msg;
                            }
                        }, function (err) {
                            $scope.msg = err.data;
                        });
                }
            };
        });

两次密码不一致
登录页路由

router.post('/login', function(req, res) {
  var username = req.body.username;
  var password = req.body.password;

  userDAO.getByUsername(username, function (user) {
    if(user.length==0){
      res.json({msg:'用户不存在！请检查后输入'});

    }else {
      if(password===user[0].password){
        req.session['username'] = username;
        res.cookie('username', username);
        res.json({msg: 'ok'});
        // res.json({msg:'ok'});
      }else{
        res.json({msg:'用户名或密码错误！请检查后输入'});
      }
    }
  });
});

设置Session
HTTP协议是没有状态的，但是很多情况下是需要保存一些信息的。比如在用户登录后再次访问网站，没法判断用户是否已经登陆过。因此在这中情况下，我们需要一种数据结构来保存用户信息。于是Cookies就诞生了；而Session的作用和Cookie差不多，但Session是保存在服务器端的。

var session = require('client-sessions');

app.use(session({
  secret: 'sessiontest',
  resave: true,
  saveUninitialized: false,
  cookie : {
    maxAge : 1000 * 60 * 60, 
  },
}));

查询页面
通过ng-include将查询页面引到新闻页面

<span ng-hide="isShow" id="main1" style="width: 1000px;height:600px;position:fixed; top:70px;left:80px"></span>

<div ng-show="isShow" style="width: 1300px;position:relative; top:70px;left: 80px">
    <div ng-include="'search.html'"></div>

实现查询词支持布尔表达式

if(typeof title1=="undefined" && typeof title2!="undefined" && title2.length>0){
    title1 = title2;
}
if(typeof content1=="undefined" && typeof content2!="undefined" && content2.length>0){
    content1 = content2;
}

用户一个查询词都不输入时，就查找全部数据

var myurl = `/news/search?t1=${title1}&ts=${selectTitle}&t2=${title2}&c1=${content1}&cs=${selectContent}&c2=${content2}&stime=${sorttime}`;

查询页路由

router.get('/wordcloud', function(request, response) {
    //sql字符串和参数
    console.log(request.session['username']);

    //sql字符串和参数
    if (request.session['username']===undefined) {
        // response.redirect('/index.html')
        response.json({message:'url',result:'/index.html'});
    }else {
        var fetchSql = "select content from fetches;";
        newsDAO.query_noparam(fetchSql, function (err, result, fields) {
            response.writeHead(200, {
                "Content-Type": "application/json",
                "Cache-Control": "no-cache, no-store, must-revalidate",
                "Pragma": "no-cache",
                "Expires": 0
            });
            response.write(JSON.stringify({message:'data',result:mywordcutModule.wordcut(result)}));//返回处理过的数据
            response.end();
        });
    }
});

查询结果展示

<div ng-show="isisshowresult">

    <table class="table table-striped">
        <thead>
            <tr>
                <td>序号</td>
                <td>标题</td>
                <td>作者</td>
                <td>关键词</td>
                <td>链接</td>
                <td>发布时间</td>
            </tr>

        </thead>
        <tbody>
        <tr ng-repeat="(key, item) in items">
            <td>{{index+key}}</td>
            <td>{{item.title}}</td>
            <td>{{item.author}}</td>
            <td>{{item.keywords}}</td>
            <td>{{item.url}}</td>
            <td>{{item.publish_date}}</td>
        </tr>

        </tbody>
    </table>

在这里插入图片描述
布尔表达式查询体验

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

当页面列表数据过多时，需要进行分页操作，我们可以前台一次性拿完所有的数据，然后进行分页展示（p.s.数据过多时页面加载压力较大）
分页代码
初始化时要先显示第一页的内容，同时算好一共分多少页，pageList是一个数组，长度随意。

$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 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) {
        if (page < 1 || page > $scope.pages) return;
        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);
    };

分页结果展示

<div class="pull-right">
            <nav>
                <ul class="pagination">
                    <li>
                        <a ng-click="Previous()" role="button"><span role="button">上一页</span></a>
                    </li>
                    <li ng-repeat="page in pageList" ng-class="{active:isActivePage(page)}" role="button">
                        <a ng-click="selectPage(page)" >{{ page }}</a>
                    </li>
                    <li>
                        <a ng-click="Next()" role="button"><span role="button">下一页</span></a>
                    </li>
                </ul>
            </nav>
        </div>