创建基于Rails 3的纯净Ajax CRUD程序

创建基于Rails 3的纯净Ajax CRUD程序
十一 11th, 2011
发表评论 | Trackback

Rails 3利用scaffold可以很容易地创建CRUD程序，但那是多页面的，现在很多场景需要使用Ajax在一个页面上实现CRUD。这对Rails 来说也是很简单的，下面就来创建一个符合Rails风格的Ajax CRUD程序。整个过程大概15分钟，建议先把整个代码照应敲一遍，然后再慢慢理解。
目标：

只有1个页面，CRUD全部基于Ajax在一个页面完成。使用无入侵式的Javascript风格。
平台：

适用于Rails 3.*，使用jQuery+sqlite。
Rails 3.1开始默认自带jQuery，如果是Rails 3.0.*需要手动添加jQuery。
如果想用Prototype要把那些js做相应修改。

Let’s GO：
1、创建项目1 rails new AjaxCRUD
2 # 创建scaffold
3 rails g scaffold Entry name:string address:text phone:string email:string
4 # 建立数据库和表
5 rake db:create
6 rake db:migrate

2、修改controller

因为创建的是基于Ajax的CRUD，所以controller返回的数据要支持‘.js’格式，可以把默认的json格式删掉，其实除了index会返回网页，其它都是返回js，所以index外的html格式返回也可以删除。1 respond_to do |format|
2 format.html
3 format.js
4 end


基于个思想，修改后的controller如下：1 class EntriesController < ApplicationController
2 def index
3 @entries = Entry.all
4 @entry = Entry.new
5
6 respond_to do |format|
7 format.html # index.html.erb
8 format.js
9 end
10 end
11
12 def show
13 @entry = Entry.find(params[:id])
14
15 respond_to do |format|
16 format.html # show.html.erb
17 format.js
18 end
19 end
20
21 def new
22 @entry = Entry.new
23
24 respond_to do |format|
25 format.html # new.html.erb
26 format.js
27 end
28 end
29
30 def edit
31 @entry = Entry.find(params[:id])
32
33 respond_to do |format|
34 format.html
35 format.js
36 end
37 end
38
39 def create
40 @entry = Entry.new(params[:entry])
41
42 respond_to do |format|
43 if @entry.save
44 format.html { redirect_to @entry, notice: 'Entry was successfully created.' }
45 format.js
46 else
47 format.html { render action: "new" }
48 format.js { render action: "new" }
49 end
50 end
51 end
52
53 def update
54 @entry = Entry.find(params[:id])
55
56 respond_to do |format|
57 if @entry.update_attributes(params[:entry])
58 format.html { redirect_to @entry, notice: 'Entry was successfully updated.' }
59 format.js
60 else
61 format.html { render action: "edit" }
62 format.js { render action: "edit" }
63 end
64 end
65 end
66
67 def destroy
68 @entry = Entry.find(params[:id])
69 @entry.destroy
70
71 respond_to do |format|
72 format.html { redirect_to entries_url }
73 format.js
74 end
75 end
76 end

3、修改Views

修改index页面(app/views/entries/index.html.erb)来显示Entry表单。1 <h1>Listing entries</h1>
2 <table id="entries">
3 <tbody>
4 <tr>
5 <th>Name</th>
6 <th>Phone</th>
7 <th>Email</th>
8 <th>Address</th>
9 <th></th>
10 <th></th>
11 <th></th>
12 </tr>
13 </tbody>
14 </table>
15 <h2>Entry form</h2>
16 <div id="form">"form" %></div>


注意：为了后面用jQuery操作DOM，table设置id=”entries”。

修改partial（app/views/entries/_form.html.erb）,注意在form_for中添加remote以发送异步请求。1 <%= form_for(@entry, :remote => true) do |f| %>
2 <% if @entry.errors.any? %>
3 <div id="error_explanation">
4 <h2><%= pluralize(@entry.errors.count, "error") %> prohibited this entry from being saved:</h2>
5
6 <ul>
7 <% @entry.errors.full_messages.each do |msg| %>
8 <li><%= msg %></li>
9 <% end %>
10 </ul>
11 </div>
12 <% end %>
13
14 <div class="field">
15 <%= f.label :name %><br />
16 <%= f.text_field :name %>
17 </div>
18 <div class="field">
19 <%= f.label :phone %><br />
20 <%= f.text_field :phone %>
21 </div>
22 <div class="field">
23 <%= f.label :email %><br />
24 <%= f.text_field :email %>
25 </div>
26 <div class="field">
27 <%= f.label :address %><br />
28 <%= f.text_area :address, :rows => 3 %>
29 </div>
30 <div class="actions">
31 <%= f.submit %>
32 </div>
33 <% end %>


新建Entry partial(app/views/entries/_entry.html.erb)。
为了发送AJAX请求，edit，destroy都设置remote=true。
为了区分不同的entry，调用dom_id来根据entry生成不同的id1 <tr id="<%= dom_id entry %>">
2 <td><%= entry.name %></td>
3 <td><%= entry.phone %></td>
4 <td><%= entry.email %></td>
5 <td><%= simple_format entry.address %></td>
6 <td><%= link_to 'Show', entry %></td>
7 <td><%= link_to 'Edit', edit_entry_path(entry), :remote => true %></td>
8 <td><%= link_to 'Destroy', entry, confirm: 'Are you sure?', method: :delete, :remote => true %></td>
9 </tr>

4、添加js.erb来响应Ajax请求

下面是关键，首先先说下操作流程：浏览器发起Ajax请求(CRUD)–>controller收到请求，并调用model更新数据–>返回js代码–>浏览器收到js代码，使用jQuery来更新index页面中的DOM对象，包括列表和表单。

新建 app/views/entries/create.js.erb 响应添加Entry的请求
1、在index页面的entry列表中添加刚才新增的entry对象。
2、清空index页面中添加entry表单中的数据。1 $('<%= escape_javascript(render(:partial => @entry)) %>').appendTo('#entries').hide().fadeIn();
2 $("#new_entry")[0].reset();


escape_javascript(render(:partial => @entry))可以缩写成：j render @entry。

新建 app/views/entries/edit.js.erb 处理点击编辑时的请求
在index页面的新建entry的form中填充要编辑entry的数据。1 $("#form > form").replaceWith("<%= j render "form" %>");


新建 app/views/entries/update.js.erb 来更新列表中的Entry对象。新建Entry并清空form1 $("#<%= dom_id @entry %>").replaceWith("<%= j render @entry %>");
2 <% @entry = Entry.new # reset for new form %>
3 $(".edit_entry").replaceWith("<%= j render "form" %>")
4 $(".new_entry")[0].reset();


新建 app/views/entries/destroy.js.erb 来删除list中的Entry1 $("#<%= dom_id @entry %>").remove();

5、设置主页

设置entries页面为主页。修改 config/routes.rb1 AjaxCRUD::Application.routes.draw do
2 resources :entries
3 root :to => "entries#index"
4 end


删除静态首页文件。1 rm public/index.html

6、启动程序1 rails s


此时打开 http://127.0.0.1:3000
就可以使用了。

源代码托管在
https://github.com/oldsong/AjaxCRUD
标签: ajax, jQuery, Rails, ror