目录

1.同一个jsp页面修改后产生了不同的结果

2.寻找项目中对应jsp页面的方法

 3.在 jsp页面中引用文件，文件路径问题

4.给伪元素添加字体图标font-awesome失效，给伪元素添加背景图片失效

5.修改分页自动生成插件遇到的问题

---

1.同一个jsp页面修改后产生了不同的结果

• 场景介绍：
• 该文件夹下有四个文件，其中黄色标注的文件 sitepage.jsp 里面，编写了页面的 tab栏，嵌套了剩余的三个 jsp页面
• Sitepage.jsp：
• 
• 其他jsp 页面大同小异，都是直接嵌入 sitepage.jsp里面的，其他页面代码风格如下：
• 
• 通过点击其他页面的“查看”进入sitepage.jsp 页面，sitepage 页面中的数据是可变的
• 比如下面两个页面，可以看出，点击“查看”后，最终访问的请求地址都是：
• http://localhost:9090/nuclearRadiation/nuclide/sitePage
• 只是 .vm后面的那堆字符不一样，我的理解是，渲染的数据不同，导致 vm后的不同
• 按道理讲，我修改了sitepage.jsp页面之后，应该所有的该地址下的页面都会发生同样的样式修改
• 但是真实情况如下：仔细观察第一个tab栏内容的表头，表头居然不一样，我在sitepage.jsp页面修改的公共样式，好几十个页面都是一样的，唯独页面二出现了问题

• 页面1：http://localhost:9090/nuclearRadiation/nuclide/sitePage.vm.....

• 

• 页面2：http://localhost:9090/nuclearRadiation/nuclide/sitePage.vm.....

• 

• 最后这个问题解决了，我在sitepage.jsp文件的style标签中，对表头进行了单独设置，width: 100%，就可以了
• 但是这个方法第二天莫名其妙的失效了，最后改成了 width: inherit 这个属性，表头就又重新充满内容区域了
• 上面的例子，我的疑惑如下：
• 为什么统一设置sitepage.jsp样式，几十个页面都生效了，却出现了页面二这种特例？
• 访问页面的地址，sitepage.vm后面那堆乱码是什么？
• Width: inherit 含义及应用场景，和width:100%区别，为什么会出现第一天没问题，第二天又有问题这种情况

2.寻找项目中对应jsp页面的方法

• 场景介绍：
• 我现在都是在 eclipse中运行 Java项目，在 VSCode中对Java项目样式进行编辑；

1. 在vscode中会采用 ctrl+f寻找替换文件内关键字，采用ctrl+p寻找文件；
2. 在eclipse中，“寻找文件，寻找替换文件内关键字”这两步操作的快捷键我没有分开，好像是跟search啥的有关，具体我没操作过；

• ————————————————————————————————————————————————
• 访问项目的某些页面，地址栏显示地址，乱码前面的地址部分通常会被我作为寻找文件的路径依据，但是，并不是每次都能找到的，比如：
• http://localhost:9090/nuclearRadiation/report!list.action?xmlname=LrCompany&roleQuery=true&THS_JDP_RES_DESC=%25E5%.....
• 乱码前的最后一个字符是：report?list.action xxx…，对应：下面这么多：
• 我只能挨个找，还不一定对……
• ————————————————————————————————————————————————
• 再比如我要修改下图左侧弹框内部的滚动条，经过检查我发现这个滚动条是，内嵌iframe的滚动条，内嵌iframe中包含表格，内嵌iframe的地址是：
• http://localhost:9090/nuclearRadiation/associated/electromagnetism/monitorListVm.vm?point_type=%25E7%25...
• 
• • 而真正的对应该iframe的.jsp文件名字却是：fshjzl_jczd_list.jsp
  • 可以看出：访问iframe页面中路径的最后部分 居然和对应的jsp页面完全不一样
  • fshjzl_jczd_list.jsp  VS  monitorListVm 
  • 我找不到这个页面，后台帮我找的……
  • ————————————————————————————————————————————————
  • 再比如这里，leftPop这个div中，嵌入了iframe：
  • 
  • 而控制台中显示，leftPop这个div下面的iframe，被直接替换成了iframe的具体内容，而不是显示这个嵌入的iframe的地址，因此我并不能找到这个iframe页面的位置：
  • 
  • 通常情况下iframe不是显示这种地址吗：
  • 
  • 上面的例子，我的疑惑如下：
  • Eclipse软件中，寻找文件、寻找替换文件内关键字的快捷方式及区分（在项目文件中右键、在软件顶部菜单栏寻找）
  • 如何快速寻找页面对应的jsp文件，而不是手动的多挑一？
  • 如果访问页面地址中的路径乱码前的部分 和jsp页面的文件名完全不一样，该怎么找这个页面？
  • 如何快速准确的寻找未给出 src的 iframe对应的文件？
  • 项目访问时的地址中，乱码前面的report?list.action有什么含义？问号、action等等应该是固定语法

 

 

 3.在 jsp页面中引用文件，文件路径问题

