利用maven创建webx3项目——实现简单的留言板（五）

 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>密&nbsp;&nbsp;&nbsp;&nbsp;码：</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>&nbsp;&nbsp;&nbsp;&nbsp;用户名：</label>
		<input type="text" name="$group.username.key" value="$!group.username.value"/>
    <p/>
		<label>&nbsp;&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：</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>留言列表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<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&nbsp;$!username&nbsp;&nbsp;<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>