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

完成显示并发表评论功能

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

 

创建显示评论的action

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

Java代码  

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

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

 

添加show()对应的模板

 

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

Html代码  

1. #{extends 'main.html' /}  
2. #{set title:'Home' /}  
3.   
4. <!--  调用前面已经编写好的display模板进行显示 -->  
5. #{display post:post, as:'full' /}  

 

为详细页面添加链接

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

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

Html代码  

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

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

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

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

 

 

添加返回主页面的链接 

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

Html代码  

1. <div id="title">  
2.     <span class="about">About this blog</span>  
3.     <!-- 设置返回主页的链接 -->  
4.     <h1><a href="@{Application.index()}">${blogTitle}</a></h1>  
5.     <h2>${blogBaseLine}</h2>  
6. </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中，有这样一句

Html代码  

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

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

 

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

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

Html代码  

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

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

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

 

添加分页功能

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

修改yabe\app\models\Post.java

Java代码  

1. /** 
2.  * 前一篇博文 
3.  */  
4. public Post previous() {  
5.     return Post.find("postedAt < ? order by postedAt desc", postedAt).first();  
6. }  
7.   
8. /** 
9.  * 后一篇博文 
10.  */  
11. public Post next() {  
12.     return Post.find("postedAt > ? order by postedAt asc", postedAt).first();  
13. }  

 

 接下来，在show.html中添加链接（在#{display /} 之前）

Html代码  

1. #{extends 'main.html' /}  
2. #{set title:'Home' /}  
3.   
4. <!-- 导航:上一篇，下一篇 -->  
5. <ul id="pagination">  
6.     <!-- 前一篇 -->  
7.     #{if post.previous()}  
8.         <li id="previous">  
9.             <a href="@{Application.show(post.previous().id)}"> ${post.previous().title} </a>  
10.         </li>  
11.     #{/if}  
12.       
13.     <!-- 下一篇 -->  
14.     #{if post.next()}  
15.         <li id="next">  
16.             <a href="@{Application.show(post.next().id)}"> ${post.next().title} </a>  
17.         </li>  
18.     #{/if}  
19. </ul>  
20.   
21.   
22. <!--  调用display模板显示 -->  
23. #{display post:post, as:'full' /}  

 

 添加评论的Form

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

Java代码  

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

 

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

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

Html代码  

1. <!-- 显示一个表单，用户可以添加评论 -->  
2. <h3>Post a comment</h3>  
3. #{form @Application.postComment(post.id)}  
4.     <p>  
5.         <label for="author">Your name:</label>  
6.         <input type="text" name="author" id="author"/>  
7.     </p>  
8.     <p>  
9.         <label for="content">Your comment:</label>  
10.         <textarea name="content" id="content"></textarea>  
11.     </p>  
12.     <p>  
13.         <input type="submit" value="submit your comment"/>          
14.     </p>  
15. #{/form}  

 

刷新页面

 

 

 加入表单验证功能

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

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

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

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

Java代码  

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

 

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

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

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

Html代码  

1. <!-- 显示一个表单，用户可以添加评论 -->  
2. <h3>Post a comment</h3>  
3. #{form @Application.postComment(post.id)}  
4.       
5.     <!-- 在这里显示提交评论时出现的错误 -->  
6.     #{ifErrors}  
7.         <p class="error">All fields are required!</p>  
8.     #{/ifErrors}  
9.       
10.     <p>  
11.         <label for="author">Your name:</label>  
12.         <input type="text" name="author" id="author"/>  
13.     </p>  
14.     <p>  
15.         <label for="content">Your comment:</label>  
16.         <textarea name="content" id="content"></textarea>  
17.     </p>  
18.     <p>  
19.         <input type="submit" value="submit your comment"/>          
20.     </p>  
21. #{/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文件

Html代码  

1. <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript"></script>  
2. <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表单，淡化背景

 

Js代码  

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

 

 

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

 

增加评论成功的提示信息

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

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

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

Java代码  

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

 

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

Html代码  

1. ...  
2.   
3. <!-- 评论提交成功后，显示提示信息 -->  
4. #{if flash.success}  
5.     <p class="success">${flash.success}</p>  
6. #{/if}  
7.   
8. <!--  调用display模板显示 -->  
9. #{display post:post, as:'full' /}  
10.   
11. ...  

 

重新提交一条评论

 

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

 

 

 

定制REST风格的URL

跳转窗体postComment action的URL。

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

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

Html代码  

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

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

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

变为了

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