面向前端开发人员的rails教程

目录结构及模版语法及其他文档

rails目录结构: https://ruby-china.org/topics/2432

rails 模板语法 :https://ihower.tw/rails4/actionview.html 可能需要VPN访问

Rails 布局和视图渲染 :http://guides.ruby-china.org/layouts_and_rendering.html

scss 语法: http://sass.bootcss.com/

jquery ujs: https://github.com/rails/jquery-ujs

git:https://git-scm.com/book/zh/v2

布局及模版继承

app/views/layouts/sample_layout.html.erb

一个通常的布局文件会包含以下block.

...<head>...

如此我们可以在具体的页面使用如下方式引入外部样式和脚本或者嵌入样式和脚本,使得样式和脚本在html里的合理位置。

1
2
3
4
5
6
7
8
9
10
11
...
<% content_for :extro_styles do %>
<%= stylesheet_link_tag "jquery.multiselect2side_2.css", :media => "all" %>
<style>...</style>
<% end %>
...
<% content_for :extro_scripts do %>
<script src="/assets/jquery.sparkline.js"></script>
<%= javascript_include_tag "jquery.multiselect2side_2.js" %>
<script>...</script>
...`

以上代码在页面的模版的位置无关紧要,最终在html里的位置已经在布局中声明。

静态文件的组织

样式

app/assets/stylesheets/application.css

application.css require了网站公共的样式包含.css .scss 在调试模式中分别引入,在生产环境将合并压缩在application.css里。

如新增模块可按application.css的格式新增css并require该模块单独使用的样式,并在该模块的layout里引入,放在application.css引入的下面。

脚本

app/assets/javascripts/application.js

与样式同理。

图片

如新增模块,新建文件夹以便合理组织图片。

partial及.js.erb

partial是为了在不同页面渲染相同的模版片段(如模块的公用菜单等),partial的命名均以下划线开头,样式和脚本最好在模版里的block写入。

.js.erb 是响应ajax请求并返回javascript类型数据,一般包含如下类似内容

1
$("#container_id").html(<%=j(render:partial=>'/new_card_analysis/people_consume_ability_vs_date_left')%>")

这部分代码逻辑是选择页面上的容器元素并替换元素里的html,所以建议不要在partial里写样式和脚本,多次ajax请求会重复渲染相同的样式和脚本(如对相同的元素多次绑定相同事件此类无意义的代码),如需要ajax请求执行js可以在.js.erb 因为返回的是javascript类型数据,脚本写在这里更为合适而不是替换容器元素的html同时包含脚本。

关于jquery ujs

https://github.com/rails/jquery-ujs ujs是rails的gem包,安装好后会在增加jquery_ujs.js文件,项目里的’application.js’已引入//= require jquery_ujs,ujs默认绑定了一些事件,具体参见https://github.com/rails/jquery-ujs/blob/master/src/rails.js。

常用的ajax表单提交可以<%= form_for ... %>:remote=>true<% end %> 如此最终的form标签包含data-remote=”true”(直接在html form标签加这个属性也是可以的),表单提交后会执行类似

1
2

$.ajax({method:"post",dataType:"script",....})

基于jquery发起一个ajax请求,并声明请求的格式为script,后端可以通过.js.erb响应此请求也可以在action里声明返回的数据类型是javascript并渲染其他路径的模版或者直接返回javascript字符串。

如根据需求除了需要执行.js.erb里的响应内容外还需要执行页面上其他交互可以手动写$.ajax请求而不必拘泥于ujs默认绑定的事件(此时需要去掉ujs的属性以避免重复绑定)。 $.ajax({method:”post”,dataType:”script”,….}).done(function(){ …//其他交互逻辑。 })

关于AJAX

数据类型优先方案是采用json格式的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$button.on("click",function(e){
e.preventDefault();//阻止此元素的浏览器默认行为(锚链接行为,表单提交行为)
var $this = $(this),form = this.form;//表单元素会有.form属性指向所在表单
var params = {url:"",processData:processData,method:"post",dataType:"json",data:data,beforeSend:function(jqXHR,settings){
$this.data('text',$this.text());//保存按钮默认文字
$this.prop('disable',true);//避免提交过程中多次点击
$this.text('提交中...');
},....}
//processData 布尔值,ajax请求默认为true,如果表单数据较少
//data = {key1:$element1.val(),key2:$element2.val()}
//processData此时params就不需增加processData属性维持默认jquery内部将对象字面量转换成"key1=val1&key2=val2"的形式发送给后端
// 若表单数据较多
// data = $(form).serialize() 直接将表单中所有表单元素转换为"key1=val1&key2=val2"的形式
// processData 此时值需要为false
$.ajax(params).done(function(data, textStatus, jqXHR){
//data 根据请求dataType不同类型不同 "html"为字符串,"json"为对象字面量
//html 一般执行$containerElement.html(data);
}).fail(function(jqXHR, textStatus, errorThrown){
alert(textStatus);// 提示错误,后端需要返回http code 非200,根据错误类型
}).always(function(data|jqXHR, textStatus, jqXHR|errorThrown){
//无论请求成功或失败
$this.prop('disable',false); //恢复可点击状态
$this.text($this.data('text')); //恢复默认文字
});
});

关于“删除”:

<a href="/users/5" data-method="delete" rel="nofollow" data-confirm="Are you sure?">Delete</a>

上面的例子通过data-method="delete"属性绑定事件,当用户点击发起一个ajax请求 http method为delete(我们可以将delete替换为post,避免使用get请求以免在浏览器直接打开执行”删除”操作),在此之前因为有data-confirm存在会先调用window.confirm 浏览器打开一个确认对话框询问用户是否要执行此操作,在执行删除操作时我们一般都需要用户进行确认以避免用户误点击而删除了数据。

gulp + browser-sync + django 实现livereload开发 记一次mysql server 错误
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×