Rails ＋ Bootstrap我的博客搭建的完整過程（2）

Part 4

建立一篇屬於咱們的文章吧！以前我並無設計好這個簡單的項目的結構，我就建立了一個叫blog的controller，如今發現我並不須要這個，我目前僅須要一個article的model，和一個歡迎的界面，歡迎的界面會顯示全部的文章以及部份內容，可是若是文章過長是不會顯示完的，而文章列表只是全部文章的標題，不會顯示任何內容，不管是在歡迎界面仍是在文章列表頁面，點擊文章的標題都會顯示完整的文章內容。Ok，開始！

－首先刪掉我以前建立的blog這個controller

rails destroy controller blogs

而後建立咱們須要的welcome這個controller，說實話，我也不知道首頁到底該用什麼名字，暫時用welcome吧。

rails generate controller welcome

照樣仍是得建立一個空的index方法和view裏面的index.html.erb文件。可是文章怎麼來呢？首先得本身建立啊！

－建立article這個model，裏面包含簡單的title和content這兩個屬性便可知足目前的需求了

rails generate model article title:string content:text

而後須要生成數據庫表，作一下rake db:migrate操做便可。

－生成數據。咱們能夠手動建立一些內容到數據庫裏面。用rails c進入控制檯。而後插入數據

a = Article.new
a.title = "第一篇文章"
a.content = "這是第一篇文章的內容"

這樣，就建立了第一篇文章了。

－在welcome的index方法裏面取回全部的articles

def index
	@articles = Article.all
end

在view中的welcome目錄下的index.html.erb中添加

<p>
	第一篇文章：<%= @articles.first.title %><br>
	內容：<%= @articles.first.content %>
</p>

好了，從新刷新一下頁面，就能夠看到咱們剛纔建立的第一條數據了。

Part 5

接下來就是美化這個頁面了，打造的稍微好看點。

－在stylesheets目錄裏面的application.css中添加每一個article的總體外形的css

.article_content {
    border: 1px solid #dddddd;
    border-radius: 5px;
    background-color: #ffffff;
    margin-top: 10px;
    padding: 5px 20px 5px 20px;
}

而後在index.html.erb裏面就能夠把這個".article_content"做爲div的class來用了

<div class="article_content">
	<h3><%= @articles.first.title %></h3>
	<p><%= @articles.first.content %></p>
</div>

下面咱們但願點擊文章的標題可以顯示全文。既然有了頁面間的跳轉，那麼路由就是必須的了，在config/routes.rb裏面添加article的RESTful路由

resources :articles

此時若是不知道生成了那些路由，你能夠在終端中使用"rake routes"，便可顯示所有的路由信息

而後改變咱們的welcome的index.html.erb文件的內容爲

<% @articles.each do |article|  %>
	<div class="article_content">
		<h3><%= link_to article.title, article_path(article) %></h3>
		<p><%= article.content %></p>
	</div>
<% end %>

根據路由的規則，咱們須要顯示文章，就須要有article這個controller，並且它必須實現show方法，以及添加show.html.erb文件

rails generate controller articles

article這個controller的show方法

def show
	@article = Article.find(params[:id])
end

article的show.html.erb文件內容

<div class="article_content">
	<h3><%= @article.title %></h3>
	<p><%= @article.content %></p>
</div>

－添加導航條上面的"Blog "，"文章列表"，"關於博主"欄目的連接

<a class="navbar-brand" href="/">Blog</a>
<li class="active"><a href="articles">文章列表</a></li>
<li><a href="about">關於博主</a></li>

這裏的about頁面將會找不到路由，我暫時把它安排在welcome裏面，因此在welcome裏面添加about方法

def about
end

而後在view的welcome子目錄下面添加一個about.html.erb的文件。最後在routes裏面添加路由

get '/about' => 'welcome#about'

博客通常都須要評價系統或者會分類系統，因此咱們的版本最基本須要是一個左右佈局的形式，下面來完成這個佈局。

通常這些網頁的佈局都是柵格系統，對於咱們而言整個網頁就是一體的，那麼就至關因而只有一行，若是左右佈局的話，那就是兩列，因此咱們的welcome的index頁面的佈局應該差很少是這樣的：；

<div class="row">
	<div class="col-sm-8">
		<% @articles.each do |article|  %>
			<div class="article_content">
				<h3><%= link_to article.title, article_path(article) %></h3>
				<p><%= article.content %></p>
			</div>
		<% end %>
	</div>

	<div class="col-sm-4">
		<div class="right_side">
			<h3>最新的評論</h3>
		</div>
	</div>
</div>

值得注意的是"class=col-sm-4"中最後的數字在一個row裏面的總和必須是12

爲了代表左側的文章列表能夠順着往下排，分欄是沒問題的，咱們再建立一片文章

rails c
> a = Article.new
> a.title = "第二篇文章"
> a.content = "這是第二篇文章的內容"

