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”就所有完成了，接下来，其实你们都看到了，界面开起来很丑陋，须要作一些美化，因此咱们先要构思好整个页面的表现，而后修改页面的实现代码。