引言

上一篇主要讲解的是:京东商场之业务编写(编写配置类、创建索引、编写service层实现批量插入、编写controller层实现批量插入、启动程序、访问测试、验证es中的数据、编写service层实现分页搜索功能、编写controller层实现页面搜索功能)

本篇主要讲解的是:京东商场之前后端交互(修改index.html文件、编译项目、重新启动程序、index.html继续完善js代码、index.html遍历商品详细信息、访问测试)

修改index.html文件

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea

删除第8行记录

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_java_02

在第11行给div加上id属性

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_java_03

在33行和37行增加,绑定单击事件

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_Elasticsearch_04

在121行增加js代码

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_Elasticsearch_05

重新编译项目

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_maven_06

重新启动程序

先关闭程序

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea_07

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_maven_08

重启程序

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_java_09

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_maven_10

在控制台上输出如下图,证明启动完成

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea_11

访问测试

在浏览器中输入  http://localhost:9090/

按F12,打开 开发工具

在搜索框中输入:java,开发工具控制台中输出:java

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea_12

index.html继续完善js代码

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea_13

index.html遍历商品详细信息

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_SpringBoot_14

重新启动程序

先关闭程序

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea_07

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_maven_08

重启程序

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_Elasticsearch_17

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_maven_18

在控制台上输出如下图,证明启动完成

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_idea_11

访问测试

浏览器中输入   http://localhost:9090/

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_SpringBoot_20

Elasticsearch掰开揉碎第23篇京东商场之前后端交互_java_21

结束语

至此,Elasticsearch掰开揉碎系列的第23篇就结束了,本篇主要讲解的是:京东商场之前后端交互(修改index.html文件、编译项目、重新启动程序、index.html继续完善js代码、index.html遍历商品详细信息、访问测试)

由于页面显示图片大小有限,代码一多图片显示得就偏小。还有一些兄弟们,java的基础又不好,照着我的图片打代码,可能因为手误都会出错。为了不让任何一个兄弟夭折在学习的路上,有需要本篇文章中java源代码的,就给我留言点赞吧,Elasticsearch系列也写么这多篇了,算是对我的鼓励和支持吧!留下你的邮箱,我把源代码发给你!

下一篇我给大家带来的是:京东商场之关键字高亮。我们依然掰开揉碎的方式去说。后续的内容更精彩,敬请期待,感谢兄弟们的关注!!!