web编程项目

javascript web
网站构建
Publish Date:   2023-03-23

一 项目要求

基于第一个项目爬虫爬取的数据，完成数据展示网站。
基本要求:
1、用户可注册登录网站，非注册用户不可登录查看数据
2、用户注册、登录、查询等操作记入数据库中的日志
3、爬虫数据查询结果列表支持分页和排序
4、用Echarts或者D3实现3个以上的数据分析图表展示在网站中
5、实现一个管理端界面，可以查看 (查看用户的操作记录)和管理 (停用启用) 注册用户

二 项目实现

该项目使用了以下模块：

express-session：是express中的一个处理session的中间件。有以下特点：session管理(基本功能),cookie签名,可替换持久储存模块。

在app.js中，设置session的各个参数。

morgan：express默认的日志中间件。

angularJS：是一个 JavaScript 框架。它可通过<script> 标签添加到 HTML 页面。AngularJS通过指令扩展了HTML，并且通过表达式绑定数据到 HTML。

ng-app指令指明了应用, ng-controller 指明了控制器。

根据项目要求，分别介绍基本要求中的五个功能。

1. 用户注册/非注册

要实现用户注册的功能，首先需要创建一个保存用户信息的user表，然后实现当用户注册时存入user，没有注册的用户不能访问网页。

1.1 构建user表

其中的cond列存储该账号的状态，stop：账号禁用，start：账号启用。

--创建用户信息数据表
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,
  `cond` VARCHAR(45) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_UNIQUE` (`username`))
ENGINE=InnoDB DEFAULT CHARSET=utf8;

1.2 实现login，register，logout代码

  • login：登录时调用该函数，访问/users/login路径，判断该用户是否存在，用户和密码是否匹配，该用户是否没被禁用；如果都满足，则返回ok，将用户信息存入session和cookie中，跳转到news.html页面。

  • register：注册时调用该函数，访问/users/register路径，判断该用户是否已经存在，不存在就添加到user表中并返回ok，跳转到index.html界面。

  • logout：登出时调用该函数，访问/users/logout路径，删除掉session和cookie中存储的用户信息，并跳转到index.html界面。

1.3 实现非注册用户无法访问

在进入news.html页面后，每一个操作都需要首先判断request.session['username']是否等于undefined，即判断当前是否有用户登录，只有登录之后才能进行相应的操作，否则只能跳转到登录界面index.html.

2. 用户操作记入日志

2.1 构建user_action表

存入用户的用户名，请求时间，方式，网址和状态码。

--记录用户的登陆，查询（具体查询语句）操作
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.2 实现请求存入表

引入morgan，借助中间件保存的信息。将每一次请求的信息通过函数解析得到相关的数据，调用logDAO中的userlog插入user_action表中。并在terminal中输出相关的信息。

三 项目总结

通过完成web编程期末项目，更加熟悉javascript的实现逻辑，了解了AngularJS这个JavaScript 框架。但在该项目中还没有实现修改数据库的值后及时显示在页面上，希望之后能加以改进。而对于如何实现一个从前端-后端-数据库的项目有了一定的经验。当想要实现某个功能时：

  1. 首先需要考虑这个功能需要从网页中获取数据吗？如果需要，则应该在html中设计相应的组件，点击按钮会发生怎样的变化。
  2. 如果这个变化需要后端的参与，则应该设计相应的函数处理该请求。
  3. 而且后端也分为了处理代码和路由代码：
    • 路由函数处理request请求，可以获取传过来的参数，使用这些参数可以访问数据库，并将结果写入response。
    • 处理函数可以响应前端的调用，构造url调用路由函数，得到返回结果可以进行相应的处理，比如：返回新页面，显示某页面，返回echarts图表，将返回数据写入到前端页面中。
javascript web
  目录