web期末项目

最新推荐文章于 2024-07-29 11:53:27 发布

ECNU超级大笨蛋

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量268

点赞数

分类专栏： web编程文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/weixin_55324457/article/details/118309855

版权

web编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

web期末项目

作业要求

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

基本要求：

用户可注册登录网站，非注册用户不可登录查看数据
用户注册、登录、查询等操作记入数据库中的日志
爬虫数据查询结果列表支持分页和排序
用Echarts或者D3实现3个以上的数据分析图表展示在网站中
实现一个管理端界面，可以查看（查看用户的操作记录）和管理（停用启用）注册用户。

扩展要求（非必须）：

实现对爬虫数据中文分词的查询
实现查询结果按照主题词打分的排序
用Elastic Search+Kibana展示爬虫的数据结果

实例分析

配置环境

先要装一下其他的dependency（如jquery等），还有jieba安装起来比较麻烦，需要python2.x的环境，可以使用：

npm install --global --production windows-build-tools

进行安装。
助教最后给出了替代方案，但我这里还是按照我自己的解决方案。

建立数据库（两张）

--创建用户信息数据表
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,
`valid` int UNSIGNED NOT NULL,
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;

数据库建立完成之后就可以进行后续的登录操作。

注册与登录

对用户要有适当提示：

登陆：提示用户名或密码输错；用户不存在。

注销：退出登录，进入登陆页面。

登录页：public/index.html

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

登陆页路由:routes/users.js

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

  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:'用户名或密码错误！请检查后输入'});
      }
    }
  });
});


