Play Framework 完整實現一個APP（六），frameworkapp

Play Framework 完整實現一個APP（六），frameworkapp

 

需要為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

　　

 

 

 

..