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 ...
随机推荐
- CodeForces 781D Axel and Marston in Bitland DP
题意: 有一个\(n\)个点\(m\)条边的无向图,边有两种类型,分别用\(0\)和\(1\)标识 因此图中的任意一条路径都对应一个\(01\)字符串 定义一个无限长的字符串\(s\): 开始令\(s ...
- P1194 买礼物(建模)
P1194 买礼物 题目描述 又到了一年一度的明明生日了,明明想要买B样东西,巧的是,这B样东西价格都是A元. 但是,商店老板说最近有促销活动,也就是: 如果你买了第I样东西,再买第J样,那么就可以只 ...
- 3 - JVM随笔分类(gc.log ,VisualVM插件介绍,VisualVM远程连接方式介绍)
gc.log 354.2 KB 对于对应用的监控上可以使用Jdk自带的VisualVM来做可视化监控,可以查看当前服务应用进程的堆大小的走向,以及类的加载数量等,除此之外,VisualVM可以支持很多 ...
- 9、JS对象 知识总结
1.对象 <!DOCTYPE html> <html> <body> <script> <!-- 新建对象 --> person=new O ...
- 【Climbing Stairs】cpp
题目: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either cl ...
- bat 处理adb脚本
@echo off REM Funtion: 测试parsermode 接口CdxParserGetMediaInfo 和CdxParserRead REM Code by lzp 2017-05-0 ...
- File IO(NIO.2):路径类 和 路径操作
路径类 Java SE 7版本中引入的Path类是java.nio.file包的主要入口点之一.如果您的应用程序使用文件I / O,您将需要了解此类的强大功能. 版本注意:如果您有使用java.io. ...
- AGC 26 D Histogram Coloring
题目 将柱子的高度离散化$\DeclareMathOperator{\dp}{dp}$ 设第 $i$ 根柱子实际高度是 $h_i$,离散化之后的高度是 $g_i$:第 $i$ 高的高度是 $H_i$, ...
- 将npm改成默认使用cnpm下载
淘宝的cnpm下载安装的命令为 npm install -g cnpm --registry=https://registry.npm.taobao.org 但是仅仅这样是不够的,这样只有主动去下载资 ...
- 【转】Java进阶之路
1. 引言 搞Java的弟兄们肯定都想要达到更高的境界,用更少的代码解决更多的问题,用更清晰的结构为可能的传承和维护做准备.想想当初自己摸着石头过河,也看过不少人介绍的学习路线,十多年走过来多少还 ...