web编程期末大作业

最新推荐文章于 2024-06-10 22:03:36 发布

回忆x

最新推荐文章于 2024-06-10 22:03:36 发布

阅读量925

点赞数

本文链接：https://blog.csdn.net/Xueqc/article/details/118333284

版权

文章目录

一、作业要求
二、数据库
三、注册与登录
四、将用户注册、登录和查询操作录入数据库
五、爬虫查询结果实现分页和排序
六、用Echarts实现数据分析图表
七、总结

一、作业要求

2个选项
1、任意主题，基于第一个项目的爬虫，完成数据展示网站。
2、基于树莓派上的Node.JS开发一个便携式教学工具。
（这里我选择了选项1）
技术要求：
1、采用Node.JS实现后端
2、采用Express框架实现前端
基本要求：
1、用户可注册登录网站，非注册用户不可登录查看数据
2、用户注册、登录、查询等操作记入数据库中的日志
3、爬虫数据查询结果列表支持分页和排序
4、用Echarts或者D3实现3个以上的数据分析图表展示在网站中
5、实现一个管理端界面，可以查看（查看用户的操作记录）和管理（停用启用）注册用户。

二、数据库

在数据库中建立2个mysql表，其中一个用来保存用户的信息，包括注册名、密码以及注册时间等；而另一个则用来保存操作日志，操作日志则包括用户的注册、登陆以及查询等操作；

（1）建表

--创建用户信息数据表
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;

（2）连接到期中大作业时所创建的数据库

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

三、注册与登录

1.注册

前端代码

<form id="register-form" method="post" role="form" style="display: none;">
                                    <div class="form-group">
                                        <input ng-model="add_username" tabindex="1" class="form-control" placeholder="Username" value="" />
                                    </div>

                                    <div class="form-group">
                                        <input type="password" ng-model="add_password" tabindex="2" class="form-control" placeholder="Password">
                                    </div>

                                    <div class="form-group">
                                        <input type="password" ng-model="confirm_password" tabindex="2" class="form-control" placeholder="Confirm Password">
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                <button tabindex="4" class="form-control btn btn-register" ng-click="doAdd()">Register Now</button>
                                            </div>
                                        </div>
                                    </div>

                                </form>

引入css样式：

改变了按键颜色
在这里插入图片描述

2.登录界面

<!--登陆部分-->
<div class="form-group">
<input ng-model="username" tabindex="1" class="form-control" placeholder="Username" value="" />
                                    </div>
                                    <div class="form-group">
                                        <input type="password" ng-model="password" tabindex="2" class="form-control" placeholder="Password">
                                    </div>
                                    <!--                                <div class="form-group text-center">-->
                                    <!--                                    <input type="checkbox" tabindex="3" class="" name="remember" id="remember">-->
                                    <!--                                    <label for="remember"> Remember Me</label>-->
                                    <!--                                </div>-->

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                <button id="login-submit" tabindex="4" class="form-control btn btn-login" ng-click="check_pwd()">LOG IN</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>

css样式：

这里设置了颜色红黄绿的渐变
在这里插入图片描述

3.这里用到了angular的登陆代码

 $scope.doAdd = function() {
                // 检查用户注册时，输入的两次密码是否一致
                if ($scope.add_password !== $scope.confirm_password) {
                    // $timeout(function () {
                    //     $scope.msg = '两次密码不一致！';
                    // },100);
                    $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;
                        });
                }
            };
        });

获取用户输入的用户名和密码并判断两次输入是否一致。

$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;
                    });

检查用户输入的用户名和密码是否与数据库所中存储的一致。

4.router路由代码

router.post('/register', function (req, res) {
  var add_user = req.body;
  // 先检查用户是否存在
  userDAO.getByUsername(add_user.username, function (user) {
    if (user.length != 0) {
      // res.render('index', {msg:'用户不存在！'});
      res.json({msg: '用户已存在！'});
    }else {
      userDAO.add(add_user, function (success) {
        res.json({msg: '成功注册！请登录'});
      })
    }
  });
 
});
 
