大致思路

首先，我们知道百词斩的单词释义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><groupId>org.slf4j</groupId><artifactId>slf4j-log4j12</artifactId></exclusion></exclusions></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><fork>true</fork></configuration></plugin></plugins><resources><!-- webapp目录下打包至坐标目录，防止资源无法访问 --><resource><directory>src/main/webapp</directory><targetPath>META-INF/resources</targetPath><includes><include>**/*</include></includes></resource><resource><directory>src/main/resources</directory><includes><include>**/*</include></includes></resource><!-- java文件目录中文件，以及xml打包 --><resource><directory>src/main/java</directory><includes><include>**/*</include></includes></resource></resources></build>
</project>

然后编写启动类、爬虫service，爬虫controller，爬虫工具类

爬虫工具类的具体实现非常简单，思路以注释的方式写在里面了

注意并发问题，spring注解默认是单例的，当大量用户访问的时候很容易出现结果串位的现象：即a的结果在b的空间中显示。所以这里就直接使用@Scope("prototype")注解将单例取消了

//controller
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.none.springbootdemo.service.WordService;@RestController
@RequestMapping("word")
@Scope("prototype")
public class WordController {@AutowiredWordService service;@RequestMapping("getTrans.action")public String getTrans(String word) {return service.getTrans(word);}
}

//service
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.none.springbootdemo.util.MiniReptile;import us.codecraft.webmagic.Spider;@Service
@Scope("prototype")
public class WordService {@AutowiredMiniReptile rep;public String getTrans(String word) {Spider.create(rep).addUrl("http://mall.baicizhan.com/ws/search?w=" + word).run();while(!rep.hasAns()) {try {Thread.sleep(20);//每隔20ms扫描一遍是否获取成功} catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}}return rep.getResult();}
}

//爬虫工具类
import java.io.UnsupportedEncodingException;
import us.codecraft.webmagic.Page;
import us.codecraft.webmagic.Site;
import us.codecraft.webmagic.processor.PageProcessor;
//当数据爬取成功时，hasAns值为true，可从getResult获得结果
@Component
@Scope("prototype")
public class MiniReptile implements PageProcessor {private Site site = Site.me().setRetryTimes(3).setSleepTime(100);private String result;private boolean hasAns;public Site getSite() {return site;}public String getResult() {hasAns = false;return result;}public boolean hasAns() {return hasAns;}public void process(Page page){String s = "";try {//获取页面中body标签中的内容即json，并设置编码格式s = new String(page.getHtml().getDocument().getElementsByTag("body").html().toString().getBytes(),page.getCharset());} catch (UnsupportedEncodingException e) {// TODO Auto-generated catch blocke.printStackTrace();}result = s;hasAns = true;System.out.println(s + "\n");}
}

前端ajax请求

后台写好了，前端我们就写一个简易的界面，使用ajax来访问这个后台：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>单词在线查询测试</title>
</head>
<body><div id="sheet" style="margin-left:40%;margin-top:50px;border:1px #ffffff solid;float:left"><p   style="font-size:15px;">请输入要查询的单词：</p><input type="text" name="dict" id="dict" onchange="getTrans()" style="height:20px;width:100px;border-radius:5px"><div id="showTran"><table><tr><td>单词英文：</td><td id="wordEng"></td></tr><tr><td>单词发音：</td><td id="wordAccent"></td></tr><tr><td>单词中文：</td><td id="wordCn"></td></tr><tr><td>单词例句：</td><td id="wordSt"></td></tr><tr><td>中文翻译：</td><td id="wordSttr"></td></tr><tr><td colspan="2" id="wordPict"><td></tr></table></div></div>
</body><script type="text/javascript">var xml = new XMLHttpRequest();
function setGETXML(location,func)
{xml.open("GET",location,true);xml.onreadystatechange = func;xml.send(null);
}
function getTrans(){var dict = document.getElementById("dict");var eng = document.getElementById("wordEng");var accent = document.getElementById("wordAccent");var cn = document.getElementById("wordCn");var st = document.getElementById("wordSt");    var sttr = document.getElementById("wordSttr");var pict = document.getElementById("wordPict");setGETXML("word/getTrans.action?word=" + dict.value,function(){if(xml.readyState == 4){var word = JSON.parse(xml.responseText);eng.innerHTML = "<p>" + word.word + "</p>";accent.innerHTML = "<p>" + word.accent + "</p>";cn.innerHTML = "<p>" + word.mean_cn + "</p>";st.innerHTML = "<p>" + word.st + "</p>";sttr.innerHTML = "<p>" + word.sttr + "</p>"pict.innerHTML = "<image src='" + word.img + "' alt='图片不见了'/>";}});
}</script>
</html>

页面很简陋，大概这个样子：

输入一个要查询的单词：

ok没问题~

该项目已经打包放到云端，各位可以戳这里访问

springBoot搭配java小爬虫获取百词斩单词释义相关推荐

python小爬虫—获取学校教务处成绩
开始想自己计算一下绩点,所以第一个小爬虫就从抓取自己成绩开始 1.工具: chrome浏览器 vscode 2.先来分析一下学校教务处成绩管理系统的结构,用的竟然是frame标签!!首先是一个输入学号 ...
[遥感]利用python爬虫获取美国冰雪数据中心的数据
00. 写在前面: 由于最近学习方面需要用到NSIDC(美国冰雪数据中心)的数据进行计算,但是手工下载又特别耗费时间,需要一个一个去点击,所以我尝试着去写一个小爬虫获取所需数据. 对所有需要在NSID ...
Python实现简单的爬虫获取某刀网的更新数据
昨天晚上无聊时,想着练习一下Python所以写了一个小爬虫获取小刀娱乐网里的更新数据 #!/usr/bin/python # coding: utf-8import urllib.request im ...
数据挖掘 (三)——基于python的当当网小爬虫
导语本文将实现利用Python爬取并简单地可视化分析当当网的图书数据. 详细的exe.源代码.程序解析等文件请关注公众号行歌知否, 回复关键词当当网小爬虫获取. 更多精彩内容请关注公众号转 ...
基于SpringBoot的Java爬虫-京东商品页
基于SpringBoot的Java爬虫项目-京东商品页一. 爬取(部分)效果图二.遇到的各种BUG 三. 项目目录结构四. 具体代码详解 4.1 配置文件添加依赖 4.2 application ...
java springboot 体育场馆预约小程序源码
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 java springboot 体育场馆预约小程序源码演示视频 ...
Java网络爬虫小案例（详细版）
有bug:修改了<scope>test</scope>后,在控制台还是不能显示日志信息,没找到解决办法配置了log4j.properties,控制台没有显示日志信息_连胜是我 ...
小猿圈分享利用python网络爬虫获取网易云歌词
今天小猿圈给大家分享网易云音乐歌词爬取方法. 本文的总体思路如下: 找到正确的URL,获取源码: 利用bs4解析源码,获取歌曲名和歌曲ID: 调用网易云歌曲API,获取歌词: 将歌词写入文件,并存入本 ...
详解用Java实现爬虫：HttpClient和Jsoup的介绍及使用(请求方式、请求参数、连接池、解析获取元素)
一.介绍:何为爬虫网络爬虫(Web crawler)也叫做网络机器人可以代替人自动地在互联网中进行数据信息的采集和整理是一种按照一定的规则自动地抓取万维网信息的程序或者脚本可以自动采集所有 ...
Java爬虫获取豆瓣的短评数据
Java爬虫获取豆瓣的短评数据打开豆瓣的选电影页面的链接,可以看到该网页的下面分为热门,最新,经典等栏目分类,网页每次显示20部电影,通过几部电影的查看,可以发现电影的短评页https://movi ...

springBoot搭配java小爬虫获取百词斩单词释义

大致思路

后端爬取数据

前端ajax请求

该项目已经打包放到云端，各位可以戳这里访问

springBoot搭配java小爬虫获取百词斩单词释义相关推荐

最新文章

热门文章

springBoot搭配java小爬虫 获取百词斩单词释义

大致思路

后端爬取数据

前端ajax请求

该项目已经打包放到云端，各位可以戳这里访问

springBoot搭配java小爬虫 获取百词斩单词释义相关推荐

最新文章

热门文章

springBoot搭配java小爬虫获取百词斩单词释义

springBoot搭配java小爬虫获取百词斩单词释义相关推荐