`
schy_hqh
  • 浏览: 558048 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

(五)play之yabe项目【评论】

 
阅读更多

完成显示并发表评论功能

编写博客详细内容的页面,该页显示博客的所有评论,并可以添加新的评论!

 

创建显示评论的action

为了显示博文的详细页面,需要在Application.java中增加新的action的方法,这个action叫做show()

    /**
     * 显示详细的博文评论
     */
    public static void show(Long id) {
    	Post post = Post.findById(id);
    	render(post);
    }

 这个action将使用模板进行显示。

 

添加show()对应的模板

 

增加yabe\app\views\Application\show.html

#{extends 'main.html' /}
#{set title:'Home' /}

<!--  调用前面已经编写好的display模板进行显示 -->
#{display post:post, as:'full' /}

 

为详细页面添加链接

修改yabe\app\views\tags\display.html

设置具体的链接路径,通过@{...}进行路径的设置

	<h2 class="post-title">
		<!-- 设置标题的超链接,将跳转到博文的详细页面 -->
		<a href="@{Application.show(_post.id}}">${_post.title}</a>
	</h2>

 刷新页面,标题已经可以链接到某个URL了!

http://localhost:9000/application/show?id=1

 点击About the model layer,显示详细评论



 

 

添加返回主页面的链接 

修改yabe\app\views\main.html,加入返回主页的链接

        	<div id="title">
        		<span class="about">About this blog</span>
        		<!-- 设置返回主页的链接 -->
        		<h1><a href="@{Application.index()}">${blogTitle}</a></h1>
        		<h2>${blogBaseLine}</h2>
        	</div>

  

点击Yet another blog即可返回主页



 

 现在,就可以实现主页和详细页面的导航了!

 

指定更好的(RESTful风格)的URL

http://localhost:9000/application/show?id=1这种格式的URL替换为:

http://localhost:9000/post?id=1这样风格的URL!

 

前面所看到的URL如/application/show?id=1 ,play使用默认的路由对其进行解析

在yabe\conf\routes中,有这样一句

# Catch all
*       /{controller}/{action}                  {controller}.{action}

 作为默认的路由解析配置,所以/application/show?id=1 将执行Application控制器的show()方法,并传入参数id=1,进行方法的调用!

 

可以配置route文件,指定更友好的路由方式

在第一个路由之后添加下面这条路由

# restful style route
GET     /post/{id}		            	Application.show

  /post/{id}表示:id参数将从路径中获取

 如/application/show?id=1 将显示为/post/1

 

添加分页功能

为了实现用户在博文之间导航(上一篇、下一篇)的功能,需要扩展Post类

修改yabe\app\models\Post.java

	/**
	 * 前一篇博文
	 */
	public Post previous() {
		return Post.find("postedAt < ? order by postedAt desc", postedAt).first();
	}
	
	/**
	 * 后一篇博文
	 */
	public Post next() {
		return Post.find("postedAt > ? order by postedAt asc", postedAt).first();
	}

 

 接下来,在show.html中添加链接(在#{display /} 之前)

#{extends 'main.html' /}
#{set title:'Home' /}

<!-- 导航:上一篇,下一篇 -->
<ul id="pagination">
	<!-- 前一篇 -->
	#{if post.previous()}
		<li id="previous">
			<a href="@{Application.show(post.previous().id)}"> ${post.previous().title} </a>
		</li>
	#{/if}
	
	<!-- 下一篇 -->
	#{if post.next()}
		<li id="next">
			<a href="@{Application.show(post.next().id)}"> ${post.next().title} </a>
		</li>
	#{/if}
</ul>


<!--  调用display模板显示 -->
#{display post:post, as:'full' /}

 

 添加评论的Form

首先,在Application.java中增加添加评论的action

    /**
     * 添加评论
     */
    public static void postComment(Long postId, String author, String content) {
    	Post post = Post.findById(postId);
    	//保存评论信息
    	post.addComment(author, content);
    	//重新显示该篇博文即其评论
    	show(postId);
    }

 

接着,在show.html模板中编写"窗体代码",即打开一个Form表单,用户可以添加评论

在之#{display /}后,加入如下内容

<!-- 显示一个表单,用户可以添加评论 -->
<h3>Post a comment</h3>
#{form @Application.postComment(post.id)}
	<p>
		<label for="author">Your name:</label>
		<input type="text" name="author" id="author"/>
	</p>
	<p>
		<label for="content">Your comment:</label>
		<textarea name="content" id="content"></textarea>
	</p>
	<p>
		<input type="submit" value="submit your comment"/>		
	</p>
#{/form}

 

刷新页面



 

 

 加入表单验证功能

为窗体提供验证功能,这里对表单的所有字段进行非空验证

Play提供的验证机制让我们很容易对HTTP参数里填充的值进行验证

修改Application.java控制器中的postComment action

为其添加@Required注解,并编写错误检测代码

    /**
     * 添加评论
     * 使用@Required注解,检测author和content参数不能为空
     */
    public static void postComment(Long postId, @Required String author, @Required String content) {
    	Post post = Post.findById(postId);
    	//错误检测
    	if(validation.hasErrors()) {
               //将post对象重新传入模板中,否则新打开的show.html中的post为null!!!
    		render("Application/show.html",post);
    	}
    	//保存评论信息
    	post.addComment(author, content);
    	//重新显示该篇博文即其评论
    	show(postId);
    }

 

当出现错误时,将跳转到show.html模板中显示错误信息

编辑show.html,以便发生错误时能够显示错误信息

在form表单代码中,添加显示错误的代码

<!-- 显示一个表单,用户可以添加评论 -->
<h3>Post a comment</h3>
#{form @Application.postComment(post.id)}
	
	<!-- 在这里显示提交评论时出现的错误 -->
	#{ifErrors}
		<p class="error">All fields are required!</p>
	#{/ifErrors}
	
	<p>
		<label for="author">Your name:</label>
		<input type="text" name="author" id="author"/>
	</p>
	<p>
		<label for="content">Your comment:</label>
		<textarea name="content" id="content"></textarea>
	</p>
	<p>
		<input type="submit" value="submit your comment"/>		
	</p>
#{/form}

 

提交一个空的评论,页面提示错误信息



 

 注意:该页面中需要使用了post对象填充input组件。

            所以在出现错误时,必须将post对象一起传入到模板中!

 

添加更炫的UI交互

使用jQuery的相关js支持

jquery-1.6.4.min.js

jquery.tools-1.2.5.toolbox.expose.min.js

在yabe\app\views\main.html中引入以上两个js文件

 <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript"></script>
 <script src="@{'/public/javascripts/jquery.tools-1.2.5.toolbox.expose.min.js'}" type="text/javascript"></script>

    

      在\yabe\app\views\Application\show.html中加入javascript脚本控制

实现效果:用户点击表单输入时,突出显示form表单,淡化背景

 

<script type="text/javascript" charset="utf-8">
	//点击form之后,将淡化form之外的背景,突出显示表单
	$(function() {
		$("form").click(function() {
			$("form").expose({api: true}).load();
		});
	})
	
	//如果提交表单验证失败,让form获取焦点,以便突出显示form表单
	//注意: $("form .error") 中 from 后面有一个空格,然后才是 .error!
	if($("form .error").size()) {
		$("form").expose({api: true, loadSpeed: 0}).load();
		$("form input[type=text]").get(0).focus();
	}
</script>

 

 

 现在这个窗体看起来非常酷了!

 

增加评论成功的提示信息

成功提交一条评论后提示一条提交成功信息

使用flash作用域实现不同action之前数据的传递

在Application.java控制器的postComment action中添加成功信息

    /**
     * 添加评论
     * 使用@Required注解,检测author和content参数不能为空
     */
    public static void postComment(Long postId, @Required String author, @Required String content) {
    	Post post = Post.findById(postId);
    	//错误检测
    	if(validation.hasErrors()) {
    		//将post对象重新传入模板中,否则新打开的show.html中的post为null!!!
    		render("Application/show.html",post);
    	}
    	//保存评论信息
    	post.addComment(author, content);
    	
    	//设置提交成功后的提示信息到flash作用域
    	flash.success("Thanks for posting %s", author);
    	
    	//重新显示该篇博文即其评论
    	show(postId);
    }

 

在show.html模板中添加显示这条成功信息的脚本(在页面顶部加入)

...

<!-- 评论提交成功后,显示提示信息 -->
#{if flash.success}
	<p class="success">${flash.success}</p>
#{/if}

<!--  调用display模板显示 -->
#{display post:post, as:'full' /}

...

 

重新提交一条评论



 

页面显示评论成功的提示信息



 

 

 

定制REST风格的URL

跳转窗体postComment action的URL。

在没有具体指定路由的情况下,play使用默认的路由来定位到某个action

打开yabe\conf\routes,增加一条路由

POST    /post/{postId}/comments		Application.postComment

 重新评论,即可看到form表单的action路径发生了变化

http://localhost:9000/application/postcomment?postId=1

变为了

http://localhost:9000/post/1/comments  (REST :推崇以资源为导向的操作)

 

 

  • 大小: 109.7 KB
  • 大小: 126.2 KB
  • 大小: 113.5 KB
  • 大小: 35.2 KB
  • 大小: 26.5 KB
  • 大小: 35.9 KB
  • 大小: 23.5 KB
  • 大小: 108.3 KB
  • 大小: 36.9 KB
分享到:
评论

相关推荐

    play framework测试项目

    "yabe"这个文件名可能是项目的简称或别名,具体含义可能需要查看项目源代码才能明确。通常,一个Play项目会包含以下主要目录结构: 1. `app`:包含所有应用程序代码,如控制器、模型、视图和服务。 2. `conf`:存储...

    新建play框架项目.pdf

    在本教程中,我们将深入理解如何使用Play框架创建一个完整的Web项目,以一个博客应用为例,名为Yabe(Yet Another Blog Engine)。 首先,确保你的计算机已经安装了Java 5或更高版本,因为Play框架依赖于Java环境。...

    yabe:另一个博客引擎-Curso Play 1.3.1

    综上所述,"yabe:另一个博客引擎 - Curso Play 1.3.1"涉及到使用Java语言和Play框架开发的一个博客引擎项目。通过学习这个课程或教程,开发者可以了解如何使用Play框架构建Web应用,并可能涉及数据库集成、模板引擎...

    play_入门学习手册

    在CMD中运行`play new yabe`,然后进入项目目录并执行`play run`启动项目。在浏览器输入`http://localhost:9000`,如果看到项目启动成功,说明配置完成。若要将项目转换为Eclipse项目,可以使用`play eclipsify`命令...

    play框架教程前6章

    创建一个新的Play应用,只需在命令行输入`play new yabe`,然后按照提示输入应用的全名,如"Yet Another Blog Engine"。这将生成一个名为yabe的目录,包含了标准的工程结构: 1. `App/`:包含应用程序的核心代码,...

    yabe:另一个博客引擎(Play Framework 1.3.x)

    矢部 另一个博客引擎(Play Framework 1.3.x)

    学习BACnet/IP协议所使用的Yabe和VTS工具

    同时,这两个工具也适用于实际项目中的设备调试和系统集成工作。安装文件"SetupYabe_v1.2.2.exe"是Yabe的安装程序,而"VTS_3.6.7.zip"则是VTS的压缩包,解压后即可运行。 总的来说,熟悉并掌握Yabe和VTS的使用,...

    yabe:另一个后端库

    yabe:另一个后端库

    Play框架7版本教程-数据模型的首次迭代.doc

    在这个博客引擎示例中,模型层包括三个主要实体:User(用户)、Post(博文)和Comment(评论)。 JPA(Java Persistence API)是一个Java规范,它为ORM提供了一套标准的API,允许开发者将Java对象与关系数据库中的...

    SetupYabe_v1.1.9.exe

    Currently supports both BACnet IPv4, IPv6 + BACnet MSTP + BACnet PTP + BACnet Ethernet. Basic functions for read, write, read multiple, write multiple, iam, whois, subscribeCOV, notify, WriteFile, ...

    Yet Another Bacnet Explorer:Yabe-BACnet设备的图形资源管理器程序-C#代码-开源

    用C#编写的图形化资源管理器程序,用于浏览BACnet设备(在Windows和Linux上运行)。 当前同时支持BACnet IPv4,IPv6 + BACnet MSTP + BACnet PTP + BACnet以太网。 用于读取,写入,读取多个,写入多个,iam,whois...

    yabe_sql:剧本1.3.x教程紧随其后

    "yabe_sql" 可能是一个开源项目或工具的名字,而 "剧本1.3.x教程" 指的是该项目或工具的1.3.x版本的相关教学材料。"紧随其后" 暗示这是一个系列教程中的一个后续部分,可能是对之前版本的更新或者扩展。 【描述分析...

    hal库生成基础代码,然后添BACnet mtsp部分,已经成功和电脑BACnet模拟软件Yabe通讯成功

    软件平台:stm32cubemx keil5 使用hal库生成基础代码,然后添BACnet mtsp部分,已经成功和电脑BACnet模拟软件Yabe通讯成功。 硬件平台:基于正点原子stm32f407探索者开发板硬件。

    BACnet设备Socket UDP通信源码

    通过理解和研究这个源码,开发者可以更好地了解如何在实际项目中实现BACnet设备之间的通信,提高楼宇自动化的互操作性和效率。然而,由于BACnet协议的复杂性,初学者可能需要花费一定时间来熟悉其细节。希望这个源码...

    yabe-online-mall.github.io

    "矢部网上商城"是一个基于GitHub Pages部署的在线商城项目,其源代码托管在"yabe-online-mall.github.io"的仓库中。这个项目主要利用HTML(HyperText Markup Language)来构建网页结构,展示了如何使用基本的Web技术...

    BACnet常用的开发工具,包括点位扫描工具,主站模拟工具以及抓包分析工具

    一些常用的BACnet点位扫描工具包括Yabe,BACnetscan 等。 BACnet主站模拟工具:主站模拟工具用于模拟BACnet主站的功能,以便测试和验证设备的响应和行为。它们允许开发人员发送和接收BACnet命令和数据,并模拟不同的...

    BacNet协议应用软件

    "yetanotherbacnetexplorer-code-282-trunk"可能表示的是YABE项目的某个版本或分支。"code-282"可能是一个版本号,而"trunk"通常指的是主分支,意味着这是项目的主线开发代码。解压这个文件后,开发者将能看到源代码...

    YABE - Yet Another Bookmarks Extension-crx插件

    语言:English 更好的书签popup 功能: 1.左键单击在新选项卡中打开书签。 2.中间单击或“Ctrl”单击单击“在”新建后台“选项卡中打开书签。 3.... 4.... 5.... v1.2.1 - 节点删除后还原滚动位置。 v1.2.0....

Global site tag (gtag.js) - Google Analytics