100_实战：京东搜索

目录

效果图

image.png
image.png

项目搭建

创建模块

image.png
image.png
image.png
image.png
image.png

自定义ES依赖版本

image.png

添加依赖 com.alibaba.fastjson

image.png

删除多余的文件

image.png
image.png

配置 application.properties

image.png

拷贝基本静态文件 css js images

image.png

拷贝页面 index.html

image.png

编写IndexController

image.png

启动项目

image.png

访问主页

image.png

爬取数据

image.png
:::info
爬取数据：获取请求返回的页面信息，筛选出想要的数据就可以了
:::

导入依赖 jsoup 解析网页

image.png

编写页面解析工具类

分析页面

image.png
image.png
image.png
image.png
image.png
:::info
这些图片特别多的网站，图片都是懒加载的，先加载JD这种统一图片，再渲染本身图片，所以src不是真正的图片url，source-data-lazy-img才是真正的图片url
:::
image.png
image.png
image.png

测试解析方法

image.png
image.png
image.png
image.png

编写实体类

image.png

提取解析方法并测试

:::info
注意：new URL()这样写不支持中文，如果用中文，使用new URL()重载的方法或其他
:::
image.png
image.png
image.png
image.png

编写页面解析工具类

image.png
image.png

业务代码编写

ES配置类 ElasticSearchClientConfig

image.png

创建索引 jd_goods 使用代码或工具都可以

image.png

Service：解析页面将数据放入ES索引中

image.png

Controller：解析页面将数据放入ES索引中

image.png

测试接口

image.png
image.png
image.png
image.png

Service：从ES获取数据实现搜索功能

image.png
image.png

Controller：从ES获取数据实现搜索功能

image.png

测试接口

image.png

前端代码编写

npm安装模块 vue axios

image.png
image.png

拷贝js到/static/js下 axios.min.js vue.min.jsimage.png

image.png
image.png

index.html使用vue

image.png
image.png
image.png
image.png
image.png
image.png

测试

image.png

关键字高亮实现

Service：从ES获取数据实现关键字高亮

image.png
image.png
image.png

Controller：从ES获取数据实现关键字高亮

image.png

前端实现

image.png

测试

image.png

posted @ 2022-10-27 16:50  清风（学习-踏实）  阅读(49)  评论(0)    收藏  举报