大致思路
首先,我们知道百词斩的单词释义api为:http://mall.baicizhan.com/ws/search?w=单词
这个api可以直接访问,只要给w赋予要查询的单词,对方就会返回单词释义的json,像这样:
但是这个地址是不允许跨域访问的,也就是说不能在前端直接使用ajax请求,会遭遇XMLHttpRequest cannot loadhttp://mall.baicizhan.com/ws/search. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
的错误。
但是后台仍是可以通过http请求访问的。
于是我们可以在后台编写一个小爬虫获取对应单词的json信息并将其返回至前台
观察这个页面的结构不难发现json就在body中,所以数据清洗非常简单,只需要拿到body标签中的内容即可。
后端爬取数据
创建后台,这里使用springboot快速搭建一个后台,搭建流程可以参考这篇文章:SpringBoot入门 快速创建并部署web后端
然后再pom.xml中填入相关依赖,主要是springboot的启动器依赖,和爬虫所在的webMagic依赖,并注意配置一下编码格式:
然后配置一下构造方式<build>
以便于项目打包:
所以总的配置文件如下:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<!-- 父项目坐标 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
</parent>
<!-- 项目信息 -->
<groupId>springBootProject</groupId>
<artifactId>spring-boot-demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>spring-boot-demo</name>
<description>a simple demostrate of spring boot project</description>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<dependencies>
<!-- springBoot启动器依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 爬虫需要webmagic依赖 -->
<dependency>
<groupId>us.codecraft</groupId>
<artifactId>webmagic-core</artifactId>
<version>0.7.3</version>
</dependency>
<dependency>
<groupId>us.codecraft</groupId>
<artifactId>webmagic-extension</artifactId>
<version>0.7.3</version>
<exclusions>
<exclusion>