• 场景介绍：
• 在 jsp页面中引入文件，有下面两种写法，除了红色标注部分之外，其余地方都一样，都是引用的同一个位置的文件
• 那么，红色标注部分有什么区别呢？这两个引用不是同时都可以成功的，得分情况分开用，我不知道啥时候该用哪个：

1. <link href="${ctx}/assets/css/ViewUI/ace-skin-ViewUI.css">
2. <link href="/nuclearRadiation/assets/css/ViewUI/ace-skin-ViewUI.css">

• 我的理解是： ${ctx}相当于webapp文件夹，nuclearRadiation相当于main文件夹
• ————————————————————————————————————————————————
• 引入图片踩得坑：

1. 图片路径：nuclearRadiation\src\main\webapp\WEB-INF\jsp\screen\images
2. 我引入的：<img class="title-icon" src="${ctx}/WEB-INF/jsp/screen/images/title-icon.png"/>

• 报错：
• 
• 最后java组的人告诉我图片不可以放在 WEB-INF下，我就把图片文件夹丢别的目录了
• 引入成功的地址：<img class="title-icon" src="${ctx}/image/screen/title-icon.png"/>
• 上面的例子，我的疑惑如下：
• 区分：“${ctx}、/nuclearRadiation（项目名）/…”这两种文件引入的方式，什么时候用哪个，以及我理解的正确吗？
• 图片引用不能放在WEB-INF文件夹下，类似于这种坑，还有吗
• 想被理清一下java项目中的目录结构，哪些地方放什么

4.给伪元素添加字体图标font-awesome失效，给伪元素添加背景图片失效

• 
• 场景介绍：
• content: "\f100"; 是字体图标库 font-awesome 中的 这个字体图标代码
• 我在某jsp页面中引入了字体图标所需要的文件（确定只需要这一个）：<link href="${ctx}/assets/components/font-awesome/css/font-awesome.css"/>

• 浏览器中并没有报错404，说明文件引入未失败，我在除了伪元素之外的地方添加字体图标不会有任何问题，但是到了伪元素，就会引入失败，变成 ←这个图标
• ————————————————————————————————————————————————
• 同样的，我想制作这样一个效果： 标题放在p标签里，给p标签添加伪元素::before，并把伪元素设置成绝对定位，设置宽高位置添加背景图片，p设置成相对定位，这样搞的话，会让伪元素显示不出来
• 上面的例子，我的疑惑如下：
• 用伪元素添加字体图标、背景图片是有什么注意事项吗？很容易失败，最后都被迫改了html结构新增别的标签承载图片或者字体图标

5.修改分页自动生成插件遇到的问题

• 场景介绍：
• 这分页在许多个jsp页面中都有出现，但是并没有对应的html结构，后面被告知这个分页是插件自动生成的，现在需要把”首页、上一页、下一页、末页”改成font-awesome字体图标，做出这种效果：
• 
• 我在有分页的jsp页面中，发现了一些插件的js代码，可以更改这个内容：
• 
• 我的问题是：我在该页面的js代码中，可以引用字体图标吗？就是说把那个js中的<<>><>替换成’/f110’这种字体图标代号的形式，因为手写的 << 不符合规范，唯有字体图标符合设计规范
• 最后我还想到了一个解决办法，就是让原来的“首页”这种内容变成透明色，给对应的位置添加伪元素，设置伪元素的内容为字体图标代码，但是因为前面的第4个问题，我的伪元素最终还是显现为了： ，而不是： ，故此方法被放弃
• 上面的例子，我的疑惑如下：
• Js代码中添加的数据，可以设置为字体图标吗？