web编程期末大作业

首先呢，请看本次期末作业的目标，我们要基于期中爬虫项目爬取的数据，来完成一个数据展示网站。我的网站实现了一下功能：

1.用户可注册、登录网站，未登录用户不能在网站中查询数据。

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

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

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

为了实现以上功能，我是这样做的：

一.建立数据库，统计用户信息以及操作信息：

根据任务要求，我们需要统计所有注册用户的信息，包括用户的账号密码，以及顺次排列的用户id；以及每一个用户每一次访问的记录，包括用户的账号密码，访问的地址，搜索的关键字，访问时间等。于是我们在数据库中建立两个表格，分别统计用户信息和查询信息。建表过程如下：

以及，我们需要在项目中访问数据库，于是我们记录数据库的账号密码：

二.制作网站注册/登录页面前端

首先呢，我们写出登录界面的框架，因为本界面分为两部分，第一部分是登录，第二部分是注册。所以我们需要两个函数：

第一个负责登录，当用户输入账号密码时，该函数将用户的账号与数据库中已有的账号比对。若存在，则比对用户输入的密码与该账号的密码，若密码正确，则允许用户登录，若不正确则报错；若账号不存在，则报错。

第二个负责注册，用户在注册函数中输入账号，并两次输入密码。首先函数将账号与数据库中已有账号进行对比，若有重复则报错，无重复则继续。然后函数对比两次输入的密码，若一致则继续，若不一致则报错。这两项都通过后，该函数将用户注册的账号及密码传入数据库中。之后，用户可通过该账号密码登录。

以下是这两个函数：

接下来，我们要制作网页界面。界面要分成注册和登录两部分，并且引用这两个函数。在用户点击注册或者登录按钮时，可以实现这两个功能。

而登录界面不能只有框架，还要有一定的润色，让界面整体看起来美观一些。比如要调整好行距，调整按钮、提示字的颜色等。这里我们首先引入几个css包，然后还需要引用一个针对自己的界面写的css文件，来润色界面：

最后呢，我们需要使用路由，实现在用户注册以及登陆中对用户进行回应：

这是登录界面使用的路由函数

这是注册界面的：

最终登录界面是这样的：

总结一下，登录系统大概是这样的：

首先，首页捕获到get请求，然后，若用户选择登录界面，则用户输入账号密码，捕获到表单post请求，看能否在数据库中找到用户信息，如果能，则登陆成功，创建cookie，不能，则提示登陆失败，重新填写用户信息。    若用户选择注册界面，则用户输入账号密码，捕获到表单post请求，若两次密码一致，则提示注册成功，并在数据库中插入账号信息。用户再返回登录界面后可用已注册账号密码登录。

三.制作搜索界面：

搜索界面相对简单，需要实现两种搜索方式：按照标题搜索以及按照内容搜索。并且需要支持同时搜索多个关键词。

这里实现了这两个搜索框。关键字可以支持and和or两个模式。and模式下只显示同时拥有两个关键字的新闻，or模式下则可以显示仅含有其一的。

这段代码构成了搜索界面的前端：

 用户在前端输入要搜索的关键字后，系统需要将关键字传入数据库中，与已在数据库中的爬取过的新闻进行对比，找出符合搜索条件的新闻

我们需要检查用户输入的关键词是否有问题，若用户不输入任何查询词，则默认搜索所有新闻。以下是用于查询新闻的函数：

然后通过route与用户产生回应：

四.爬虫查询结果支持分页排序：

因为爬取到的数据可能较多，所以我们采取分页来显示所有的数据。这里我们让每页可以展示5条数据：

 然后我们需要支持观看每一页的内容，有上一页、下一页按钮，而且在首页时没有上一页，尾页时没有下一页，且通过当前页数筛选出表格当前显示数据：

这是上一页和下一页按钮实现的操作：

于是，完成了这些后，我们可以实现，在表格中显示新闻并且支持分页了。

以下是我以看看新闻为例，搜索关键字：疫情 得到的界面：

五.查询用户的操作记录

这一步的方法比较直接，我们通过中间件记录用户每一次查询的操作，然后传入之前建立好的数据库中的用于记录用户操作的表格中即可。

 

到此为止，这个项目最基本的部分完成了。但是确实还有一些要求未能达到，比如echart建表的使用。web编程对我来说实在是一个很难的过程，期末作业的完成大部分也不是在自己创作代码，而是在摸索示例代码是什么意思。最终踉踉跄跄地完成了这个项目。