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

AWang 發(fā)布于2019-08-14 11:46 / 901人閱讀

摘要：瀏覽和提交評(píng)論博客主頁(yè)現(xiàn)在已經(jīng)完成，接下來(lái)要完成博客正文頁(yè)面。整個(gè)頁(yè)面將展示當(dāng)前文章的所有評(píng)論，還包括一個(gè)用于提交新的評(píng)論的表單。刷新瀏覽器，檢查這次是否使用了正確的。給模板添加表單在后面試下提交新的評(píng)論。

瀏覽和提交評(píng)論

博客主頁(yè)現(xiàn)在已經(jīng)完成，接下來(lái)要完成博客正文頁(yè)面。整個(gè)頁(yè)面將展示當(dāng)前文章的所有評(píng)論，還包括一個(gè)用于提交新的評(píng)論的表單。

創(chuàng)建"show" action

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

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

如你所見(jiàn)，整個(gè)action簡(jiǎn)明扼要。我們接受一個(gè)id參數(shù)作為L(zhǎng)ong類型Java對(duì)象。而這個(gè)參數(shù)可以來(lái)自于URL路徑或HTTP請(qǐng)求正文。

  如果接收到的id參數(shù)不是有效的數(shù)字，id的值會(huì)是null，而Play會(huì)在errors容器中新增一個(gè)驗(yàn)證錯(cuò)誤。

這個(gè)action會(huì)顯示/yabe/app/views/Application/show.html模板：

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

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

因?yàn)橹皩?xiě)好了display標(biāo)簽，寫(xiě)這個(gè)頁(yè)面就變得簡(jiǎn)單。

給正文頁(yè)面添加鏈接

在display標(biāo)簽中，我們讓所有的鏈接保持為空（使用#）。是時(shí)候讓這些鏈接指向Application.show action。在Play模板中，你可以簡(jiǎn)單地用@{...}記號(hào)來(lái)創(chuàng)建鏈接。這個(gè)語(yǔ)法使用路由來(lái)“轉(zhuǎn)換”URL成對(duì)應(yīng)的action。

修改/yabe/app/views/tags/display.html標(biāo)簽：

…

    ${_post.title}

…

現(xiàn)在刷新主頁(yè)，點(diǎn)擊一個(gè)標(biāo)題來(lái)展示正文。

呃……好像缺了個(gè)返回主頁(yè)面的鏈接。修改/yabe/app/views/main.html模板來(lái)完成標(biāo)題鏈接：

…

    About this blog
    ${blogTitle}
    ${blogBaseline}

…

現(xiàn)在終于可以在主頁(yè)和正文之間切換了。

指定一個(gè)更語(yǔ)義化的URL

如你所見(jiàn)，正文頁(yè)面的URL是：

/application/show?id=1

這是因?yàn)镻lay的默認(rèn)路由規(guī)則就是這樣：

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

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

GET     /posts/{id}                             Application.show

  這里id參數(shù)將從URL路徑提取。你可以從Route File Syntax中閱讀更多關(guān)于URI模式的內(nèi)容。

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

添加分頁(yè)

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

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

這個(gè)方法在每次請(qǐng)求時(shí)都會(huì)被多次調(diào)用，所以可以優(yōu)化它們，不過(guò)現(xiàn)在先擱置。同時(shí)，在show.html模板頂部（在#{display/}標(biāo)簽前）添加分頁(yè)鏈接：


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

現(xiàn)在是不是更棒了？

添加評(píng)論表單

是時(shí)候開(kāi)始完成評(píng)論表單。先從在Application控制器中增加postComment action方法開(kāi)始。

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

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

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

Post a comment

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

試下提交新的評(píng)論。它應(yīng)該能工作。

添加驗(yàn)證

目前我們沒(méi)有在創(chuàng)建評(píng)論之前驗(yàn)證表單內(nèi)容。我們需要驗(yàn)證表單中包括Comment類構(gòu)造函數(shù)中的每個(gè)參數(shù)。有了Play的驗(yàn)證機(jī)制，添加驗(yàn)證只是小菜一碟。修改postComment action來(lái)加入@Required驗(yàn)證注解，并檢查有沒(méi)有錯(cuò)誤產(chǎn)生：

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.*

