(九)play之yabe項目【發表博文】

(九)play之yabe項目【發表博文】

博客分類：

 
• 框架@play framework

 

發表一篇博文

 

填充管理頁面

從主頁連接到管理頁面時，只簡單顯示了登錄用戶的名稱

如今對顯示的內容加以豐富

修改Admin中的index()

package controllers;

import java.util.List;

import models.Post;
import models.User;
import play.mvc.Before;
import play.mvc.Controller;

public class Admin extends Controller {

    /**
     * 首先，用戶登錄會被Security攔截，登錄成功會把username放入session中
     * session.put("username",username);
     * 經過session.contains("username");判斷用戶是否已經登錄
     *
     * @Before 訪問Admin控制器時，將先執行由該註解標註的方法，進行攔截（過濾/檢查）
     */
    @Before
    static void setConnectedUser() {
        //Security.isConnected() 檢查session中是否有username爲key的map存在
        //由於用戶登錄後會用username做爲key存儲登錄信息
        if(Security.isConnected()) {
            //Security.connected() 取得session中以username爲key的value，即用戶名
            User user = User.find("byUsername", Security.connected()).first();
            renderArgs.put("user", user.fullname);
        }
    }

    /**
     * 返回管理CRUD功能模塊的主頁面
     * 查詢屬於當前登錄用戶的博文
     * 傳遞到admin/index.html頁面進行顯示
     */
    public static void index(){
        String username = Security.connected();
        //Post對象的author屬性爲User類型
        List<Post> posts = Post.find("author.username", username).<Post>fetch();
        render(posts);
    }



}

 

一樣，編輯yabe\app\views\Admin\index.html，對新增內容進行顯示

#{extends 'admin.html' /}

<!-- 顯示用戶及其發佈的博文數量 -->
<h3>
    Welcome ${user},
    <span>
        you have written
            ${posts.size() ?: 'no'}
                ${posts.pluralize('post','posts')}
                    so far!
    </span>
    <!-- posts.pluralizer(x,y) : posts的size爲單數，則返回x，不然返回y-->
</h3>


<!-- 循環posts，分別顯示每一個博文 -->
#{list items:posts, as:'post'}
    <p class="post ${post_parity}">
        <a href="#">${post.title}</a>
    </p>
#{/list}


<!-- 建立新的博文 -->
<p id="newPost">
    <a href="#"><span>+</span>write a new post</a>
</p>

 

進入管理頁面http://localhost:9000/admin/index

顯示了當前博主發佈博文狀況，以及發佈新博文的按鈕

 

 

發表一篇博文

三步：

 建立Controller，或在Controller中加入action

 給action配置路由

編寫action對應的模板

在Admin中編寫action，一個用於返回一個form表單；一個用於接收form提交的參數

 

/**
 * 返回form的頁面
 */
public static void form() {
    render();
}

/**
 * 接收form提交的數據並處理
 */
public static void save(String title, String content) {
    //current login user
    User author = User.find("byUsername", Security.connected()).first();

    //new post
    Post post = new Post(title, content, author);

    //Validate
    validation.valid(post);
    if(validation.hasErrors()) {
        //一種簡寫，等效於 render("Admin/form.html",post);
        render("@form",post);
    }

    //Save object
    post.save();
    index();
}

 

 

配置路由

 

#form

#open a form page use get method
GET     /admin/new      Admin.form

#submit form use post method
POST            /admin/new      Admin.save

   

 

 

編寫模板-form表單

 

#{extends 'admin.html' /}

<h3>Write,<span>a new post</span></h3>

#{form @save()}
    #{ifErrors}
        <p class="error">
            Please correct these errors.
        </p>
    #{/ifErrors}

    <p>
        #{field 'title'}
            <label>Post title:</label>
            <input type="text" name="${field.name}" value="${post?.title}" />
            <span class="error">#{error 'post.title' /}</span>
        #{/field}
    </p>


    <p>
        #{field 'content'}
            <label>Write here:</label>
            <textarea name="${field.name}">${post?.content}</textarea>
            <span class="error">#{error 'post.content' /}</span>
        #{/field}
    </p>


    <p>
        <input type="submit" value="Publish this post to the blog" />
    </p>
#{/form}

 

刷新頁面，點擊建立一個新的博文

 

 

 

 

 

 

修改admin/index.html，爲每一個博文設置連接

