需要為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
#{if Flash.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
..
新聞熱點
疑難解答