如你所見(jiàn)，如果發(fā)生驗(yàn)證錯(cuò)誤，我們重新輸出正文頁(yè)面。我們需要修改表單代碼來(lái)顯示錯(cuò)誤信息：

Post a comment

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

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

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

注意到我們重用已經(jīng)提交的參數(shù)來(lái)填充HTML input元素的值。

為了讓博客的用戶體驗(yàn)更優(yōu)，我們將添加一點(diǎn)Javascript來(lái)自動(dòng)聚焦到發(fā)生錯(cuò)誤的地方。首先，需要JQuery和JQuery Tools Expose，你得把它們引入進(jìn)來(lái)。下載這兩個(gè)庫(kù)到yabe/public/javascripts/文件夾，并修改main.html模板來(lái)引入它們：

…

  注意當(dāng)前版本的Play內(nèi)置的JQuery要比教程用到的新。

現(xiàn)在你可以在show.html模板底部添加這段代碼：

現(xiàn)在評(píng)論框看起來(lái)真的美極了。我們還有加多兩樣?xùn)|西。

首先，我們將在評(píng)論成功提交之后顯示一個(gè)成功信息。為此，我們需要使用flash作用域來(lái)允許我們從一個(gè)action調(diào)用傳遞信息到下一個(gè)action。

修改postComment來(lái)添加成功信息：

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。因?yàn)槲覀儧](méi)有給它指定路由，現(xiàn)在它用的是默認(rèn)的路由。所以在應(yīng)用的路由文件中添加下面一行：

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

終于完成了。記得把改動(dòng)提交到bazaar。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/64101.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AWang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

爬蟲(chóng) + 自動(dòng)化利器 selenium 之自學(xué)成才篇（二）

閱讀 2755·2021-10-09 09:44
[CSS]《CSS揭秘》第四章——視覺(jué)效果

閱讀 3561·2019-08-30 15:54
webpack手動(dòng)構(gòu)建vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動(dòng)轉(zhuǎn)換px

閱讀 2171·2019-08-30 14:16
微信小程序flex布局

閱讀 2803·2019-08-30 13:09
記錄最近的一些遇到的前端面試題

閱讀 835·2019-08-30 13:08
前端每日實(shí)戰(zhàn)：117# 視頻演示如何用純 CSS 創(chuàng)作一只憤怒小鳥(niǎo)中的紅火

閱讀 1295·2019-08-29 16:29
監(jiān)聽(tīng)瀏覽器刷新及關(guān)閉

閱讀 1681·2019-08-26 13:57
ES6入門(mén)之對(duì)象的擴(kuò)展

閱讀 1938·2019-08-26 13:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

${_post.title}

${blogTitle}

${blogBaseline}

Post a comment

Post a comment

相關(guān)文章

**[翻譯]Play框架1.2.7版本教程(5) - 設(shè)置驗(yàn)證碼**

**[翻譯]Play框架1.2.7版本教程(3) - 建立第一個(gè)頁(yè)面**

**[翻譯]Play框架1.2.7版本教程(2) - 數(shù)據(jù)模型的首次迭代**

**[翻譯]Play框架1.2.7版本教程(7) - 通過(guò)CRUD來(lái)實(shí)現(xiàn)一個(gè)基本的管理面板**

**[翻譯]Play框架1.2.7版本教程(12) - 國(guó)際化和本地化**

發(fā)表評(píng)論

0條評(píng)論

AWang

男|高級(jí)講師

TA的文章

爬蟲(chóng) + 自動(dòng)化利器 selenium 之自學(xué)成才篇（二）

[CSS]《CSS揭秘》第四章——視覺(jué)效果

webpack手動(dòng)構(gòu)建vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動(dòng)轉(zhuǎn)換px

微信小程序flex布局

記錄最近的一些遇到的前端面試題

前端每日實(shí)戰(zhàn)：117# 視頻演示如何用純 CSS 創(chuàng)作一只憤怒小鳥(niǎo)中的紅火

監(jiān)聽(tīng)瀏覽器刷新及關(guān)閉

ES6入門(mén)之對(duì)象的擴(kuò)展

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

${blogBaseline}

Post a comment

Post a comment

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！