(三)play之快速演示篇

by · 2019-04-19

运行play

E:\technology-hqh\proj\play-framework>play

创建新项目

E:\technology-hqh\proj\play-framework>play new tasks

~ What is the application name? [tasks]
Tasks 

启动play

E:\technology-hqh\proj\play-framework>play run tasks

转换为eclipse工程项目

E:\technology-hqh\proj\play-framework>play eclipsify tasks

 

引入到Eclipse中，开始开发

=============================================================================

示例一、

修改tasks\app\views\Application\index.html

删除#{welcome /}，改为”Hello World”

Html代码  收藏代码
  1. #{extends ‘main.html’ /}  
  2. #{set title:’Home’ /}  
  3.   
  4. Hello World  

 刷新页面

 


============================================================================= 

示例二、

修改tasks\app\controllers\Application.java

Java代码  收藏代码
  1. package controllers;  
  2.   
  3. import play.*;  
  4. import play.mvc.*;  
  5.   
  6. import java.util.*;  
  7.   
  8. import models.*;  
  9.   
  10. public class Application extends Controller {  
  11.   
  12.     public static void index() {  
  13.         String name = “play! frame work”;  
  14.         render(name);  
  15.     }  
  16.   
  17. }  

 

 修改tasks\app\views\Application\index.html

Html代码  收藏代码
  1. #{extends ‘main.html’ /}  
  2. #{set title:’Home’ /}  
  3.   
  4. Hello ${name}  

 刷新页面


 

 =============================================================================

示例三、

创建model

Java代码  收藏代码
  1. package models;  
  2.   
  3. import javax.persistence.Entity;  
  4.   
  5. import play.db.jpa.Model;  
  6.   
  7. @Entity  
  8. public class Task extends Model {  
  9.     public String title;  
  10.     public boolean done;  
  11.       
  12.     public Task(String title) {  
  13.         this.title = title;  
  14.     }  
  15.       
  16.       
  17. }  

 修改tasks\app\views\Application\index.html

Html代码  收藏代码
  1. #{extends ‘main.html’ /}  
  2. #{set title:’Home’ /}  
  3.   
  4. #{ifnot tasks}  
  5.     <p>  
  6.         No tasks.  
  7.     </p>  
  8. #{/ifnot}  
  9.   
  10. <ul>  
  11.     #{list items:tasks,as:’task’}  
  12.         <li>  
  13.             <input type=“checkbox” id=“${task.id}” ${task.done ? ‘checked’ : ”}>  
  14.             ${task.title}         
  15.         </li>  
  16.     #{/list}  
  17. </ul>  

 设置database

Html代码  收藏代码
  1. # Database configuration  
  2. # ~~~~~   
  3. # Enable a database engine if needed.  
  4. #  
  5. # To quickly set up a development database, use either:  
  6. #   – mem : for a transient in memory database (H2 in memory)  
  7. #   – fs  : for a simple file written database (H2 file stored)  
  8. db=mem  

 

刷新页面


 使用jQuery创建task

Html代码  收藏代码
  1. #{extends ‘main.html’ /}  
  2. #{set title:’Home’ /}  
  3.   
  4. #{ifnot tasks}  
  5.     <p>  
  6.         No tasks.  
  7.     </p>  
  8. #{/ifnot}  
  9.   
  10. <ul>  
  11.     #{list items:tasks,as:’task’}  
  12.         <li>  
  13.             <input type=“checkbox” id=“${task.id}” ${task.done ? ‘checked’ : ”}>  
  14.             ${task.title}         
  15.         </li>  
  16.     #{/list}  
  17. </ul>  
  18.   
  19.   
  20. <p>  
  21.     <a id=“createTask” href=“#”>Create a new task</a>  
  22. </p>  
  23.   
  24. <script type=“text/javascript” charset=“utf-8”>  
  25.  //Create a task  
  26.  $(“#createTask”).click(function(){  
  27.     $.post(“@{createTask()}”, {title: prompt(“Task title ?”)});  
  28.  });  
  29. </script>  

 刷新页面


 创建action

 

Java代码  收藏代码
  1. package controllers;  
  2.   
  3. import play.*;  
  4. import play.mvc.*;  
  5.   
  6. import java.util.*;  
  7.   
  8. import models.*;  
  9.   
  10. public class Application extends Controller {  
  11.   
  12.     public static void index() {  
  13.         List tasks = Task.find(“order by id desc”).fetch();  
  14.         render(tasks);  
  15.     }  
  16.       
  17.     //创建新的任务  
  18.     public static void createTask(String title) {  
  19.         Task task = new Task(title).save();  
  20.         renderJSON(task);  
  21.     }  
  22.   
  23. }  

 刷新页面，点击链接创建任务


 刷新页面


 进一步优化，使用jQuery的callback回调功能，在添加task后自动显示添加的内容

