[翻譯]Play框架1.2.7版本教程(4) - 瀏覽和提交評論

AWang 發布于2019-08-14 11:46 / 892人閱讀

摘要：瀏覽和提交評論博客主頁現在已經完成，接下來要完成博客正文頁面。整個頁面將展示當前文章的所有評論，還包括一個用于提交新的評論的表單。刷新瀏覽器，檢查這次是否使用了正確的。給模板添加表單在后面試下提交新的評論。

瀏覽和提交評論

博客主頁現在已經完成，接下來要完成博客正文頁面。整個頁面將展示當前文章的所有評論，還包括一個用于提交新的評論的表單。

創建"show" action

要顯示文章內容，我們需要在Application控制器添加新的action。就叫它show()：

public static void show(Long id) {
    Post post = Post.findById(id);
    render(post);
}

如你所見，整個action簡明扼要。我們接受一個id參數作為Long類型Java對象。而這個參數可以來自于URL路徑或HTTP請求正文。

如果接收到的id參數不是有效的數字，id的值會是null，而Play會在errors容器中新增一個驗證錯誤。

這個action會顯示/yabe/app/views/Application/show.html模板：

#{extends "main.html" /}
#{set title:post.title /}

#{display post:post, as:"full" /}

因為之前寫好了display標簽，寫這個頁面就變得簡單。

給正文頁面添加鏈接

在display標簽中，我們讓所有的鏈接保持為空（使用#）。是時候讓這些鏈接指向Application.show action。在Play模板中，你可以簡單地用@{...}記號來創建鏈接。這個語法使用路由來“轉換”URL成對應的action。

修改/yabe/app/views/tags/display.html標簽：

…

    ${_post.title}

…

現在刷新主頁，點擊一個標題來展示正文。

呃……好像缺了個返回主頁面的鏈接。修改/yabe/app/views/main.html模板來完成標題鏈接：

…

    About this blog
    ${blogTitle}
    ${blogBaseline}

…

現在終于可以在主頁和正文之間切換了。

指定一個更語義化的URL

如你所見，正文頁面的URL是：

/application/show?id=1

這是因為Play的默認路由規則就是這樣：

*       /{controller}/{action}                  {controller}.{action}

通過指定Application.show action的路徑，我們可以使用更語義化的URL。修改/yabe/conf/routes并在第一個路由下面添加新的路由：

GET     /posts/{id}                             Application.show

這里id參數將從URL路徑提取。你可以從Route File Syntax中閱讀更多關于URI模式的內容。

刷新瀏覽器，檢查這次是否使用了正確的URL。

添加分頁

要允許用戶在文章間方便地流連忘返，我們需要添加分頁機制。我們將拓展Post類來按需獲取上一篇和下一篇文章：

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/}標簽前）添加分頁鏈接：


    #{if post.previous()}
        
            
                ${post.previous().title}
            
        
    #{/if}
    #{if post.next()}
        
            
                ${post.next().title}
            
        
    #{/if}

現在是不是更棒了？

添加評論表單

是時候開始完成評論表單。先從在Application控制器中增加postComment action方法開始。

public static void postComment(Long postId, String author, String content) {
    Post post = Post.findById(postId);
    post.addComment(author, content);
    show(postId);
}

如你所見，我們只是重用了之前添加給Post類的addComment()。

給show.html模板添加HTML表單（在#{display /}后面）：

Post a comment

#{form @Application.postComment(post.id)}
    
        Your name: 
        
    
    
        Your message: 
        
    
    
        
    
#{/form}

試下提交新的評論。它應該能工作。

添加驗證

目前我們沒有在創建評論之前驗證表單內容。我們需要驗證表單中包括Comment類構造函數中的每個參數。有了Play的驗證機制，添加驗證只是小菜一碟。修改postComment action來加入@Required驗證注解，并檢查有沒有錯誤產生：

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);
}

也不要忘了引入play.data/validation.*

如你所見，如果發生驗證錯誤，我們重新輸出正文頁面。我們需要修改表單代碼來顯示錯誤信息：

Post a comment

#{form @Application.postComment(post.id)}

    #{ifErrors}
        
            All fields are required!
        
    #{/ifErrors}

    
        Your name: 
        
    
    
        Your message: 
        ${params.content}
    
    
        
    
#{/form}

注意到我們重用已經提交的參數來填充HTML input元素的值。

