【Ruby on Rails實戰】3.3 網站主頁面以及相關設定
1、在config/routes.rb檔案中，新增程式碼，指定網站首頁的路徑
root 'home#index'
每次開啟網站，系統會通過root 'home#index’將請求分配到home_controller.rb中的index方法，如果和資料庫有資料互動的話，在index方法中呼叫model模型來實現與資料庫的互動，最後將得到的資料顯示在app/views/home/index.html.erb頁面上。我們再來複習一下網頁請求的路徑
2、在專案資料夾下執行語句rails g controller home index
其中home是controller的名字，index是controller中例項方法（即action）的名字
/vagrant/data_system$ rails g controller home index
#系統返回資訊
create app/controllers/home_controller.rb
route get 'home/index'
invoke erb
create app/views/home
create app/views/home/index.html.erb
invoke test_unit
create test/controllers/home_controller_test. 從系統返回資訊中，我們可以看出：
- 建立檔案 app/controllers/home_controller.rb，檔案裡面建立了index方法
- 建立檔案 app/views/home/index.html.erb，我們會在裡面新增html、js程式碼
- 建立檔案 app/assets/stylesheets/home.scss，我們會在裡面新增css樣式程式碼
- 在routes.rb路由檔案中添加了語句get 'home/index’，這條語句刪掉即可。
index.html.erb檔名的.erb字尾：
erb是Embedded RuBy的簡寫，意思是「嵌入式的Ruby」。erb允許把一個HTML檔案裡面加入Ruby程式碼。插入ruby程式碼有以下兩種形式。
（1）<% ruby程式碼 %> 結果不需要列印，通常用來宣告變數，或者if等判斷語句
（2）<%= ruby程式碼 %> 結果需要列印。home.scss檔名的.scss字尾：
scss是一種語言，可以看成是css的擴充套件語言，比css更加簡潔靈活。即使你是css零基礎，也可以直接學習scss。rails是自帶scss支援的，將css檔案字尾新增上.scss，rails會自動轉換。
3、用sublime開啟專案檔案，在app/assets/stylesheets目錄下建立common.css.scss檔案
該檔案裡面放系統通用的樣式程式碼，貼上下列語句到檔案中：
body {
font-family: sans-serif;
margin: 0;
font-size: 14px;
color: #666;
}
.container {
width: 1170px;
margin: 0 auto;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #f5999d;
}
a:hover {
color: #845534;
}
.btn-primary {
color: white;
background: #f5999d;
border-color: #f49bc1;
&:hover {
background-color: #f49bc1;
border-color: #845534;
}
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
form {
input {
font-size: 21px;
width: 100%;
padding: 10px 12px;
color: #101010;
border: 1px solid #acacac;
outline:none
}
textarea {
height: 210px;
font-size: 21px;
width: 100%;
padding: 10px 12px;
color: #101010;
border: 1px solid #acacac;
outline:none
}
label {
display: inline-block;
margin-bottom: 5px;
color:#f5999d;
}
dd {
margin: 0;
}
.error {
margin: 5px 0 9px 0;
color: #DB8A14;
}
}
.notice {
position: absolute;
background: #f5999d;
right: 50%;
bottom: 50%;
color: white;
padding: 20px;
-webkit-box-shadow: 6px 7px 9px -1px rgba(0,0,0,0.68);
-moz-box-shadow: 6px 7px 9px -1px rgba(0,0,0,0.68);
box-shadow: 6px 7px 9px -1px rgba(0,0,0,0.68);
}
td{
text-align: center;
height: 40px;
}
th{
text-align: center;
height: 30px;
}
4、在app/assets/stylesheets目錄中建立layout.css.scss檔案,貼上下面程式碼
該檔案裡面放網站頭部和尾部樣式，其實將下列程式碼放在common.css.scss檔案中也可以，但為了讓程式碼更加規整，我們將網站頭部和尾部樣式統一放到layout.css.scss檔案中。
.navbar {
background: #f49bc1;
position: relative;
height: 60px;
z-index: 1000;
a {
color: #fff;
}
a:hover {
color: #ebebeb;
}
}
.navbar-brand {
float: left;
padding-left: 0;
line-height: 60px;
font-size: 30px;
}
.nav.left {
float: left;
margin-left: 40px;
font-size: 14px;
}
.nav.right {
float: right;
}
.nav li {
float: left;
}
.nav li a {
display: block;
font-size: 1.1em;
padding: 5px 10px;
margin: 15px 10px;
}
.nav li a:hover {
color: #000;
background: #fff;
}
.footer {
border-top: 1px solid #c5c5c5;
min-height: 200px;
margin: 3em 0;
padding-top: 3em;
padding-bottom: 3em;
background: #f8f5f0;
}
.home-banner{
height: 600px;
}
5、在app/assets/stylesheets/home.scss檔案中，貼上下列語句
這個檔案是我們在第2步執行rails g controller home index系統自動產生的檔案，這裡面主要放views/home資料夾下的頁面所對應的樣式。
.issue-list-header {
border-bottom: 1px solid #ddd;
margin-top: 0;
margin-bottom: 30px;
background: #f5999d;
color: #fff;
.issue-list-heading {
font-size: 2em;
font-weight: normal;
}
}
.align{
font-family: "museo-sans-condensed";
font-size: 20px;
text-align:center;
}
.home-banner-links {
position: absolute;
left: 160px;
top: 280px;
.banner-btn {
padding: 10px 10px;
font-size: 1.2em;
font-weight: 300;
font-family: "museo-sans-condensed";
border-radius: 5px;
color: #fff;
background: rgba(220,20,60,0.2);
border: 1px solid transparent;
&:hover {
border: 1px solid rgba(0,0,0,0.2);
}
}
}
6、app/views/layouts/application.html.erb檔案完善
application.html.erb檔案是控制頁面總體樣式的檔案，比如在每個頁面都需要顯示的網站頭部和尾部、flash提示、js css檔案載入等等，都在此檔案定義。
（1）我們先來介紹一下目前application.html.erb檔案中程式碼的含義：
-
開頭的<!DOCTYPE html>
說明這是一份HTML5檔案，向下相容於所有瀏覽器的HTML4。 -
<title>DataSystem<title>
代表網站標籤顯示的名稱 -
<%= csrf_meta_tags %>
防止CSRF攻擊 -
<%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
載入app/assets/stylesheets/application.css檔案，之後有外來的css檔案，我們也在這裡載入 -
<%= javascript_include_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
載入app/assets/javascripts/application.js檔案，之後有外來的js檔案，我們也在這裡載入 -
<%= yield %>
代表被載入的views頁面，比如我們現在本節建立的home/index.html.erb頁面，當要開啟網站首頁時yield就代表index.html.erb頁面
（2）我們將網站標籤改為“萌寵之家”
<!--原先程式碼-->
<title>DataSystem</title>
<!--改為-->
<title>萌寵之家</title>
（3）在網站頭部新增登入註冊入口，在<%= yield %>上面貼上以下程式碼
<div class="navbar clearfix">
<div class="container">
<a class="navbar-brand" href="/">萌寵之家</a>
<ul class="nav right">
<li><%= link_to "登入","#" %></li>
<li><%= link_to "註冊","#" %></li>
</ul>
</div>
</div>
<!--參考程式碼，無需貼上
<%= yield %>-->
程式碼解析：
-
<a class=“navbar-brand” href="/">萌寵之家</a>
href="/"代表點選「萌寵之家」a標籤，頁面回到根目錄也就是網站主頁面 -
<li><%= link_to “登入”,"#" %><li>
這裡應用了嵌入式ruby<%= %>，這行程式碼相當於<li><a href="#">登入</a><li>，因為我們沒有定義登入頁面，先用#代替登入頁面的連結
（4）定義網站尾部以及flash提示，在<%= yield %>程式碼下面貼上下列程式碼
<!--參考程式碼，無需貼上
<%= yield %>-->
<% if flash.notice %>
<div class="notice"><%= flash.notice %></div>
<% end %>
<div class="footer">
<div>
<p class="align">©版權所屬© 2018</p>
</div>
</div>
<script>
var hideNotice = function(){
$(".notice").fadeOut("slow");
}
setTimeout(hideNotice, 2000);
</script>
程式碼解析：
-
<% if flash.notice %>
<div class=“notice”><%= flash.notice %></div>
<% end %>
如果flash.notice有值，頁面會彈出flash.notice的值。flash.notice的用法將會在下一節看到 -
<div class=“footer”></div>
此div標籤裡面定義了網站尾部的內容 -
<script>
var hideNotice = function(){
$(".notice").fadeOut(“slow”);
}
setTimeout(hideNotice, 2000);
</script>
在script標籤裡面包含的是js方法hideNotice，意思是flash.notice提示在展示2秒後消失
7、設定網站主頁面圖片，並且載入jQuery外掛（jquery-anystretch）來保證背景圖根據視窗的變化來自動調整大小
jquery-anystretch外掛使用說明
https://github.com/danmillar/jquery-anystretch
（1）開啟下面連結，將照片命名為index.jpg，並儲存到app/assets/images目錄中。
https://b-ssl.duitang.com/uploads/item/201510/11/20151011223210_wxjQy.jpeg
（2）我們先來新增jQuery外掛jquery-anystretch，在app/assets/javascripts資料夾中新建vendor資料夾，在vendor資料夾下，建立檔案jquery.anystretch.min.js，然後再檔案中貼上下面程式碼。
這個檔案應該在「外掛使用說明」的連結中下載下來，然後貼上到專案中。我們現在直接在檔案中建立這個檔案，並貼上下面程式碼（即連結中的程式碼https://raw.githubusercontent.com/danmillar/jquery-anystretch/master/jquery.anystretch.min.js），效果都是一樣的
/*
* jQuery Anystretch
* Version 1.2 (@jbrooksuk / [me.itslimetime.com](http://me.itslimetime.com))
* [https://github.com/jbrooksuk/jquery-anystretch](https://github.com/jbrooksuk/jquery-anystretch)
* Based on Dan Millar's Port
* [https://github.com/danmillar/jquery-anystretch](https://github.com/danmillar/jquery-anystretch)
*
* Add a dynamically-resized background image to the body
* of a page or any other block level element within it
*
* Copyright (c) 2012 Dan Millar (@danmillar / [decode.uk.com](http://decode.uk.com))
* Dual licensed under the MIT and GPL licenses.
*
* This is a fork of jQuery Backstretch (v1.2)
* Copyright (c) 2011 Scott Robbin ([srobbin.com](http://srobbin.com))
*/
(function(a){a.fn.anystretch=function(d,c,e){var b=this.selector.length?false:true;return this.each(function(q){var s={positionX:"center",positionY:"center",speed:0,elPosition:"relative",dataName:"stretch"},h=a(this),g=b?a(".anystretch"):h.children(".anystretch"),l=g.data("settings")||s,m=g.data("settings"),j,f,r,p,v,u;if(c&&typeof c=="object"){a.extend(l,c)}if(c&&typeof c=="function"){e=c}a(document).ready(t);return this;function t(){if(d||h.length>=1){var i;if(!b){h.css({position:l.elPosition,background:"none"})}if(g.length==0){g=a("<div />").attr("class","anystretch").css({left:0,top:0,position:(b?"fixed":"absolute"),overflow:"hidden",zIndex:(b?-999999:-999998),margin:0,padding:0,height:"100%",width:"100%"})}else{g.find("img").addClass("deleteable")}i=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(A){var z=a(this),y,x;z.css({width:"auto",height:"auto"});y=this.width||a(A.target).width();x=this.height||a(A.target).height();j=y/x;o(function(){z.fadeIn(l.speed,function(){g.find(".deleteable").remove();if(typeof e=="function"){e()}})})}).appendTo(g);if(h.children(".anystretch").length==0){if(b){a("body").append(g)}else{h.append(g)}}g.data("settings",l);var w="";if(d){w=d}else{if(h.data(l.dataName)){w=h.data(l.dataName)}else{return}}i.attr("src",w);a(window).resize(o)}}function o(i){try{u={left:0,top:0};r=k();p=r/j;if(p>=n()){v=(p-n())/2;if(l.positionY=="center"||l.centeredY){a.extend(u,{top:"-"+v+"px"})}else{if(l.positionY=="bottom"){a.extend(u,{top:"auto",bottom:"0px"})}}}else{p=n();r=p*j;v=(r-k())/2;if(l.positionX=="center"||l.centeredX){a.extend(u,{left:"-"+v+"px"})}else{if(l.positionX=="right"){a.extend(u,{left:"auto",right:"0px"})}}}g.children("img:not(.deleteable)").