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 本身的bugreq.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} 
{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});// 显示 tooltipmyChart.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 stringcolor: function () {// Random colorreturn '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(''+item.id+''+item.username+''+item.password+''+item.registertime.substr(0, 10)+''+item.valid+'+item.id+'">停用')}if (item.valid == 0) {rows.push(''+item.id+''+item.username+''+item.password+''+item.registertime.substr(0, 10)+''+item.valid+'+item.id+'">启用')}})$('#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(''+j+''+item.username+''+item.request_time.substr(0,19)+''+item.request_url+'');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期末项目就到此结束了！！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！