2021-06-30

前言：
        本学期的web编程的期末作业是在期中作业的主流新闻网站的爬虫的基础上做一个数据展示网站，它的基本要求如下：

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

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

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

•4、用Echarts或者D3实现3个以上的数据分析图表展示在网站中
基于老师给我们的模板以及我在菜鸟上的学习，我学习了一下王爷的美化编辑以及后端处理。

项目的实现过程

  首先我们需要先建立两个表，分别是user和user_action。user用于储存用户名，密码等用户信息，user_action用来储存登录，查询等操作。

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,

  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;

然后是创建配置文件mysqlConf.js，用于连接数据库。

1网页前端ind.html

引入css

引入angular

定义check_pwd函数，检验用户输入的用户名与密码是否已注册过，若已注册，则成功。

成果如下

路由代码

将用户输入的用户名传入数据库，然后获取相应的密码。

注册

、

让用户输入用户名，密码以及二次确认。

主要作用为二次检验密码。

检查用户是否存在

查询及存入数据库

新闻查询页面

查询界面成功如下

图表

项目总结

当初老师布置任务的时候，我选择了与期中作业爬虫挂钩的选项一作业，我天真的以为这会比较轻松，真正做项目的时候才发现这也不简单，在这一年的学习时间里，我第一次接触了JavaScript，学习了网页的相关知识，还是很有收获的。感谢老师与助教的帮助。