首页 > 代码库 > Rails + Bootstrap个人博客搭建的完整过程(2)
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]) endarticle的show.html.erb文件内容
<div class="article_content"> <h3><%= @article.title %></h3> <p><%= @article.content %></p> </div>-添加导航条上面的"Blog ","文章列表","关于博主"栏目的链接
<a class="navbar-brand" href="http://www.mamicode.com/">Blog</a> <li class="active"><a href="http://www.mamicode.com/articles">文章列表</a></li> <li><a href="http://www.mamicode.com/about">关于博主</a></li>
这里的about页面将会找不到路由,我暂时把它安排在welcome里面,所以在welcome里面添加about方法
def about end
然后在view的welcome子目录下面添加一个about.html.erb的文件。最后在routes里面添加路由
get ‘/about‘ => ‘welcome#about‘到此,一个基本可以操作的blog出现,接下来就是创建为article添加CURD里面缺失的“CUD”方法和页面进一步的美化。
Rails + Bootstrap个人博客搭建的完整过程(2)