/* 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: '成功注册！请登录'});
      })
    }
  });

});

// 退出登录
router.get('/logout', function(req, res, next){
  // 备注：这里用的 session-file-store 在destroy 方法里，并没有销毁cookie
  // 所以客户端的 cookie 还是存在，导致的问题 --> 退出登陆后，服务端检测到cookie
  // 然后去查找对应的 session 文件，报错
  // session-file-store 本身的bug

  req.session.destroy(function(err) {
    if(err){
      res.json('退出登录失败');
      return;
    }

    // req.session.loginUser = null;
    res.clearCookie('username');
    res.json({result:'/index.html'});
  });
});

其中userDAO function定义如下：

module.exports = {
    add: function (user, callback) {
        pool.query(userSqlMap.add, [user.username, user.password], function (error, result) {
            if (error) throw error;
            callback(result.affectedRows > 0);
        });
    },
    getByUsername: function (username, callback) {
        pool.query(userSqlMap.getByUsername, [username], function (error, result) {
            if (error) throw error;
            callback(result);
        });
    },

};

cookies和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。用户保存cookies，而服务器保存session。一般将登陆信息等重要信息存放为session，而其他信息可以放在cookies中。注意要保存session信息，不然记录用户操作日志时，不知道是哪位用户进行的操作。示例的session信息只保存在启动网站内存中，所以网站重启后信息丢失，这里使用了sql存储用户的操作信息。

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

登录界面前端部分：

实现效果：

实现查询词支持布尔表达式（之前的项目有写过类似的，但不是布尔表达式的类型，仅仅是对于不同类型数据的查找）

1. 首先在news.html引入查询页面

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

2. 错误处理：loc: public/javascripts/news.js

 // 查询数据
 $scope.search = function () {
     var title1 = $scope.title1;
     var title2 = $scope.title2;
     var selectTitle = $scope.selectTitle;
     var content1 = $scope.content1;
     var content2 = $scope.content2;
     var selectContent = $scope.selectContent;
     var sorttime = $scope.sorttime;
 
     // 检查用户传的参数是否有问题
     //用户有可能这样输入：___  and/or  新冠（直接把查询词输在了第二个位置）
     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}`;
 
     $http.get(myurl).then(
         function (res) {
             if(res.data.message=='data'){
                 $scope.isisshowresult = true; //显示表格查询结果
                 // $scope.searchdata = res.data;
                 $scope.initPageSort(res.data.result)
             }else {
                 window.location.href=res.data.result;
             }
 
 
         },function (err) {
             $scope.msg = err.data;
         });
 };

3. 路由 loc: routes/news.js

router.get('/search', function(request, response) {
    console.log(request.session['username']);
    //sql字符串和参数
    if (request.session['username']===undefined) {
        // response.redirect('/index.html')
        response.json({message:'url',result:'/index.html'});
    }else {
        var param = request.query;
        newsDAO.search(param,function (err, result, fields) {
            response.json({message:'data',result:result});
        })
    }
});

4. SQL查询实现 loc: dao/newsDAO.js

search :function(searchparam, callback) {
    // 从searchparam中组合查询条件 
    var sql = 'select * from fetches ';
   
    if(searchparam["t2"]!="undefined"){
        sql +=(`where title like '%${searchparam["t1"]}%' ${searchparam['ts']} title like '%${searchparam["t2"]}%' `);
    }else if(searchparam["t1"]!="undefined"){
        sql +=(`where title like '%${searchparam["t1"]}%' `);
    };

        if(searchparam["t1"]=="undefined"&&searchparam["t2"]=="undefined"&&searchparam["c1"]!="undefined"){
        sql+='where ';
    }else if(searchparam["t1"]!="undefined"&&searchparam["c1"]!="undefined"){
        sql+='and ';
    }

    if(searchparam["c2"]!="undefined"){
        sql +=(`content like '%${searchparam["c1"]}%' ${searchparam['cs']} content like '%${searchparam["c2"]}%' `);
    }else if(searchparam["c1"]!="undefined"){
        sql +=(`content like '%${searchparam["c1"]}%' `);
    }

    if(searchparam['stime']!="undefined"){
        if(searchparam['stime']=="1"){
            sql+='ORDER BY publish_date ASC ';
        }else {
            sql+='ORDER BY publish_date DESC ';
        }
    }

    sql+=';';
    pool.getConnection(function(err, conn) {
        if (err) {
            callback(err, null, null);
        } else {
            conn.query(sql, function(qerr, vals, fields) {
                conn.release(); //释放连接
                callback(qerr, vals, fields); //事件驱动回调
            });
        }
    });
},

查询结果列表支持分页和排序（排序是上面SQL中写过的）

前端：public/search.html

<!--显示查询结果-->
<div ng-show="isisshowresult">

    <table class="table table-striped">
        <thead>
            <tr>
                <td>序号</td>
                <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.content}}</td>-->
            <td>{{item.keywords}}</td>
            <td>{{item.url}}</td>
            <td>{{item.publish_date}}</td>
        </tr>

        </tbody>
    </table>

    <div class="row">
<!--        <div class="form-group">-->
        <div class="pull-left" style="margin-top: 12px;">
            <button type="submit" class="btn btn-primary" ng-click="searchsortASC()" >发布时间升序</button>
            <button type="submit" class="btn btn-primary" ng-click="searchsortDESC()">发布时间降序</button>
        </div>
<!--        </div>-->
        <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>
    </div>
</div>

换页实现是通过angular：public/javascripts/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);

};

效果展示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C2AzHgzJ-1624876811388)(D:\大二工作\web\web编程期末作业\期末项目.assets\image-20210606114935901.png)]$

数据可视化

这部分代码比较长QAQ

柱状图

配置部分

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

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '新闻发布数 随时间变化'
                        },
                        tooltip: {},
                        legend: {
                            data: ['新闻发布数']
                        },
                        dataZoom: [
                            {
                                type: 'inside'
                            }
                        ],

                        xAxis: {
                            data: newdata["xdata"],
                            axisLabel: {
                                inside: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            z: 10
                        },

                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        series: [{
                            name: '新闻数目',
                            type: 'bar',
                            data: newdata["ydata"],
                            showBackground: true,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ]
                                    )
                                }
                            },
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            },
            function (err) {
                $scope.msg = err.data;
            });

};

展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e4CVKXgW-1624876811389)(D:\大二工作\web\web编程期末作业\期末项目.assets\image-20210606172739779.png)]$

饼图

配置部分

    $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 = [];
                    let selected = {};
                    let i=0;
                    res.data.result.forEach(function (element) {
                        newdata.push({name: element["x"], value: element["y"]});
                        selected[element["x"]]=i++<6;

                    });
                    newdata=newdata.filter(item=>{return item.value!=0})

                    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: {
                            type:'scroll',
                            orient: 'vertical',
                            right:10,
                            top:20,
                            bottom:20,
                            selected:selected
                            // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['40%', '75%'],
                                center: ['50%', '50%'],
                                data: newdata,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // myChart.setOption(option);
                    app.currentIndex = -1;

                    setInterval(function () {
                        var dataLen = option.series[0].data.length;
                        // 取消之前高亮的图形
                        myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: app.currentIndex
                        });
                        app.currentIndex = (app.currentIndex + 1) % dataLen;
                        // 高亮当前图形
                        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: app.currentIndex
                        });
                        // 显示 tooltip
                        myChart.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: app.currentIndex
                        });
                    }, 1000);
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                    ;
                }
            });
    };

展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DzdyQ6HW-1624876811390)(D:\大二工作\web\web编程期末作业\期末项目.assets\image-20210606172809295.png)]$

折线图

配置部分

    $scope.line = function () {
        $scope.isShow = false;
        $http.get("/news/line").then(
            function (res) {
                if(res.data.message=='url'){
                    window.location.href=res.data.result;
                }else {
                    var myChart = echarts.init(document.getElementById("main1"));
                    
                    option = {
                        title: {
                            text: '"中国"该词在新闻中的出现次数随时间变化图'
                        },
                        xAxis: {
                            type: 'category',
                            data: Object.keys(res.data.result)
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: Object.values(res.data.result),
                            type: 'line',
                            smooth: true,
                            itemStyle: {normal: {label: {show: true}}}
                        }],

                    };

                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }

            });
    };

jieba分词

// 获取关键词“中国”随日期变化的出现次数【折线图】
var nodejieba = require('nodejieba');

//正则表达式去掉一些无用的字符。
const regex_c = /[\t\s\r\n\d\w]|[\+\-\(\),\.。，！？《》@、【】"'：:%-\/“”]/g;
var regex_d = /\w{3}\s(.*?) 2021/; //只留下日期的年月

var freqchange = function(vals, keyword) {
    var regex_k = eval('/'+keyword+'/g');
    var word_freq = {};

    vals.forEach(function (data){
        var content = data["content"].replace(regex_c,'');
        var publish_date = regex_d.exec(data['publish_date'])[1];

        var freq = content.match(regex_k).length;// 直接搜这个词。或者是先分词再统计词频（可自己尝试）
        word_freq[publish_date] = (word_freq[publish_date] + freq ) || 0;
    });
    return word_freq;

};
exports.freqchange = freqchange;

展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w5s0C0l3-1624876811393)(D:\大二工作\web\web编程期末作业\期末项目.assets\image-20210606180311305.png)]$

可以看出当时其中爬取了两三天的爬虫数据就集中在了这个部分。

jieba词云

配置部分

$scope.wordcloud = function () {
    $scope.isShow = false;
    $http.get("/news/wordcloud").then(
        function (res) {
            if(res.data.message=='url'){
                window.location.href=res.data.result;
            }else {
                var mainContainer = document.getElementById('main1');

                var chart = echarts.init(mainContainer);

                var data = [];
                for (var name in res.data.result) {
                    data.push({
                        name: name,
                        value: Math.sqrt(res.data.result[name])
                    })
                }
                console.log(data);

                var maskImage = new Image();
                maskImage.src = './images/logo.png';

                var option = {
                    title: {
                        text: '所有新闻内容 jieba分词 的词云展示'
                    },
                    series: [{
                        type: 'wordCloud',
                        sizeRange: [12, 60],
                        rotationRange: [-90, 90],
                        rotationStep: 45,
                        gridSize: 2,
                        shape: 'circle',
                        maskImage: maskImage,
                        drawOutOfBound: false,
                        textStyle: {
                            normal: {
                                fontFamily: 'sans-serif',
                                fontWeight: 'bold',
                                // Color can be a callback function or a color string
                                color: function () {
                                    // Random color
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: data
                    }]
                };

                maskImage.onload = function () {
                    // option.series[0].data = data;
                    chart.clear();
                    chart.setOption(option);
                };

                window.onresize = function () {
                    chart.resize();
                };
            }

        });
}

展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPezNmX9-1624876811394)(D:\大二工作\web\web编程期末作业\期末项目.assets\image-20210606172704021.png)]$

访问管理

显示所有用户，并且通过设置操作权限可以使得用户暂时注销。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTf8jAl0-1624876811396)(D:\大二工作\web\web编程期末作业\期末项目.assets\1.jpg)]$

红色部分就是关键功能，能够动态操作用户权限。

root用户设置也很简单，优先级开高一点就是了。可以设置成只有root用户才能访问这个界面，这里因为展示原因没有设置。

路由部分

db.query('select * from user', (err, results) => {
    if (err) return console.log(err.message);
})


router.get('/', (req, res) => {
    db.query('select * from user', (err, results) => {
        if (err) return console.log(err.message);
        res.send(results);
    })
});

router.get('/stopuser', (req, res) => {
    // console.log(req.query.id);
    const sqlStr = "update user set valid=0 where id=?";
    db.query(sqlStr, [req.query.id], (err, results) => {
        if (err) return { "status": 500, "msg": "停用用户失败失败！"};
        if (results.affectedRows === 1) {
            {console.log('更新数据成功!')};
            return {"status": 200,"msg": "停用用户成功！"};
        }
    })
})

router.get('/startuser', (req, res) => {
    // console.log(req.query.id);
    const sqlStr = "update user set valid=1 where id=?";
    db.query(sqlStr, [req.query.id], (err, results) => {
        if (err) return { "status": 500, "msg": "启用用户失败！"};
        if (results.affectedRows === 1) {
            {console.log('更新数据成功!')};
            return {"status": 200,"msg": "启用用户成功！"};
        }
    })
})

前端部分

$(function() {
    // 发送get请求
    function getUserList() {
        $.get('http://localhost:3000/admin', function (res) {
            let rows = [];

            $.each(res, function(i, item) {
                if (item.valid == 1) {
                    rows.push('<tr><td>'+item.id+'</td><td>'+item.username+'</td><td>'+item.password+'</td><td>'+item.registertime.substr(0, 10)+'</td><td>'+item.valid+'</td><td><a href="javascript:;" class="stop" data-id="'+item.id+'">停用</a></td></tr>')
                }

                if (item.valid == 0) {
                    rows.push('<tr><td>'+item.id+'</td><td>'+item.username+'</td><td>'+item.password+'</td><td>'+item.registertime.substr(0, 10)+'</td><td>'+item.valid+'</td><td><a href="javascript:;" class="start" data-id="'+item.id+'">启用</a></td></tr>')
                }
            })

            $('#tb').empty().append(rows.join(""));
        })
    }

历史记录

显示所有用户登陆记录，并且显示登陆时间。

在这里插入图片描述

前端部分

$(function() {
    function getRecordList() {
        $.get('http://localhost:3000/record', function(res) {
            let j = 1;
            let rows = [];
            // console.log(res);
            $.each(res, function(i, item) {
                let valid = 1;
                if (item.request_url == "/users/login") {
                    item.request_url = "用户登陆";
                }
                else
                {
                    valid=0;
                }
                if (valid == 1) {
                    rows.push('<tr><td>'+j+'</td><td>'+item.username+'</td><td>'+item.request_time.substr(0,19)+'</td><td>'+item.request_url+'</td></tr>');
                    valid = 1;
                    j++;
                }
            })
            $('#recordBody').empty().append(rows.join(''));
        })
    }

    getRecordList();
})

路由部分

router.get('/', (req, res) => {
    db.query('select * from user_action', (err, result) => {
        if (err) return console.log(err.message);
        res.send(result);
    })
});

由于不太好在原界面进行操作，因此这个界面是重新写的，加了返回按钮可以快速返回。

主页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x8qC5Eiv-1624876811398)(D:\大二工作\web\web编程期末作业\期末项目.assets\image-20210628182806580.png)]$

项目总结

首先，web项目主要还是对于框架的熟悉，对于数据库的使用，对于获得数据的处理。因此，项目其实是通过爬虫这一条主线进行的。由于仅有两周的时间进行，项目以任务形式驱动：比如一些可视化的实现（一共四个）和注册登录退出这些基本的功能实现。通过努力，也实现了管理用户和登陆记录的查询与显示。词云其实很有用，但jieba分词确实有些难搞，一开始的环境配置都比较麻烦。

最后，项目总会有些不完美的问题，因此之后还会继续努力学习！web期末项目就到此结束了！！！

ECNU超级大笨蛋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web期末项目

web期末项目作业要求基于第一个项目爬虫爬取的数据，完成数据展示网站。基本要求：用户可注册登录网站，非注册用户不可登录查看数据用户注册、登录、查询等操作记入数据库中的日志爬虫数据查询结果列表支持分页和排序用Echarts或者D3实现3个以上的数据分析图表展示在网站中实现一个管理端界面，可以查看（查看用户的操作记录）和管理（停用启用）注册用户。扩展要求（非必须）：实现对爬虫数据中文分词的查询实现查询结果按照主题词打分的排序用Elastic Searc
复制链接

扫一扫