日常Bug记录

2. Uncaught ReferenceError: $ is not defined

 

项目场景：

环境：spring-boot-starter-thymeleaf、ecplise、grandle、jdk 1.8、Spring Boot   时间：2022.2.5

项目场景：在下拉框中点击列表（例如：城市列表），点击之后页面显示对应的名称以及其它信息

---

问题描述：

点击下拉框之后，对应的点击交互事件并没有触动，在前端选择检测，console显示：Uncaught ReferenceError: $ is not defined

交互事件特别简单

---

原因分析：

由于这是前端界面交互异常，因此对html文件中js每一部分注释对比，发现  在学习时参照视频中使用的thymeleaf交互中引入的js文件不正确。

可能是 它的教学视频比较早，我参照thymeleaf官网给出的交互js 与视频中介绍不一致，我也没有仔细对比，结果自己使用的js并没有引入jQury（百度时一直说是jQury问题，我还奇怪，我都没有用到jQury，结果是我自己引入错误！）

如果有对thymeleaf有更深入了解的朋友，可以在评论里告诉我更细致的原因，不胜感激。

解决方案：

不使用Option 1 和 Option 2. 而是使用最下面的js。

<!-- 这个影响交互 -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
	integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
	crossorigin="anonymous"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
	integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
	crossorigin="anonymous"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
	integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
	crossorigin="anonymous"></script>

修改过后，正常运行！