你的位置:首页 > Java教程

[Java教程]Play Framework 完整实现一个APP(六)


 

需要为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 >  <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 >      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 >${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

  

 

 

 

..