需要为Blog添加 查看和发表评论的功能
1.创建查看功能
application.java中添加 show() 方法
public static void show(Long id) {
Post post = Post.findById(id);
render(post);
}
创建app/views/Application/show.html
#{extends 'main.html' /}
#{set title:post.title /}
#{display post:post, as:'full' /}
在页面模板中添加链接
访问Blog
<h2 class="post-title">
<a href="@{Application.show(_post.id)}">${_post.title}</a>
</h2>
返回主页
<h1><a href="@{Application.index()}">${blogTitle}</a></h1>
2.创建路由规则
当前页面URL http://localhost:9000/application/show?id=3
是由 * /{controller}/{action} {controller}.{action} 这条规则解析得到的
在之前新创建Route
GET /posts/{id} Application.show
访问路径变为 http://localhost:9000/posts/3
更多路由语法参考： http://play-framework.herokuapp.com/zh/routes#syntax
3.添加页导航
Post类添加方法，PRevious()\next()
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页面添加导航按钮
<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>
4.添加评论框
Application Controller添加方法postComment()
public static void postComment(Long postId, String author, String content) {
Post post = Post.findById(postId);
post.addComment(author, content);
show(postId);
}
修改show.html
<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 message: </label>
<textarea name="content" id="content"></textarea>
</p>
<p>
<input type="submit" value="Submit your comment" />
</p>
#{/form}
5.添加验证，验证Author和Content非空
import play.data.validation.*;
public static void postComment(Long postId, @Required String author, @Required String content) {
Post post = Post.findById(postId);
if (validation.hasErrors()) {
render("Application/show.html", post);
}
post.addComment(author, content);
show(postId);
}
编辑form，显示错误
#{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" value="${params.author}" />
</p>
<p>
<label for="content">Your message: </label>
<textarea name="content" id="content">${params.content}</textarea>
</p>
<p>
<input type="submit" value="Submit your comment" />
</p>
#{/form}
6.优化客户提示
加载jquery的类库
<script src="@{'/public/Javascripts/jquery-1.4.2.min.js'}"></script>
<script src="@{'/public/javascripts/jquery.tools-1.2.5.toolbox.expose.min.js'}"></script>
修改Show.html
#{ifFlash.success}
<p class="success">${flash.success}</p>
#{/if}
#{display post:post, as:'full' /}
<script type="text/javascript" charset="utf-8">
$(function() {
// Expose the form
$('form').click(function() {
$('form').expose({api: true}).load();
});
// If there is an error, focus to form
if($('form .error').size()) {
$('form').expose({api: true, loadSpeed: 0}).load();
$('form input[type=text]').get(0).focus();
}
});
</script>
添加Comment成功的提示
post.addComment(author, content);
flash.success("Thanks for posting %s", author);
添加路由
POST /posts/{postId}/comments Application.postComment
..