為了讓博客的用戶體驗更優，我們將添加一點Javascript來自動聚焦到發生錯誤的地方。首先，需要JQuery和JQuery Tools Expose，你得把它們引入進來。下載這兩個庫到yabe/public/javascripts/文件夾，并修改main.html模板來引入它們：

…

注意當前版本的Play內置的JQuery要比教程用到的新。

現在你可以在show.html模板底部添加這段代碼：

現在評論框看起來真的美極了。我們還有加多兩樣東西。

首先，我們將在評論成功提交之后顯示一個成功信息。為此，我們需要使用flash作用域來允許我們從一個action調用傳遞信息到下一個action。

修改postComment來添加成功信息：

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);
    flash.success("Thanks for posting %s", author);
    show(postId);
}

并在show.html頂部添加可能顯示成功信息的位置：

…
#{if flash.success}
    ${flash.success}
#{/if}

#{display post:post, as:"full" /}
…

最后我們將修改postComment action所用的URL。因為我們沒有給它指定路由，現在它用的是默認的路由。所以在應用的路由文件中添加下面一行：

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

終于完成了。記得把改動提交到bazaar。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/64101.html

[翻譯]Play框架1.2.7版本教程(5) - 設置驗證碼

摘要：設置驗證碼任何人都可以在我們的博客下發布評論，所以我們需要避免非人類用戶來擾亂秩序。一個簡單的防范方法是設置驗證碼。然后我們修改表單來顯示驗證碼，并把寫入隱藏的域里面。檢查驗證碼功能是否完成了。設置驗證碼任何人都可以在我們的博客下發布評論，所以我們需要避免非人類用戶來擾亂秩序。一個簡單的防范方法是設置驗證碼。生成驗證碼如何利用Play框架來生成驗證碼？簡單來說，我們需要增...

姘存按 2019-08-14 11:46 評論0 收藏0
[翻譯]Play框架1.2.7版本教程(3) - 建立第一個頁面

摘要：所以任務會在第一個請求時同步執行。修改來展示這些對象你可以閱讀模板是怎么工作的。標簽只有兩個參數用于展示的文章對象以及展示的模式可以是全文，全文附評論，預告中的一種現在我們可以將冗余代碼替換成標簽，重寫主頁重載頁面，檢查是否一切安好。建立第一個頁面既然我們完成了數據模型的初步定義，是時候開始創建應用的頁面了。這個頁面將僅僅展示最近的博文，以及一個舊文章的列表。下面是我們想要實...

inapt 2019-08-14 11:46 評論0 收藏0
[翻譯]Play框架1.2.7版本教程(2) - 數據模型的首次迭代

摘要：數據模型的首次迭代接下來我們要開始完成我們的博客引擎的模型部分。一個普遍的選擇是使用關系型數據庫。不要認為生成的成員變量是函數變量，其實它是技術變量。當你在中運行應用時，會自動切換到框架并加載對應的。再次運行測試并檢查是否一切安好。數據模型的首次迭代接下來我們要開始完成我們的博客引擎的模型部分。 JPA入門模型層是一個Play應用的核心（對于其他Web框架也同樣成立）。它是...

charles_paul 2019-08-14 11:46 評論0 收藏0
[翻譯]Play框架1.2.7版本教程(7) - 通過CRUD來實現一個基本的管理面板

摘要：通過來實現一個基本的管理面板目前，我們還沒法使用博客的來寫新的文章，或修改評論。提供了一個即開即用的模塊，可以快速生成一個基本的管理面板。這是因為默認是以的輸出來得到一個模型對象的表示。在本教程的最后一章，你會學到關于本地化信息的更多東西。通過CRUD來實現一個基本的管理面板目前，我們還沒法使用博客的UI來寫新的文章，或修改評論。Play提供了一個即開即用的CRUD模塊，可以快速...

騫諱護 2019-08-14 11:46 評論0 收藏0
[翻譯]Play框架1.2.7版本教程(12) - 國際化和本地化

摘要：國際化和本地化完成了博客引擎后，我們來考慮額外的一件事應用的國際化和語言的本地化。國際化和本地化我們將分兩步討論，先是國際化，再是本地化。實際上，兩者是同步進行的你在國際化的同時，往往也是在本地化。國際化和本地化完成了博客引擎后，我們來考慮額外的一件事：Web應用的國際化和語言的本地化。雖然我們可以一開始就做這件事，但是最好還是先完成該應用的單一語言版本，然后再添加其他語言的支持...

hoohack 2019-08-14 11:45 評論0 收藏0