手把手学ROR三——Rails的代码方式

本文链接：https://blog.csdn.net/Blue___Ocean/article/details/106494760

本文深入讲解Rails应用架构，包括请求处理流程、文件组织方式及如何使用ERB减少重复代码。探讨了路由设置、控制器与视图交互、模型数据处理，并介绍了资源文件的优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上篇文章中说到可以在public里面写脚本执行，我们可以把一切文件都放进public里面，但是就失去了架构感了。我们用ROR的方式怎么写？

文件中的各项文件主要功能大家可以参考这里：传送门

官方文档可以参考这里：走起~

什么是Rails的方式

如图所示，一个请求进来后，首先由路由部分的代码分发给相应的controller，controller去选择相应的模板文件，最终响应这次请求。

数据处理部分的代码可以放在model中，处理后的数据可以传递给controller。

2. 将我们的文件穿插到ROR里面

这个是我们正常搭建的目录。接下来换成ROR的方式

2.1 在路由文件routes.rb中添加

root 'page#welcome'

简单的说加载的时候响应page controller 的welcome方法。

官方解释可以看一下：

“root 'welcome#index' tells Rails to map requests to the root of the application to the welcome controller's index action and get 'welcome/index' tells Rails to map requests to http://localhost:3000/welcome/index to the welcome controller's index action. This was created earlier when you ran the controller generator (rails generate controller Welcome index).”

注：一个请求进来后会去public下面找可以响应请求的静态页面，所有要把之前的public下面的index换一个名字

不修改名字就会执行那个index啦

提示我们没有相应的controller，在这个目录结构下新建一个page_controller.rb

输入内容

class PageController < ApplicationController
        def welcome

        end
end

执行后提示没有模板

模板一般统一放在views目录下，文件夹的名字和controller同名，文件的名字和相应的action同名

在该目录结构下新建

查看运行结果，成功啦

把之前写好的静态页面都拷贝到public下面，对应的index.html 和 about.html按照上面方法放好，相关代码贴给大家

controllers/views/welcome.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>statics</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+	<script src="js/jquery.anystretch.min.js"></script>
</head>
<body class="index">
	<div class="navbar clearfix">
	  <div class="container">
	    <a class="navbar-brand" href="/">
	      Meetup
	    </a>
	    <ul class="nav left">
	      <li><a href="about.html">About</a></li>
	      <li><a href="#">placeholder</a></li>
	    </ul>
	    <ul class="nav right">
	      <li><a href="#">login</a></li>
	      <li><a href="#">signup</a></li>
	    </ul>
	  </div>
	</div>

	<div class="home-banner" data-stretch="images/back.jpg">
		
	</div>


	<div class="footer">
		<div class="container">
			footer
		</div>
	</div>
	<script>
	  $('.home-banner').anystretch();
	</script>

</body>
</html>

controllers/views/about.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>statics</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+	<script src="js/jquery.anystretch.min.js"></script>
</head>
<body>
	<div class="navbar clearfix">
	  <div class="container">
	    <a class="navbar-brand" href="/">
	      Meetup
	    </a>
	    <ul class="nav left">
	      <li><a href="./about.html">About</a></li>
	      <li><a href="#">placeholder</a></li>
	    </ul>
	    <ul class="nav right">
	      <li><a href="#">login</a></li>
	      <li><a href="#">signup</a></li>
	    </ul>
	  </div>
	</div>

	<div class="container">
		<h1>about</h1>
	</div>


	<div class="footer">
		<div class="container">
			footer
		</div>
	</div>

</body>
</html>

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root 'page#welcome'
  get '/about' =>'page#about'
end

最后效果跟静态页面的一致

3. Embedded Ruby

上面的welcome.html和about.html可以看到很多重复代码，怎么减少重复代码呢？

其实放在app/views/page 中的模板文件一般由“.erb”结尾,Embedded Ruby(嵌入式ruby),有了这个后缀就可以使用<%= %>这样的语法了。先把welcome.html和about.html rename一下，加上“.erb”结尾

将自动生成的app/views/layouts/application.html.erb文件中的内容删除，替换成welcome.html和about.html中重复的部分。

注意将主体内容替换成“<%= yield %>”。这样在welcome和about里只保留主体内容就可以了

启动后看到一切正常，只是header 的透明样式没有了

解决方法如下：

首先在app/views/layouts/application.html.erb页面下的<body>里添加

<body class="<%= params[:controller] +'-'+ params[:action]%>">

这些，这样可以对各个页面做出区分

找到你想有透明效果的页面名称，在对应的css页面添加效果，就可以针对性有效啦

.page-welcome .navbar {
  background: transparent;
}

4.images 和 js/css 的重构

将public\images里的背景图移动到app\assets\images下

public\js里的移动到app\assets\javascripts\下新建一个vender

在javascripts下面的application.js里导入JS

//= require vender/jquery.anystretch.min.js

将application.html.erb里面有script 的那三行替换成

<%= javascript_include_tag "application" %>

导入图片的那里可以替换成这个

<div class="home-banner" data-stretch="<%= image_url "back.jpg" %>">
		
</div>

可以正常运行。

public\css文件移动到app\assets\stylesheets里面，也用application.css做统一管理，里面有条语句“ *= require_tree .”

可以把stylesheets下所有css都自动require进来，如果文件之间不依赖加载顺序就不用再写啦

将application.html.erb中css的引用替换成

<%= stylesheet_link_tag "application"%>

最后，更多知识请传送

手把手学ROR三——Rails的代码方式

什么是Rails的方式

2. 将我们的文件穿插到ROR里面

3. Embedded Ruby

4.images 和 js/css 的重构