到此，一個基本能夠操做的blog出現，接下來就是建立爲article添加CURD裏面缺失的「CUD」方法和頁面進一步的美化。

Part 6

折騰的好一會，終於又能夠發佈上來了。既然咱們須要作「CUD」，那咱們就按順序來吧！在這以前，咱們須要明白一點就是咱們接下來的CURD都是針對article這個resource來作的，先讓咱們在界面上添加操做的入口吧（其實就是能夠點擊的超級連接或者按鈕什麼的）

－更新Article的index頁面，添加"編輯"，"刪除"，"建立"的UI入口

<h3>文章列表</h3>

<div class="article_content col-sm-8">
	<% @articles.each do |article| %>
		<div class="row">
			<div class="col-sm-8">
				<%= link_to article.title, article_path(article) %>
			</div>
			<td class="col-sm-2">
				<%= link_to '編輯', edit_article_path(article) %>
			</td>
			<td class="col-sm-2">
				<%= link_to '刪除', article_path(article), action: :delete %>
			</td>
			<td class="col-sm-4" align="right">
				<%= article.created_at.to_s(:db) %>
			</td>
		</div>
	<% end %>
</div>

<div class=" col-sm-5">
	<%= link_to '寫博客', new_article_path %>
</div>

－「C」 ="Create"，寫博客

首先添加在article_controller.rb中添加"new"這個action

def new
	@article = Article.new
end

再在views的articles的目錄下添加"new.html.erb"頁面，讓咱們能夠輸入寫博客須要的文章標題和文章的內容

<%= form_for @article, url: articles_path do |f| %>
	<%= f.label :title, "文章標題" %>
	<div>
		<%= f.text_field :title %>
	</div>

	<%= f.label :content, "文章內容" %>
	<div>
		<%= f.text_area :content %>
	</div>
	
	<%= f.submit "提交" %>
<% end %>

點擊"提交"按鈕後會進入到默認的「create」方法中，因此咱們須要實如今controller中實現這個方法

def create
	@article = Article.new(params[:article])
	@article.save
end

咱們能夠根據傳遞回來的article的內容真正的生成article對象並進行存儲，一般這時咱們會遇到一個錯誤：

ActiveModel::ForbiddenAttributesError

這是由於rails的安全性規定的，全部的屬性都必須進行過濾，至於安全性究竟是什麼，我本身也不是很清楚，以後再說吧。Ok，解決它的辦法是，把全部的屬性都過濾一次，咱們能夠在article的controller中添加一個私有的方法來作這個問題

def article_params
	params.require(:article).permit(:title, :content)
end

接下來就用這個方法替換create裏面的"params[:article]"便可，那麼新的create方法應該是

def create
	@article = Article.new(article_params)
	@article.save
end

此時，若是你點擊"提交"按鈕的話，還會遇到一個問題"Template is missing"，這是由於rails中的每一個方法原則上都對應着一個模板，但實際中其實有些是不須要模板的，因此我把能夠在create方法結束時，在尋找create.html.erb以前重定向到別的頁面，咱們這裏定位到index頁面去，那麼須要加一行代碼

redirect_to articles_url

好了，到這裏，"C"就完成了！

－"U" ＝ "Update"，編輯更新已經存在的博客

首先在controller中添加「edit」這個方法

def edit
	@article = Article.find(params[:id])
end

在views中添加「edit.html.erb」頁面

<%= form_for @article, url: article_path(@article) do |f| %>
	<%= f.label :title, "文章標題" %>
	<div>
		<%= f.text_field :title %>
	</div>

	<%= f.label :content, "文章內容" %>
	<div>
		<%= f.text_area :content %>
	</div>

	<%= f.submit "提交更新" %>
<% end %>

若是你點擊「提交更新」，Rails會按約定去執行update方法（這是我第一次理解到rails的約定優於配置）

在aritcle的controller中添加update方法

def update
	@article = Article.find(params[:id])
	@article.update(article_params)
	redirect_to articles_url
end

一樣，在最後須要重定向到別的頁面，不然就須要提供一個update的模板，但顯然咱們不須要這個模板。好了，到這裏「U」就完成了

－"D" = "Delete"，刪除博客

通常「刪除」功能並不須要界面，只須要執行動做，而後當前頁面刷新便可。經過"rake routes"能夠知道rails的刪除的路由和show的路由是一致的，可是動做不同，這就是Rails中RESTful的方式（僅是我我的的理解）

因此，咱們僅須要實現刪除的方法就行了。Rails中的刪除動做默認是"destroy"，那咱們就在article的controller中實現這個方法吧。

def destroy
	@article = Article.find(params[:id])
	@article.destroy
	redirect_to articles_url
end

一樣的重定向到index頁面，到此，就「CRUD」就所有完成了，接下來，其實你們都看到了，界面開起來很醜陋，須要作一些美化，因此咱們先要構思好整個頁面的表現，而後修改頁面的實現代碼。