文档章节

Rails + Bootstrap个人博客搭建的完整过程(2)

BluesChow
 BluesChow
发布于 2015/01/09 17:43
字数 2194
阅读 3938
收藏 6

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”就全部完成了,接下来,其实大家都看到了,界面开起来很丑陋,需要做一些美化,所以我们先要构思好整个页面的表现,然后修改页面的实现代码。

© 著作权归作者所有

BluesChow
粉丝 5
博文 163
码字总数 29622
作品 0
深圳
程序员
私信 提问
Rails + Bootstrap个人博客搭建的完整过程(1)

Part 1 -首先最基本的,创建一个新的的project: rails new blog -然后修改source为https://ruby.taobao.com,加入bootstrap的gem到Gemfile: gem 'twitter-bootstrap-rails' 执行bundle ......

BluesChow
2015/01/09
0
0
辞旧迎新之际, 我给博客换了新装

2015年3月份我用Rails写了第一个比较完整的项目——首个博客系统,现在回过头来看,觉得很多地方都写的比较烂,今年年初的时候我打算重构自己的博客系统,从一开始的想法到完成整件事,经历了...

rina123
2017/12/18
0
0
免费的响应式Bootstrap模板 - Codester

日期:2013-3-3 来源:GBin1.com 在线演示/下载 Codester是一个基本的个人作品集Bootstrap模板,帮助设计师,摄影师,图形艺术工作者搭建高度可定制的网站。拥有自定义包和相关的javascript,...

gbin1
2013/03/05
36
0
免费的响应式Bootstrap模板 - Codester

日期:2013-3-3 来源:GBin1.com 在线演示/下载 Codester是一个基本的个人作品集Bootstrap模板,帮助设计师,摄影师,图形艺术工作者搭建高度可定制的网站。拥有自定义包和相关的javascript,...

gbin1
2013/03/05
1K
2
初识yii Framework 框架 建立第一个 Yii 应用

自己折腾php快一年了,开始用了一个国产的框架,还算用得比较熟悉了,最近想把这个业余爱好继续发扬光大,因此,把笔记本的win7也干掉了,装了ubuntu ,体验一把完整的php开发体验, 重要是准...

淡水鱼
2013/03/22
0
6

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部