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 ...
随机推荐
- Go语言之并发编程(二)
通道(channel) 单纯地将函数并发执行是没有意义的.函数与函数间需要交换数据才能体现并发执行函数的意义.虽然可以使用共享内存进行数据交换,但是共享内存在不同的goroutine中容易发生竞态问题 ...
- 安卓手机关闭底部键盘灯的方法(htc G11亲测有效)
还在因为看电子书和看电影时键盘灯刺眼而苦恼吗?下面提供一个方法关闭键盘灯,让你轻松DIY! 1、手机必须先Root。使用RE管理器,按照这个路径,找到文件:brightness sys/devices ...
- IOS开发---菜鸟学习之路--(四)-登陆界面
本篇的内容其实大家 参照橘子的那本开发的书的话 上面讲解的是更详细的 一些实现. 我这边唯一的区别就是 做了网络数据的获取 以及 验证成功后 进行界面的跳转.. 第四篇了 本篇主讲登陆模块 首先先放 ...
- day02_04.算算多少人
第四题 算算有多少人? 第二题的升级版,看看你能不能做出来 利用你的编程思想去看这道题目,记住不要放过题目的每一个小细节 题目:操场上100多人排队,3人一组多1人,4个一组多2人,5人一组多3人,共 ...
- [python][django学习篇][3]创建django web的数据库模型
推荐学习博客:http://pythonzh.cn/post/8/ 博客或者web界面向用户展示内容,它需要从某个地方获取博客内容或者web界面内容,才能够展示出来.通常来说:某个地方指的就是数据库 ...
- c++面试须知
这些都是从zhihu上看到的. 指针,多态(虚函数表.内存layout),作用域,内存的管理 算法与数据结构,数据结构上由掌握哈希.优先级队列,算法上有字符串处理,简单的DFS.BFS.动态规划 系统 ...
- Shader剔除像素绘制扇形
Shader "Custom/Indicator" { Properties { _MainTex("Main Texture", 2D) = "wh ...
- node.js express 4.x 安装指南(Express不是内部或外部命令解决方案)
前几天express 推出了4.0,得知这个消息,自己尝试了一下,突然发现用以前的文档上的操作出现了各种问题.结果只能去看文档,现在在这个给大家分享下4.0版本的安装. 先说下如果需要用express ...
- BZOJ 4561 [JLoi2016]圆的异或并 ——扫描线
扫描线的应用. 扫描线就是用数据结构维护一个相对的顺序不变,带修改的东西. 通常只用于一次询问的情况. 抽象的看做一条垂直于x轴直线从左向右扫过去. 这道题目要求求出所有圆的异或并. 所以我们可以求出 ...
- 关于fixed定位的一些错误看法纠正
之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fi ...