// 退出登录
router.get('/logout', function(req, res, next){
 
  req.session.destroy(function(err) {
    if(err){
      res.json('退出登录失败');
      return;
    }
 
    // req.session.loginUser = null;
    res.clearCookie('username');
    res.json({result:'/index.html'});
  });
});
    maxAge : 1000 * 60 * 60, // 设置 session 的有效时间，单位毫秒
  },
}));

四、将用户注册、登录和查询操作录入数据库

（1）注册部分angular代码如下

//增加注册用户
            $scope.doAdd = function () {
                // 检查用户注册时，输入的两次密码是否一致
                if($scope.add_password!==$scope.confirm_password){
                    // $timeout(function () {
                    //     $scope.msg = '两次密码不一致！';
                    // },100);
                    $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;
                        });
                }
            };
        });

（2）登录部分

/* add users */
router.post('/register', function (req, res) {
  var add_user = req.body;
  // 先检查用户是否存在
  userDAO.getByUsername(add_user.username, function (user) {
    if (user.length != 0) {
      // res.render('index', {msg:'用户不存在！'});
      res.json({msg: '用户已存在！'});
    }else {
      userDAO.add(add_user, function (success) {
        res.json({msg: '成功注册！请登录'});
      })
    }
  });
 
});

（3）设置session

app.use(session({
  secret: 'sessiontest',//与cookieParser中的一致
  resave: true,
  saveUninitialized: false, // 是否保存未初始化的会话
  cookie : {
    maxAge : 1000 * 60 * 60, // 设置 session 的有效时间，单位毫秒
  },
}));

（4）存入数据库

