vue 前端Java爬取 vue爬虫

目录

一.前言

二.前期安装与配置

三.功能实现

四.效果展示&总结

---

一.前言

本次期末项目是在期中项目基础上进行的

期末的项目要求如下：

相比于期中的项目要求，期末项目的难度大大提升，需要实现的拓展功能有“注册与登录功能”、“记录用户操作”、“实现管理端”等。期末项目要求使用express框架实现前端，这实际上在期中项目已经实现了，因此在期末项目中使用express框架搭建后台并使用vue框架开发前端。

二.前期安装与配置

1. 安装vue.js

  为了更好的呈现项目成果，我使用express框架搭建后台，用vue框架重做了前端。vue框架是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合...一言以蔽之，vue框架比较方便简单。通过指令cnpm install vue-cli -g   全局安装 vue-cli，之后选定路径，新建vue项目，输入操作指令cnpm install与cnpm run dev即可安装成功。具体安装步骤可参考文章https://www.jianshu.com/p/02b12c600c7b

2.vue框架相关配置

首先使用vue-cli脚手架创建vue项目，打开项目config/index.js,配置跨域主机和修改端口，host为后端接口api。

1. 在src/main.js引入element-ui以及其他依赖包

3.创建页面并配置路由

要使用vue框架来创建页面：

admin:为后台页面

client：为前台页面

commom:为前台公用页面

1. 配置路由，在router/index.js引入所需跳转的页面

完成前期工作后，就要开始实现具体的诸多功能了。

三.功能实现

先实现用户的登录功能，设计后台界面的登录验证，使用cookies来保存用户的登录状态，判断用户是否登录，若登录则可以查看新闻界面，若没有登录则要调到后台的登录界面

实现登录的效果如下：

登录遇到的情况还是挺多的...代码如下：

后端代码：

当然，没有账号自然无法登录，我们还需要实现注册功能，效果如下：

后端代码：

这就实现了用户的注册以及登录功能。

此外，我们还需要将用户的注册、登录、查询等操作记入到数据库中去：

封装日志函数

在需要的路由中调用

引入函数

调用

然后要对爬虫数据的查询结果进行分页、排序，此外拓展要求1还要求实现中文分词的查询，在这里一起完成。

分页的效果如图：

分页组件

搜索其实在期中项目中已经实现，这里要优化一下：

后端接口，引入中文分词模块segment

对于中文分词，举个例子：

字符串：“腾讯等互联网平台发布合规经营承诺书：不实施垄断协”，分词如下

路由，前端传来用户账号、输入内容，去掉特殊字符，拼接查询语句

例如搜索：广州考古

结果

接下来用Echarts实现数据分析图并展示在网站中，先附上Echarts学习网站https://echarts.apache.org/examples/zh/editor.html?c=pie-simple，学习后我实现了两个饼状图、一个柱状图与一个折线图。

饼状图的代码如下，其他图类似。

最后要实现管理端界面，还要实现可以查看用户的操作记录与管理注册用户，效果如图：

其中停用注册用户实现

后端代码如下：

日志分析

封装日志函数

在需要的路由中调用

引入函数

调用

以上基本要求就完成了。

四.效果展示&总结

最后来展示下最终效果~

在cmd中启动reptile与reptile-client两个文件

连接上数据库

打开网页后，若未登录则只能查看三条新闻

然后点开登录界面，没有账号的话需要先注册：

注册并登录成功后，就可以查看所有的新闻了

分页&搜索功能：

若没有搜索内容，会跳出提示：

此外登陆后还可查看数据分析图

管理端停用注册用户并查看操作记录：

项目算是大功告成~

总结：本次爬虫期末项目相比于期中难度飞升，虽然期末项目中的一些要求在期中已经实现，但仍然存在很多新内容，比如Echarts、中文分词等，花费了大量时间学习并查询了诸多资料才勉强完成，通过期末项目对于web编程有了一个较为清楚的认识，但是对很多地方仍一知半解，日后还需要不断练习。