注意：這裏須要傳入博文的id，以便後臺查詢出該博文的全部信息，再返回Post對象給頁面進行顯示

<!-- 循環posts，分別顯示每一個博文 -->
#{list items:posts, as:'post'}
    <p class="post ${post_parity}">
        <a href="@{Admin.form(post.id)}">${post.title}</a>
    </p>
#{/list}

  

修改Admin控制器中的form()，接收id參數

若是id != null ,表示數據庫中已經存在此博文，能夠查詢出來

用於頁面的回顯

/**
 * 返回form的頁面
 * 初次建立博文，id爲空，不返回對象
 * id不爲空，則查詢出對象，傳遞到頁面用做數據回顯
 */
public static void form(Long id) {
    if(id!=null) {
        Post post = Post.findById(id);
        render(post);
    }
    render();
}

 

修改路由，定製更好看的URL

http://localhost:9000/admin/new?id=6

增長路由

#open a form page use get method
GET     /admin/myPosts/{id} Admin.form
GET     /admin/new      Admin.form

第1條路由：若是一個id參數被提交，將使用第1條路由模式顯示URL=== myPosts/6

第2條路由：若是沒有id參數被提交，則使用舊的模式顯示URL=== new?id=6

 

以後，URL變爲了這種格式：http://localhost:9000/admin/myPosts/6

 

 

 

 

 區分建立與編輯

如今還存在一個問題，新建博文沒有問題了

可是，編輯已經存在的博文，保存以後系統會自動將其做爲一個新的博文進行發佈，而不是更新

所以，須要在form()中加入判斷邏輯：

若是已經存在id了，則更新；不然做爲新的博文進行保存！

 

修改Admin控制器的save()，處理建立與編輯兩種狀況

/**
     * 接收form提交的數據並處理
     * 增長id參數，由頁面傳遞過來
     * 經過id參數是否爲空，判斷是新建保存仍是編輯保存
     */
    public static void save(Long id, String title, String content) {
        Post post = null;
        if(id==null) {
            //建立
            User author = User.find("username", controllers.Secure.Security.connected()).first();
            post = new Post(title, content, author);
        } else {
            //更新---取出已有對象，更新其內部屬性並同步到數據庫
            post = Post.findById(id);
            post.title = title;
            post.content = content;
        }

        //Validate
        validation.valid(post);
        if(validation.hasErrors()) {
            //一種簡寫，等效於 render("Admin/form.html",post);
            render("@form",post);
        }

        //Save object
        post.save();
        index();
    }

 

 

修改form.html模板，加入建立與編輯的不一樣顯示，同時增長id參數的傳遞

以便後臺判斷是新建仍是編輯已有博文

#{extends 'admin.html' /}
<!--
    判斷post對象id是否爲空
    id==null,則新建博文
    id!=null,則編輯博文
 -->
#{ifnot post?:id}
    <h3>Write,<span>a new post</span></h3>
#{/if}
#{else}
    <h3>Edit,<span>this post</span></h3>
#{/else}

<!-- 把id傳到 Admin控制器的save action中 -->
#{form @save(post?.id)}
    #{ifErrors}
        <p class="error">
            Please correct these errors.
        </p>
    #{/ifErrors}

    <p>
        #{field 'title'}
            <label>Post title:</label>
            <input type="text" name="${field.name}" value="${post?.title}" />
            <span class="error">#{error 'post.title' /}</span>
        #{/field}
    </p>


    <p>
        #{field 'content'}
            <label>Write here:</label>
            <textarea name="${field.name}">${post?.content}</textarea>
            <span class="error">#{error 'post.content' /}</span>
        #{/field}
    </p>


    <p>
        <input type="submit" value="Publish this post to the blog" />
    </p>
#{/form}

 

 

點擊建立一個新的博文

 

 

點擊一個已存在的博文

 

一樣，將編輯博文的URL路徑顯示風格進行改變

修改routes文件

帶id參數提交時的將使用第1條路由，不帶參數則按第2條路由顯示URL

#submit form use post method
POST    /admin/myPosts/{id} Admin.save
POST    /admin/new      Admin.save

  

 建立新的博文，保存時的URL使用第1條路由：

 http://localhost:9000/admin/myPosts/1 (POST提交)

 

 編輯已存在的博文，保存時的URL使用第2條路由：

http://localhost:9000/admin/new (POST提交)