导航条nav与Bootstrap格式失效问题排查

导航条nav与Bootstrap格式失效问题排查

问题起源

在课上跟随老师的操作，使用css相关内容操控页面显示效果。

1、创建一个空项目；

2、逐条使用css内容；

3、导入bootstrap包，与jquery到项目中

4、空项目中的网页格式正常显示

5、将修改应用到自己的项目上，失败！

问题描述

目标：

1、在boostrap自带的nav导航条的基础上进行修改，使页面具有导航栏；

2、划分导航栏下方区域为两部分，一侧菜单，一侧显示

3、显示一侧的表格按钮，都需要使用boostrap里提供的格式

预计效果：

实际效果：

问题现象：

导航栏、左右分侧显示格式失效。但是表格的bootstrap格式应用成功？！

失效了，但没完全失效。成功了，但没完全成功。

问题原因：

编码过滤器里，自动将格式文件解释为html格式，导致格式部分失效。注释删除即可

问题分析

问题分析流程：

1、初步怀疑是新导入的bootstrap或jquery文件有问题

处理：空项目中运行正常的文件直接复制过来，除非文件在这一过程中损坏，否则直接排除

2、jsp文件中粘贴的前端nav代码有问题

处理：逐条与显示成功的空项目中的代码比对，未发现问题

3、文件粘贴进项目成功，但是idea未识别

处理：maven => clean、删除 target文件 、 File =>Invalidate Caches 全部无效

4、导入另一个练习项目查看效果，效果一致，都有问题

5、彻底疯狂！！！

解决流程：求助老师

1、检查前端代码

2、查看导入的文件有没被修改

3、clean一下项目

4、均未发现问题。查看过滤器，注释掉过滤器，显示正常。确定为过滤器问题。

5、查看过滤器代码，发现问题。

问题分析

始终对已经确认无误的部分进行反复的无意义的检查，浪费大量时间。还把心态搞崩了。

结论：应当更加注重逻辑性，使用对比验证时，对已经明确没问题的部分应当直接先放置到绿色区域。着重排查其他区域，大刀阔斧地进行注释排除。

PS：写总结时，将原注释内容改回来，发现显示效果依然正确，clean三板斧后还是没用，果断怀疑浏览器问题。清空浏览器缓存，重启项目，搞定。