web编程期末大作业—项目一

实验内容：

首先在项目文件的终端中输入 npm install xxx 安装所有依赖的node modules
其次建立2个mysql表，保存用户信息和操作日志。
然后我们需要建立连接mysql配置文件要求1：用户注册可登录网站，非注册用户不可登录。
登录页

然后是登录页路由，作用是用来判断用户名是否存在以及用户名和密码的输入是否正确

其中调用userDAO，userDAO内容如下

我们需要设置session，保存session信息，不然记录用户操作日志时，不知道是哪位用户进行的操作

接下来是注册

以及注册页路由，作用是判断用户是不是已经被注册和让新用户注册

退出时，注意清除session，防止他人盗用session对象中的信息
要求2：用户注册、登录、查询等操作记入数据库中的日志

要求3：实现查询词支持布尔表达式
首先在news.html引入查询页面


然后是查询页路由

下面的代码就是布尔表达式的组合，即and，or
接着是查询结果的展示

要求4：爬虫数据查询结果列表支持分页
当页面列表数据过多时，我们经常会收到将列表内容分页的需求，前台一次性拿完所有数据，然后进行分页展示；这种方式界面上对用户更友好，便于用户获取信息
下面是翻页的前端代码

其中pageSize数组代表每页显示的数据量，由自己设置；pageList数组代表页数，最多显示5页，后面6页不会全部列出页码

这部分代码显示当前页面 ，比如说，当点中第3页，要显示页面右下角页码变为[1,2,3,4,5]，同时改变序号
要求5： 用Echarts或者D3实现3个以上的数据分析图表展示在网站中
柱状图代码

                $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: ['新闻发布数']},xAxis: {data: newdata["xdata"]},yAxis: {},series: [{name: '新闻数目',type: 'bar',data: newdata["ydata"]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}},function (err) {$scope.msg = err.data;});};

折线图代码
词云代码

代码部分完成后，接下来就是具体的实验部分
首先是登录页面
按照老师要求，接下来应该是数据库的日志，可是不知道为什么我的代码运行不了，此处省略。。。
然后是查询词支持布尔表达式和分页操作，这两项在一起

最后是数据分析图的展示
柱状图

折线图
词云

以上就是这次实验的全部内容，基本上照着老师代码，依葫芦画瓢，有一说一，如果真正的学好这门课，这么多行的代码，而且好多复杂的内容，对我们这些大一同学实在太过困难，加上这次疫情让我们不得不上网课，效率完全比不上在学校，哎。