JSF+Maven项目表单不显示及CSS文件无法加载问题求助

嘿，我来帮你解决这两个棘手的技术问题，结合你提供的代码和项目信息，咱们一步步来：

问题1：Chrome里表单组件（输入框、按钮）不显示 #

为啥会这样？ #

看你的web.xml配置，JSF的Faces Servlet只配了/faces/*的映射，但JSF渲染组件需要的核心资源（比如样式、脚本）是通过javax.faces.resource路径请求的，当前配置没覆盖这个路径，导致这些资源加载失败，组件自然没法正常显示。另外你用的是XHTML 1.0的DOCTYPE，和Chrome的HTML5渲染模式有点不兼容，也可能是诱因。

怎么解决？ #

1. 更新Servlet映射：
   在web.xml里加一个覆盖所有XHTML文件的映射，确保JSF能处理所有页面和资源请求：

   <servlet-mapping>
       <servlet-name>Faces Servlet</servlet-name>
       <url-pattern>*.xhtml</url-pattern>
   </servlet-mapping>
   

   原来的/faces/*映射可以保留，不冲突。

2. 换成HTML5的DOCTYPE：
   把页面开头的DOCTYPE改成HTML5标准，适配现代浏览器：

   <!DOCTYPE html>
   

3. 刷新Maven依赖：
   虽然你pom.xml里已经加了JSF的两个依赖，但有时候缓存会搞事情，跑一下这个命令清理重建：

   mvn clean install
   

问题2：h:outputStylesheet找不到CSS文件 #

问题出在这 #

JSF的h:outputStylesheet默认是从webapp/resources目录找资源的，你现在把CSS文件夹直接放在Web根目录，还加了library="CSS"属性——这个属性是用来指定resources下面的子文件夹的，不是根目录的文件夹，所以肯定找不到。

两种解决办法任你选 #

办法1：调整目录结构（推荐）

把CSS文件夹挪到src/main/webapp/resources下面，变成这样：

src/main/webapp
├── resources
│   └── CSS
│       └── home.css
└── faces
    └── home.xhtml

这样你原来的h:outputStylesheet代码不用改，就能正常加载CSS了：

<h:outputStylesheet library="CSS" name="home.css"/>

办法2：改组件写法

不想挪文件夹的话，直接写绝对路径，去掉library属性就行：

<h:outputStylesheet name="/CSS/home.css"/>

额外小技巧 #

• 按F12打开Chrome控制台，看看网络请求里有没有404错误，能快速定位资源加载的问题。
• 给web.xml加个调试参数，开发时能看到更详细的错误信息：

  <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
  </context-param>
  

内容的提问来源于stack exchange，提问作者Maxim Sukhodolets