ROR新手上路之三我的第一个ROR页面
1。首先构建一个控制器
命令入下
>ruby script/generate controller Sit index about help --控制器名Site，外加3个操作，即index、about、help
generate创建了一组文件，在doc环境下可以很清晰的观察到，包括文件的类型。
此时在http://localhost:3000/site/index里可以看到你创建的页面
2。改变默认页面
打开config/routes.rb文件，添加 map.connect ",:controller=>"site"
然后再将public目录下的index.rhtml文件删除，doc命令如下
>cd public
>del index.rhtml
此时在http://localhost:3000中可以查看你创建的页面
3。修改index.rhtml文件，代码如下
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/DTDT/xhtml1-strict.dtd">
<html>
<head>
<title>RailsSpace</title>
</head>
<body>
<h1>Welcome to RailsSpace!</h1>
<p>This is going to best site ever!</p>
</body>
</html>
此时你访问的http://localhost:3000将显示index的内容。about.rhtml与help.rhtml代码参考index.rhtml即可。
4。页面的布局，添加导航栏
在app/views/layouts中创建一rhtml文件，建议此文件名与控制器名相同，这样rails会自动查找它。代码如下
代码
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/DTDT/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title><%=@title %></title>
5 <%=stylesheet_link_tag "site"%>
6 </head>
7 <body>
8 <div id="whole_page">
9 <div id="header">RailsSpace</div>
10 <div id="nav">
11 <%= link_to_unless_current("Home",{:action=>"index"}) %>|
12 <%= link_to_unless_current("About US",{:action=>"about"}) %>|
13 <%= link_to_unless_current("Help",{:action=>"help"}) %>
14 <%#*函数调用的圆括号是可选的，花括号作为最后一个参数时也是可选的%>
15 </div>
16 <div id="content">
17 <%#*函数调用的圆括号是可选的，花括号作为最后一个参数时也是可选的%>
18 <%=@content_for_layout%>
19 </div>
20 </div>
21 </body>
22 </html>
注：若控制器使用不同的layout，如dif.rhtml文件，可在控制器类声明之后添加一行引用的代码
class SiteController<ApplicationController
layout "dif" ......
end
5。修改controllers/site_controller.rb代码如下
代码
class SiteController < ApplicationController
def index
@title="Welcome to RailsSpace!"
end
def about
@title="About RailsSpace"
end
def help
@totle="RailsSpace Help"
end
end
6。填充样式
在layouts/site.rhtml中有这样一句话<%=stylesheet_link_tag "site"%>，它包含了一个名为site.css文件
在public/stylesheet下新建一样式，并依据个人喜好添加一些规则。我的如下
代码
1 root {
2 display: block;
3 }
4 body{
5 font-family: sans-serif;
6 background: gray;
7 margin: 0;
8 text-align: center;
9 }
10 #whole_page{
11 width: 50em;
12 margin: auto;
13 padding: 0;
14 text-align: left;
15 border-width: 0 1px 1px 1px;
16 border-color: black;
17 border-style: solid;
18 }
19 #header{
20 color: white;
21 background: maroon;
22 font-size: 24pt;
23 padding: 0.25em;
24 margin-bottom: 0;
25 }
26 #nav{
27 color: black;
28 font-size: 12pt;
29 font-weight: bold;
30 background: #ccc;
31 padding: 0.5em;
32 }
33 #nav a,#nav a:visited{
34 color: maroon;
35 text-decoration: none;
36 }
37 #nav a:hover{
38 border-bottom: 2px dotted maroon;
39 }
40 #content{
41 height: 100%;
42 background: white;
43 padding: 1em;
44 }
45 #content h1{
46 font-size: 18pt;
47 }
到这里，一个简单的ROR页面就呈现在大家面前了。如图
