Ruby on rails初体验(二)
体验一中添加了一个最基本的支架和一个简单的数据迁移,实现了一个基本的增删改查的功能列表。体验二中要在次功能上继续丰满一下功能。实现如下效果:

在每个公司中都包含有不同的部门,按照体验一中的方法,添加一个部门的支架,一个数据迁移。实现部门的增删改查功能。部门的数据结果如下:

具体方式省略。
简单创建了支架而没有定制应用,它将难以使用,为了给一个公司添加部门,将会边的很麻烦。我们把我们希望的页面和支架生成的部门的页面比较一下:




Cid和Chargeuserid先不用做关联,手添即可,只是为了能够重新组织页面。
部门列表和创建部门的页面看起来和我们想要的页面上出现的内容非常相似,目标页面中间部分看起来像是作为列表,而末尾像创建部门页面。
接下来是今天要整理的内容:把一个页面的内容分解到几个文件里。
首先要理解三个概念:
(1) 布局:为一系列网页设定统一的外观,大多数会提供出现在每个页面顶部和底部的标准的HTML元素。
(2) 模板:模版是页面的主要内容,模版与动作相关联。
(3) 局部模板:一个模版会调用多个不同的局部模版来建立页面的主要内容,局部模版允许把一个复杂模版分解为多个更小的部分,允许把公共的内容分离出来,比如菜单和导航栏,局部模版可以被模版使用,它也可以被布局直接使用。
布局、模版、局部模板这三种嵌入式Ruby(ERB)文件组成一个网页。
创建添加部门表单的局部模板:
局部模板只是另外一种ERB文件,它包含着与模板相同的标签类型。此时的项目的views结构如下图:

通过拷贝app/views/departments/new.html并且另存为app/views/companies/_new_department.html.erb来创建局部模板。一个重要的事情就是局部模板以字符_开始,Rails通过字符_来区分页面模板和局部模板。
在模版中包含局部模版:
我们要在company的show.html.erb页面模版来把创建的局部模版包含在它的输出里,局部模板和模板一样,仅仅只是一段伪装成HTML样子的Ruby代码,通过一个render命令到company的页面中:

现在局部模板应该已经添加到company的页面中了,让我们看一下show.html.erb Company页面查看信息是否现实正确。现实内容如下:

感觉好奇怪,我们看一下app/views/departments/new.html、app/views/companies/_new_department.html.erb文件中的内容:
<h1>New department</h1> <%= render 'form' %> <%= link_to 'Back', departments_path %>
看来问题出现在<%= render 'form' %>这个地方,这里是页面直接跳转到_form.html.erb页面。所以就会出现如上页面现实的问题。
下面将app/views/companies/_new_department.html.erb改为如下内容(从app/views/departments/_form.html.erb将里面的内容复制出来的信息,因为添加部门的页面同样是直接跳转到此页面)避免冲突问题:
<%= form_for(@department) do |f| %>
<% if @department.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@department.errors.count, "error") %> prohibited this department from being saved:</h2> <ul>
<% @department.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %> <div class="field">
<%= f.label :name %><br>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :cid %><br>
<%= f.text_field :cid %>
</div>
<div class="field">
<%= f.label :chargeuserid %><br>
<%= f.text_field :chargeuserid %>
</div>
<div class="field">
<%= f.label :desc %><br>
<%= f.text_area :desc %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
下面再看浏览器请求的结果:

什么意思,又出错了,看来说是@department为空,可是在添加部门的页面这个是正常工作的啊,为什么呢?对比一下模板中的内容是一样的,问题在于@department变量,额,问题就是这个,原来的时候创建一个部门是由DepartmentsController控制的,此刻改为CompaniesController控制,在DepartmentController中调用create方法的时候调用如下代码:
# POST /departments
# POST /departments.json
def create
@department = Department.new(department_params) respond_to do |format|
if @department.save
format.html { redirect_to @department, notice: 'Department was successfully created.' }
format.json { render action: 'show', status: :created, location: @department }
else
format.html { render action: 'new' }
format.json { render json: @department.errors, status: :unprocessable_entity }
end
end
end
@department = Department.new(department_params)原来在调用create的时候它本身给定义好了一个空的department的实例变量,知道问题,那么就来解决这个问题
我们需要将页面中的@department改为一个局部变量。
<h1>New department</h1> <%= form_for(department) do |f| %>
<% if department.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(department.errors.count, "error") %> prohibited this department from being saved:</h2> <ul>
<% department.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %> <div class="field">
<%= f.label :name %><br>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :cid %><br>
<%= f.text_field :cid %>
</div>
<div class="field">
<%= f.label :chargeuserid %><br>
<%= f.text_field :chargeuserid %>
</div>
<div class="field">
<%= f.label :desc %><br>
<%= f.text_area :desc %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %> <%= link_to 'Back', departments_path %>
如何把局部变量传递给局部模板:
由于局部模板就像是函数,考虑到DepartmentController中给@departmentde可以所使用的值,由于表单会被用来初始化department,所以我们只要用一下方法给表单传递一个新的Department对象:
<%= render :partial => "new_department", :locals=>{ :department => Department.new } %>
下面在看一下页面的结果:

工作正常,但是下面有两个Back,额,额,由于局部模板中的Back没有去掉,但是此时已经不需要从创建department到department列表了,此处就删掉吧。简单的很。
Ruby on rails初体验(二)的更多相关文章
- Ruby on rails初体验(一)
接触ruby on rails 已经有一段时间了,想记录一下自己的rails历程.自己写一些小例子来帮助学习. Rails 适用于那些以数据为中心的应用,很多应用的核心部分包括一个数据库,这些引用的 ...
- Ruby on rails初体验(三)
继体验一和体验二中的内容,此节将体验二中最开始的目标来实现,体验二中已经将部门添加的部分添加到了公司的show页面,剩下的部分是将部门列表也添加到公司的显示页面,整体思路和体验二中相同,但是还是会有点 ...
- ruby on rails 实战(二)
1,修改routes文件,让所有的action都可以使用get或者post方式访问 match "/:controller/:action" => "control ...
- 【原创】Jquery初体验二
快速导航 一.传统方式生成Table 二.使用jquery.tmpl插件快速生成Table 三.Jquery中的操作class的几个方法 四:jq里面的克隆 五:属性过滤器 六:表单元素过滤器 一.传 ...
- Spring Cloud Alibaba 初体验(二) Nacos 服务注册与发现 + 集成 Spring Cloud Gateway
一.服务注册 添加依赖: <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>s ...
- jquery.fn.extend与jquery.extend--(初体验二)
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- JSON初体验(二):Gson解析
今天,我们来介绍一下Gson的jar包的用法. JSON解析之Gson 特点:编码简介,谷歌官方推荐 数据之间的转换: 1.将json格式的字符串{}转换成为java对象 API: <T> ...
- node初体验(二)
1.静态资源访问,需要设置路由和响应标头 2.url模块.path模块.querystring模块 Url { protocol: null, slashes: null, auth: null, h ...
- Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验
Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...
随机推荐
- MySQL基础6-分组查询
1.分组函数 需求20:查询所有商品平均零售价SELECT AVG(salePrice) FROM product 需求21:查询商品总记录数SELECT COUNT(id) count FROM p ...
- Linear Regression 线性回归
Motivation 问题描述 收集到某一地区的房子面积和房价的数据(x, y)42组,对于一套已知面积的房子预测其房价?   由房价数据可视化图可以看出,可以使用一条直线拟合房价.通过这种假设得 ...
- 【3Sum】cpp
题目: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find al ...
- ogre3D学习基础2 -- 顶点程序与片断程序
三.顶点程序与片断程序 顶点或者片断程序定义可以被多个材质使用,唯一的前提条件是必须在引用它之前在材质的渲染通路部分中定义. 一个低级顶点程序示例如下: vertex_program myVertex ...
- startActivityForResult用法
使用场景:A界面(activity) 可跳转到一个(假设为 B)或多个子Activity,要求B处理完工作之后返回A 界面,或许同时返回一些数据交给A继续处理.如 由登陆界面A跳转到注册界面B,注册成 ...
- Selenium - WebDriver: Waits
These days most of the web apps are using AJAX techniques. When a page is loaded to browser, the ele ...
- 玲珑杯”ACM比赛 Round #15
手速狗从西安回来一只浑浑噩噩,好不容易迎来一场送饭比赛体验一把河南的优势,结果被高中生狂虐,无缘奖金..我的奖品梦就这样一次次被打破.... A -- Reverse the lights 最后半小时 ...
- 计算两个日期之间的天数差C++/java
1--Java 分析:调用java中Calendar类 int days(Date date1,Date date2){ Calendar cal = new Calendar.getInstance ...
- bzoj2338数矩形(rectangle)
数矩形(rectangle) 计算几何 把所有点两两连线,把这些线按长度排序,再按中点排序 能组成矩形的线一定是连续的 最坏就是所有点围成一个圆,交于圆心 复杂度O(可以过) 要用叉积,不然会被卡精 ...
- inner join和left join 、right join 的区别?
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...