web期末项目

web期末项目

作业要求

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

基本要求：

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

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

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

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

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

扩展要求（非必须）：

1. 实现对爬虫数据中文分词的查询

2. 实现查询结果按照主题词打分的排序

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

};

效果展示：

数据可视化

这部分代码比较长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;
            });

};

展示

饼图

配置部分

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

展示

折线图

配置部分

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

展示

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

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

        });
}

展示

访问管理

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

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

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

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

主页面

项目总结

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

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