app.use(logger(function (tokens, req, res) {
  console.log('打印的日志信息：');
  var request_time = new Date();
  var request_method = tokens.method(req, res);
  var request_url = tokens.url(req, res);
  var status = tokens.status(req, res);
  var remote_addr = tokens['remote-addr'](req, res);
  if(req.session){
    var username = req.session['username']||'notlogin';
  }else {
    var username = 'notlogin';
  }

五、爬虫查询结果实现分页和排序

进入新闻查询界面news.app

<html ng-app="news">
<head>
    <meta charset="utf-8">
    <title>News</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <script src='javascripts/dist/echarts-wordcloud.min.js'></script>
    <script src="/angular/angular.min.js"></script>

    <script src="javascripts/news.js" type="text/javascript"></script>

</head>
<body ng-controller="news_Ctrl" ng-init="isShow=false">
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">News</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li ><a ng-click="showSearch()">检索</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">图片<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a ng-click="histogram()">柱状图</a></li>
                        <li><a ng-click="pie()">饼状图</a></li>
                        <li><a ng-click="line()">折线图</a></li>
                        <li><a ng-click="wordcloud()">词云</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">账号管理<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">账号</li>
                        <li><a ng-click="logout()">退出登录</a></li>
                    </ul>

                </li>
            </ul>

        </div>

    </div>

</nav>
<!--    所有的图片都绘制在main1位置-->
<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>

</div>
</body>

</html>

search.app

<form class="form-horizontal" role="form">
    <div class="row" style="margin-bottom: 10px;">
        <label class="col-lg-2 control-label">标题关键字</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" placeholder="标题关键字" ng-model="$parent.title1">
        </div>
        <div class="col-lg-1">
            <select class="form-control" autocomplete="off" ng-model="$parent.selectTitle">
                <option selected="selected">AND</option>
                <option>OR</option>

            </select>
        </div>
        <div class="col-lg-3">
            <input type="text" class="form-control" placeholder="标题关键字" ng-model="$parent.title2">
        </div>
    </div>



    <div class="row" style="margin-bottom: 10px;">
        <label class="col-lg-2 control-label">内容关键字</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" placeholder="内容关键字" ng-model="$parent.content1">
        </div>
        <div class="col-lg-1">
            <select class="form-control" autocomplete="off" ng-model="$parent.selectContent">
                <option selected="selected">AND</option>
                <option>OR</option>
            </select>
        </div>
        <div class="col-lg-3">
            <input type="text" class="form-control" placeholder="内容关键字" ng-model="$parent.content2">
        </div>
    </div>


    <div class="form-group">
        <div class="col-md-offset-9">
            <button type="submit" class="btn btn-default" ng-click="search()">查询</button>
        </div>
    </div>

</form>

如图所示
在这里插入图片描述

进入检索页面
在这里插入图片描述

实现分页

$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);
    };

通过pagesize更改每页显示的数据量，pagelist决定最多显示的页数，进而影响页面显示的效果。

在这里插入图片描述
如图，以输入美国为关键词。

六、用Echarts实现数据分析图表

下面以柱图和饼图为例：

（1）柱图

前端

$scope.histogram = function () {
        $scope.isShow = false;
        $http.get("/news/histogram")
            .then(
                function (res) {

                    if(res.data.message=='url'){
                        window.location.href=res.data.result;
                    }else {

                        // var newdata = washdata(data);
                        let xdata = [], ydata = [], newdata;

                        var pattern = /\d{4}-(\d{2}-\d{2})/;
                        res.data.result.forEach(function (element) {
                            // "x":"2020-04-28T16:00:00.000Z" ,对x进行处理,只取 月日
                            xdata.push(pattern.exec(element["x"])[1]);
                            ydata.push(element["y"]);
                        });
                        newdata = {"xdata": xdata, "ydata": ydata};

                        var myChart = echarts.init(document.getElementById('main1'));

后端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                data: ["1月","2月","3月","4月"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [170, 130, 150, 160]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 处理点击事件并且弹出数据名称
        myChart.on('click', function (params) {
            alert(params.name);
        });
    </script>
</body>
</html>

效果如下
在这里插入图片描述

（2）饼图

前端

 $scope.pie = function () {
        $scope.isShow = false;
        $http.get("/news/pie").then(
            function (res) {
                if(res.data.message=='url'){
                    window.location.href=res.data.result;
                }else {
                    let newdata = [];

                    var pattern = /责任编辑：(.+)/;//匹配名字
                    res.data.result.forEach(function (element) {
                        // "x":  责任编辑：李夏君 ,对x进行处理,只取 名字
                        newdata.push({name: pattern.exec(element["x"])[1], value: element["y"]});

                    });

                    var myChart = echarts.init(document.getElementById('main1'));
                    var app = {};
                    option = null;
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '作者发布新闻数量',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: newdata,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

后端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        myChart.setOption({
            series : [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:35, name:'张三'},
                        {value:24, name:'李四'},
                        {value:10, name:'小明'},
                        {value:15, name:'小华'},
                        {value:40, name:'小刚'}
                    ]
                }
            ]
        })
    </script>
</body>
</html>

效果如下
在这里插入图片描述

七、总结

由于这个月一直在复习各科考试，对web大作业有些疏忽了，做的时间较有限，很多细节来不及处理，内容也不够完善，但到了ddl不得不提交了，以至于要求5尚未达标，不过后续自己还会再对这个网站进行一些完善。尽管如此，在做大作业的时候还是学到了很多知识，在今后也会继续自学相关的web编程知识，为未来发展作铺垫。

回忆x

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
web编程期末大作业

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、作业要求二、前期准备三、实际操作1.2.四、总结一、作业要求2个选项1、任意主题，基于第一个项目的爬虫，完成数据展示网站。2、基于树莓派上的Node.JS开发一个便携式教学工具。技术要求：1、采用Node.JS实现后端2、采用Express框架实现前端（这里我选择了选项1）基本要求：1、用户可注册登录网站，非注册用户不可登录查看数据2、用户注册、登录、查询等操作记入数据库中的日志3、爬虫数据查询结果列
复制链接

扫一扫