github:https://github.com/wade6/messageboard-webx3
实现表现层
5、创建页面的模板文件
创建后目录结构为:
在webapp/messageBoard/templates中创建页面的结构;
control目录中主要存放页面上的公共按钮模板;
layout目录中主要存放页面的布局模板;
screen目录中主要存放页面的主体内容模板;
文件的源码为:
screen/index.vm
这个页面是用户的登陆页面,包括两个输入框和三个按钮。
<form action="" method="post"> $csrfToken.hiddenField <input type="hidden" name="action" value="userAction"/> #set ($group = $form.login.defaultInstance) <p>你好,请登录...</p> #if (!$group.username.valid) <p>$!group.username.message</p> #end #if (!$group.password.valid) <p>$!group.password.message</p> #end <p>$!message</p> <p> <label>用户名:</label> <input type="text" name="$group.username.key" value="$!group.username.value"/> <p/> <label>密 码:</label> <input type="password" name="$group.password.key" value=""/> <p/> <input type="submit" value="登陆" name="event_submit_do_login"/> <input type="reset" value="重置" /> <input type="button" value="注册" onclick="location='$messageBoardLink.setTarget("register")'" /> </p> </form>
关于上述页面的解释》:
$csrfToken.hiddenField为了防止csrf攻击增加的一个token;
#set ($group = $form.login.defaultInstance)是提供表单验证的服务。
<input type="hidden" name="action" value="userAction"/> 将信息提交到userAction.java
<input type="submit" value="登陆" name="event_submit_do_login"/>将信息提交给userAction.java的doLogin()方法
<input type="button" value="注册" onclick="location='$messageBoardLink.setTarget("register")'" /> 跳转到注册页面
#if (!$group.username.valid)
<p>$!group.username.message</p>
#end
上面的命令是如果表单验证失败会打印出form.xml中配置的错误信息。
<input type="text" name="$group.username.key" value="$!group.username.value"/> 绑定表单验证
screen/register.vm
这个页面是注册的表单页面
<form action="" method="post"> $csrfToken.hiddenField <input type="hidden" name="action" value="registerAction"/> #set ($group = $form.register.defaultInstance) <p>你好,请注册...</p> #if (!$group.username.valid) <p>$!group.username.message</p> #end #if (!$group.password.valid) <p>$!group.password.message</p> #end #if (!$group.repassword.valid) <p>$!group.repassword.message</p> #end <p> <label> 用户名:</label> <input type="text" name="$group.username.key" value="$!group.username.value"/> <p/> <label> 密 码:</label> <input type="password" name="$group.password.key" value="$!group.password.value"/> <p/> <label>确认密码:</label> <input type="password" name="$group.repassword.key" value="$!group.repassword.value"/> <p/> <input type="submit" value="提交" name="event_submit_do_register"/> <input type="reset" value="重置" /> <p/> <p>$!message</p> </p> </form>
screen/message/addMessage.vm
增加留言的表单页面
<form action="" method="post" > <input type="hidden" name="action" value="messageAction"/> <input type="hidden" name="author" value="$!username" /> <p> <label>标题:</label> <input type="text" name="title" value=""/> </p> <p> <label>内容:</label> <textarea rows="10" cols="80" name="content"></textarea> </p> <input type="submit" value="提交" name="event_submit_do_add_message"/> <input type="reset" value="重置" /> <p>$!message</p> </form>
screen/message/messageDetail.vm
展示留言详情的页面,没用到
screen/message/messageList.vm
展示留言列表的页面,这个页面把留言的所有信息都加展现出来了,还有对留言的删除修改功能。
<div style="font-size:10pt"> <p>留言列表 <a href="$messageBoardLink.setTarget("message/addMessage")">添加留言</a> </p> <p style="color:red">$!message</p> <p>--------------------------------------------------------</p> <form action="" method="post" target="_self"> <input type="hidden" name="action" value="messageAction"/> #foreach($messageItem in $messageList) <p>标题:$!messageItem.title</p> <p>作者:$!messageItem.author</p> <div style="color:blue"> <p>$!messageItem.content</p> </div> <a href='#' onclick="deleteMessage($messageItem.id)">删除</a> <a href='$messageBoardLink.setTarget("message/modifyMessage").addQueryData("messageId", $messageItem.id)'>编辑</a> <p>--------------------------------------------------------</p> #end <input type="hidden" id="messageId" name="messageId" value="$messageItem.id"> <input type="submit" id="delete" style="display:none;" name="event_submit_do_delete" /> </form> </div> <script> function deleteMessage(id){ if(confirm("确定要删除?")){ document.getElementById("messageId").value=id; document.getElementById("delete").click(); } } </script>
screen/message/modifyMessage.vm
修改留言的页面,只能修改留言的标题和内容。
<form action="" method="post" > <input type="hidden" name="action" value="messageAction"/> <input type="hidden" name="author" value="$!username" /> <input type="hidden" name="id" value="$messageDO.id" /> <p>$!message</p> <p> <label>标题:</label> <input type="text" name="title" value="$messageDO.title" /> </p> <p> <label>内容:</label> <textarea rows="10" cols="60" name="content">$messageDO.content</textarea> </p> <input type="submit" value="提交" name="event_submit_do_modify_message"/> <input type="reset" value="重置" /> <p>$!message</p> </form>
layout/default.vm
登陆页面的布局,包括顶端的欢迎信息和底端的版权信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> #showHead ("My Message Board") </head> <body #bodyAttributes ()> <p><lable>**welcome,欢迎访问我的留言板**</lable></p> <hr/> $screen_placeholder <hr/> 版权所有@messageBoard </body> </html>
layout/message/default.vm
留言页面布局,包括欢迎信息、退出和版权信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> #showHead ("My Message Board") </head> <body #bodyAttributes ()> <p>欢迎您,dear $!username <a href="#" onclick="logout()" >退出</a> </p> <hr/> $screen_placeholder <form action="" method="post" > <input type="hidden" name="action" value="userAction"/> <input type="submit" id="logout" style="display:none;" value="提交" name="event_submit_do_logout"/> </form> <p>[<a href="$messageBoardLink.setTarget("message/messageList")">Home</a>]</p> <hr/> 版权所有@messageBoard </body> </html> <script> function logout(){ document.getElementById("logout").click(); } </script>
相关推荐
基于maven创建web项目 maven是一种基于项目对象模型(Project Object Model,POM)的项目管理工具,由Apache软件基金会开发和维护。maven提供了一种标准化的方式来构建、打包和部署项目,它可以帮助开发者简化项目...
### 使用Idea14.1.4和Maven创建Java Web项目 #### 一、概述 在本篇文章中,我们将详细介绍如何使用IntelliJ IDEA 14.1.4版本结合Maven来创建一个Java Web项目。这种方法不仅能够提高开发效率,还能确保项目的结构...
【标题】:“idea使用maven创建的web项目” 在Java开发中,IntelliJ IDEA(简称Idea)作为一款强大的集成开发环境,结合Maven构建工具,能够帮助开发者高效地管理项目的依赖、构建和部署。Maven是一个项目管理和...
本文将深入探讨如何利用Maven构建多模块项目,以及在实际操作中需要注意的关键点。 1. Maven多模块项目结构: Maven多模块项目通常遵循一个标准的目录结构,包括一个顶级父 pom.xml(如test-hd-parent),和若干子...
项目管理利器——maven,技术开发学习类稳定档案顶顶顶顶
java创建一个简单的Maven项目java创建一个简单的Maven项目java创建一个简单的Maven项目java创建一个简单的Maven项目java创建一个简单的Maven项目java创建一个简单的Maven项目java创建一个简单的Maven项目java创建一...
【标题】"mavenWeb空项目"所涉及的知识点主要...综上所述,"mavenWeb空项目"是一个包含Java Web开发基础的项目模板,利用Maven进行构建管理和单元测试,为开发者提供了一个良好的起点,便于快速开发和迭代Web应用程序。
本篇文章将详细介绍如何利用Maven创建一个Servlet版本为3.0、Java版本为1.7的Web项目,并对创建过程中可能出现的问题及解决方案进行深入探讨。 #### 二、准备工作 1. **安装环境**: - Eclipse IDE(推荐使用最新...
通过 Maven 创建 Web 项目能够帮助开发者快速搭建开发环境,实现自动化构建、依赖管理和部署等功能。本文将详细介绍如何使用 Maven 在 Eclipse 中创建一个 Web 工程。 #### 二、准备工作 在开始之前,请确保已经...
在当今的软件开发领域,Java作为一种编程语言广泛应用于各个项目开发中,而Maven作为Java项目中一个十分流行的项目管理和构建工具,扮演着非常重要的角色。Maven不仅能帮助开发者管理项目依赖、自动化构建过程、提供...
idea中利用maven创建web项目, 并通过tomcat进行部署,运行项目
本文将深入探讨如何在Eclipse中利用Maven创建一个Web应用程序项目。 首先,我们需要理解“Eclipse使用Maven无法建web项目”这个问题可能涉及到的几个关键点。在Eclipse中创建Maven Web项目时,可能会遇到诸如Maven...
Maven项目创建流程是Java开发中一个至关重要的环节,它可以帮助开发者规范地组织项目结构,并自动管理项目的依赖关系。以下是一个详细的Maven项目创建步骤,包括创建父项目、子模块以及设置相关的配置信息。 1. **...
在IDEA(IntelliJ IDEA)中创建这样的项目,开发者可以充分利用其强大的代码编辑、调试、版本控制和项目管理功能,提高开发效率。IDEA的Maven支持允许用户轻松管理依赖关系,构建和运行项目。 【标签】"maven web...
1. **初始化项目**:创建一个新的Maven项目,设置POM.xml文件,这是Maven项目的配置中心,包含项目的基本信息和依赖。 2. **添加SSH框架依赖**:在POM.xml中,你需要指定SSH框架的版本号,并添加相应的依赖。 3. *...
"Eclipse创建基于MAVEN的web项目" 标题解释 本文主要介绍如何使用Eclipse创建基于Maven的Web项目,包括建立Maven项目、配置项目、构建框架等步骤。 描述解释 使用Eclipse创建Maven版的Web项目需要通过Maven的...
本教程通过实例演示了如何利用Maven创建一个多模块Java工程,并将其集成到Eclipse环境中,为开发者提供了一条清晰的项目构建和管理路径。无论是初学者还是经验丰富的开发者,都能从中受益,提升项目构建效率和代码...