Web编程期末大作业

大作业要求

在这里插入图片描述

准备阶段

刚开始什么都没做,直接打开网页,发现和老师展示的效果大相径庭,之后了解到要先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>

在这里插入图片描述

后续:https://blog.csdn.net/weixin_45975575/article/details/106968158

Web前端期末大作业是一项重要的任务,需要学生在限内完成一个完整的网页设计项目。这个项目通常需要包括网页的设计、布局、交互、响应式设计等多个方面。以下是一些可能需要涉及的技术和工具: 1. HTML和CSS:这是网页设计的基础,需要学生掌握HTML和CSS的基本语法和用法,以及如何将它们应用到实际的网页设计中。 2. JavaScriptJavaScript是一种用于网页交互和动态效果的编程语言,需要学生掌握JavaScript的基本语法和用法,以及如何将它应用到网页设计中。 3. 响应式设计:现代网页需要适应不同的设备和屏幕大小,需要学生掌握响应式设计的基本原理和技术,以确保网页在不同设备上都能正常显示。 4. 设计工具:学生需要使用一些设计工具来辅助网页设计,例如Photoshop、Sketch、Figma等。 5. 版本控制工具:学生需要使用版本控制工具来管理自己的代码,例如Git。 对于Web前端期末大作业,建议学生按照以下步骤进行: 1. 确定网页设计的主题和目标受众。 2. 设计网页的结构和布局,包括页面的导航、内容区域、底部等。 3. 使用HTML和CSS编写网页的基本结构和样式。 4. 使用JavaScript实现网页的交互和动态效果。 5. 使用响应式设计确保网页在不同设备上都能正常显示。 6. 使用设计工具制作网页的图像和素材。 7. 使用版本控制工具管理自己的代码。 8. 测试和调试网页,确保网页的功能和效果都正常。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值