重温SSH小项目实践(4)－简单的登录页面整合

第一个页面整合

到目前为止，框架从Action到后台数据库流程都通了，是时候让页面来展示一下的时候了，先搞个最简单的页面，登录页面好了

action的配置在第一节中已经做过了，超接简单，LoginAction中的userInfo变量负责从前台收集用户输入的用户名和密码，然后调用Service层接口判断用户密码是否匹配，如果登录成功，将当前用户信息保存到session中，如果登录失败，给出失败提示信息，并在登录页面上提示出来，

这里要处理一下几个核心要素

1.前台页面参数收集

因为后台Action负责接受前台参数是一个userInfo对象，因此，对应的用户名和密码的name分别设置为userInfo.name和userInfo.password,这样在表单post到后台后struts2拦截器会自动把这些值解析，通过反射机制调用userInfo.setName()和userInfo.setPassword()方法注入值，注意，后台LoginAction类中的UserInfo对象一定要写setter和getter方法，否则值是无法自动装配上的

2.出错信息显示

正常的情况下用户输入正确的用户名和密码系统就登录进去了，那如果如有错误该如何展示给用户呢，Struts2提供了几个粒度的错误提示信息actionError--表示一条或多条的出错信息，actionMessage--表示普通信息提示，也可以表是一条或多条，fieldError字段级别的错误，这里我们用 的是actionError,action代码如下图

然后在前台中利用struts2的标签<s:actionError/>将错误显示出来

问题：为什么错误提示那么奇怪，错误提示里那个小黑点是怎么搞出来的，怎么去除呢

这个是struts2的标签带来的，看一下源码就知道了，我们的错误提示最终解析成的html为<ul><li><span class="errorMessage">密码错误!</span></li></ul>，所以出现那个奇怪的东西

<#if (actionErrors?exists && actionErrors?size > 0)>

<ul>

<#list actionErrors as error>

<li><span<#rt/>

<#if parameters.cssClass?exists>

class="${parameters.cssClass?html}"<#rt/>

<#else>

class="errorMessage"<#rt/>

</#if>

<#if parameters.cssStyle?exists>

style="${parameters.cssStyle?html}"<#rt/>

</#if>

>${error}</span></li>

</#list>

</ul>

</#if>

怎么去除呢？重写一下这个标签及可以了，在src/main/resources下新建template/simple文件夹然后新建一个actionerror.ftl，内容如下

注意，我们在struts.xml里要修改下struts样式的加载路径<constant name="struts.ui.theme" value="simple" />这是因为struts2默认是用xhtml来生成标签的，用这个样式的标签有个很大的缺点就是struts会自动在生成的标签外层套用一些td,tr,table,或span之类的东西，如<s:label value="文本"/>解析后的html是<td>文本</td>，这样额外加上这些元素后我们原有的页面样式会被搞乱掉了，所以切到simple主题下，这个主题下的标签不会添加额外的元素，但也有小部分还是需要单独处理下的

<#if (actionErrors?exists && actionErrors?size > 0)>

<#if (actionErrors?size > 1)>

<div class="box box-error-msg">

<ol>

<#list actionErrors as error>

<li>${error}</li>

</#list>

</ol>

</div>

<#else>

<div class="box box-error">${actionErrors[0]}</div>

</#if>

</#if>

这个是我们自己定义的样式，因为一旦系统的演示定下来后这些报错信息都是统一的，所以都写在里面了，页面上调用<s:actionerror />标签时不需要再去判断是否有<s:if test=“hasActonErrors()"/>去判断了，因为这些逻辑都在这个被重写过的标签里了，这个标签支持两种样式的报错，一种是单行报错，另一种是多行报错信息，分别会调用不同的样式来处理，至此，一个登录页面就大功告成了，最终的界面展示

经验与总结：

Struts2的默认主题样式直接用会让人晕掉的，那么多额外毛出来的标签把原本漂亮的页面搞的一塌糊涂，先前用的时候不知道是因为这个xhtml和simple样式的问题导致的，所以以前处理这些问题很被动，作出的页面也很撮，看来用一个框架或工具必须是要深入了解其内部细节的，呵呵，第一个页面出来了，下一个还会远吗？