Html代码  收藏代码
  1. <script type=“text/javascript” charset=“utf-8”>  
  2.     //Create a task  
  3.     $(“#createTask”).click(function(){  
  4.         $.post(“@{createTask()}”, {title: prompt(“Task title ?”)}, function(task){  
  5.             $(“ul”).prepend(  
  6.                 ‘<li><input type=“checkbox” id=“‘+task.id+'”/>‘+task.title+’</li>‘  
  7.             );  
  8.         },”json”);  
  9.     });  
  10. </script>  

 

不用刷新页面即可显示新的内容

 

点击任务就实现与数据库的同步更新操作

继续使用jQuery开发

Html代码  收藏代码
  1. <script type=“text/javascript” charset=“utf-8”>  
  2.     //Create a task  
  3.     $(“#createTask”).click(function(){  
  4.         $.post(“@{createTask()}”, {title: prompt(“Task title ?”)}, function(task){  
  5.             $(“ul”).prepend(  
  6.                 ‘<li><input type=“checkbox” id=“‘+task.id+'”/>‘+task.title+’</li>‘  
  7.             );  
  8.         },”json”);  
  9.     });  
  10.       
  11.     //Change status  
  12.     $(“:checkbox”).live(“click”,function(){  
  13.         $.post(“@{changeStatus()}”, {id: $(this).attr(“id”), done: $(this).val()})  
  14.     })  
  15. </script>  

 Controller中增加新的action：changeStatus()

Java代码  收藏代码
  1. package controllers;  
  2.   
  3. import play.*;  
  4. import play.mvc.*;  
  5.   
  6. import java.util.*;  
  7.   
  8. import models.*;  
  9.   
  10. public class Application extends Controller {  
  11.   
  12.     public static void index() {  
  13.         List tasks = Task.find(“order by id desc”).fetch();  
  14.         render(tasks);  
  15.     }  
  16.       
  17.     //创建新的任务  
  18.     public static void createTask(String title) {  
  19.         Task task = new Task(title).save();  
  20.         renderJSON(task);  
  21.     }  
  22.       
  23.    //页面点击checkbox框的动作，触发一个ajax请求  
  24.    public static void changeStatus(Long id, boolean done) {  
  25.        Task task = Task.findById(id);  
  26.        task.done = done;  
  27.        //后台更新数据库   
  28.        task.save();  
  29.        //以json数据格式返回新对象  
  30.        renderJSON(task);  
  31.    }  
  32. }  

 

=================================================================================

示例四、

允许CRUD模块

修改tasks\conf\dependencies.yml

为了能使用CRUD模块，需要在/conf/dependencies.yml文件的require后添加一行代码

Html代码  收藏代码
  1. # Application dependencies  
  2.   
  3. require:  
  4.     – play –> crud  

       接下来，在cmd命令行中切换到项目根目录下

E:\technology-hqh\proj\play-framework\tasks>play dependencies

重新构建eclipse项目，以便eclipse能够将新的模块导入到workspace中

E:\technology-hqh\proj\play-framework\tasks>play eclipsify

刷新eclipse工程中的项目

最后，修改tasks\conf\routes，增加路由

Html代码  收藏代码
  1. GET     /admin          Tasks.list  

 

编写CRUD的子类,目的在于继承CRUD中的众多方法，比如list()

Java代码  收藏代码
  1. package controllers;  
  2.   
  3. public class Tasks extends CRUD {  
  4.   
  5. }  

 访问http://localhost:9000/admin，将自动导航至Task对象的编辑页面


 

在Task中添加toString()，则可以定制页面显示Task对象的方式

Java代码  收藏代码
  1. package models;  
  2.   
  3. import javax.persistence.Entity;  
  4.   
  5. import play.db.jpa.Model;  
  6.   
  7. @Entity  
  8. public class Task extends Model {  
  9.     public String title;  
  10.     public boolean done;  
  11.       
  12.     public Task(String title) {  
  13.         this.title = title;  
  14.     }  
  15.   
  16.     @Override  
  17.     public String toString() {  
  18.         return title;  
  19.     }  
  20.           
  21. }  

 刷新页面

将按title显示Task对象


 

点击一个task进入编辑页面，可以对其进行更新操作


 

更新task对象


 

点击save，自动保存并返回首页


 

使用validation对更新时的数据进行校验

修改Task对象，使用@Required对属性进行标注

Java代码  收藏代码
  1. package models;  
  2.   
  3. import javax.persistence.Entity;  
  4. import play.data.validation.Required;  
  5. import play.db.jpa.Model;  
  6.   
  7. @Entity  
  8. public class Task extends Model {  
  9.       
  10.     //title不能为空  
  11.     @Required  
  12.     public String title;  
  13.     public boolean done;  
  14.       
  15.     public Task(String title) {  
  16.         this.title = title;  
  17.     }  
  18.   
  19.     @Override  
  20.     public String toString() {  
  21.         return title;  
  22.     }  
  23.           
  24. }  

 再次编辑Task 1 对象，删除title，点击save会以红色字体显示Required！

填入title，则正常保存！

 

 

转载自：https://blog.csdn.net/maguanghui_2012/article/details/54708981

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序