分享 如何从零构建个人博客系统

rina · 2017年12月23日 · 最后由 liuyang_1991 回复于 2018年02月01日 · 1367 次阅读

简介

这篇文章主要分享博客里涉及的Ruby, Rails,前端CSS,JS,ubuntu系统命令等知识。如果有什么不解的地方可以通过http://liuzhen.me页面下方的二维码扫描加我微信。

  • Ruby是一种纯粹的面向对象编程语言。它由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)创建于1993年。

  • Ruby on Rails(官方简称为Rails,亦被简称为RoR),是一个使用Ruby语言写的开源Web应用框架,它是严格按照MVC结构开发的。它努力使自身保持简单,来使实际的应用开发时的代码更少,使用最少的配置。指南: https://ruby-china.github.io/rails-guides/

  • CSS 指层叠样式表, 你在页面看到的展示效果都是通过CSS做出来的,页面的布局,字体大小,颜色,边框,菜单等等. 详情可以查看: http://www.runoob.com/css/css-intro.html

  • JS 是属于网络的脚本语言, 能做的事太多了,像我博客里的相册功能,时间线都是JS做出来的效果。

安装Rails环境

你可以通过搜索 Mac/windows/ubuntu install rails 来找到相关文档,这里提供ubuntu 16.04版本的安装文档: https://gorails.com/setup/ubuntu/16.04 , Mac的安装文档: https://ruby-china.org/wiki/mac-nginx-passenger-rails

创建一个Rails项目

安装好Rails环境之后,你可以创建一个Rails项目了,如果你从来没用过Rails,可以先用15分钟学习一下 Rails入门, 了解Rails MVC结构。

如果你对Rails有一定的了解,可以按照这个模版 https://github.com/80percent/rails-template 提供的操作步骤, 创建一个Rails项目,使用这个模版创建Rails项目的好处是,这个模版相当于一个全家桶,预先添加一个项目经常需要使用的Gem包,发布需要的puma, mina, monit, nginx配置文件,关于这几个东西是什么,有什么用后面会讲到。

启动Rails

$ rails s

访问 localhost:3000 就能看到 hello world 页面了。

创建数据模型

我的博客在设计之初只想要文章,相册,简历这几个功能,这三个功能比较相似,都有标题,内容和可有可无的描述。所以我就用了单表继承,建了个base表。

$ rails g model Base title:string content:text subtitle:string type:string

type字段就是用于单表继承。

执行完这条命令之后,你会看到 db/migrate/xxxx_create_bases.rb 多了一个这样的文件,里面的内容是:

class CreateBases < ActiveRecord::Migration[5.1]
  def change
    create_table :bases do |t|
      t.string :title
      t.string :subtitle
      t.text :content
      t.string :type
      t.timestamps
    end
  end
end

t.timestamps 是时间戳,系统会自动在这个表里面加上 created_at, updated_at 两个字段。

添加完之后,需要把做一下数据迁移,我一开始学rails的时候对 数据迁移 这个词很不理解。其实数据迁移的意思就是,我们现在通过命令创建了个数据表的文件,但是这个文件没有被执行,不执行数据库里就还没有这张表,只有在执行了 rails db:migrate 之后,rails才在数据库里把这张表给加上,这个操作就叫做 数据迁移。

创建完了Base表,现在就要创建文章表了 Article, 我们需要添加一个 app/models/article.rb 文件,写上:

class Article < Base
end

因为Article继承了Base, 所以就拥有了Base的所有字段了。

你可以通过 rails c 从控制台输入 Article.new 可以看到:

irb(main):006:0* Article.new
=> #<Article id: nil, title: nil, subtitle: nil, content: nil, type: "Article", created_at: nil, updated_at: nil>

type字段自动就是Article, 这是Rails的一个特性,单表继承。

输入Article.all, 看到的sql语句实际是从bases里查询type为Article的所以记录。

irb(main):007:0> Article.all
Article Load (127.0ms)  SELECT  "bases".* FROM "bases" WHERE "bases"."type" IN ('Article') LIMIT $1  [["LIMIT", 11]]

相册表Photo,简历表ResumeArticle的创建方式相同.

表创建好了,我们就可以创建Controller了,Controller需要区分前端和后端,前端就是提供给用户查询的,后台是提供自己添加,更新,删除操作的。另外后台因为是管理的地方所以不能让所有人都访问,所以需要设置成通过用户名和密码登录。这样别人就无法访问你的后台。

后端设计

为了与前台有所区分,所以需要加一下命名空间: 这里设置成 admin. 先在 config/routes.rb 里添加路由,

Rails.application.routes.draw do
  namespace :admin do
    root 'dashboard#index', as: 'root'
    resources :articles
    resources :photos
    resource :resume, only: [:edit, :update]
  end
end

root 'dashboard#index', as: 'root' 设置后台的root路由。使用 rails routes 命令可以查看具体的路由信息。

控制器

controllers 目录下添加admin目录,这个目录下用于存放所有的后台文件,后台添加一个 app/controllers/admin/base_controller.rb 文件,继承了 ApplicationController, 这么做是为了admin下的所有controller继承 Admin::BaseController 后,用户访问后端链接就会先校验当前用户是否登录,如果没有登录就跳转到登录页面。 代码如下:

class Admin::BaseController < ApplicationController
  layout 'admin'
  before_action :authenticate_user
  def authenticate_user
    unless session[:login]
      redirect_to new_session_path
    end
  end
end

因为article, photo, resume这几个功能比较相似,所以我只讲一下article控制器:app/controllers/admin/articles_controller.rb

代码:

class Admin::ArticlesController < Admin::BaseController
  def index
    @articles = Article.all.order(created_at: 'DESC').page(params[:page])
  end
  def new
    @article = Article.new
  end
  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to admin_articles_path
    else
      render 'new'
    end
  end
  def edit
    @article = Article.find(params[:id])
  end
  def update
    @article = Article.find(params[:id])
    if @article.update(article_params)
      flash[:notice] = '更新成功'
      redirect_to admin_articles_path
    else
      render 'edit'
    end
  end
  def destroy
    @article = Article.find(params[:id])
    if @article.destroy
      flash[:notice] = '删除成功'
    else
      flash[:notice] = "删除失败, 原因: #{@article.errors.messages.to_s}"
    end
  end
  private
  def article_params
    params.require(:article).permit(:title, :subtitle, :content)
  end
end

控制台里面很简单,就是增,删,改,查。需要注意的就是redirect_to, render的区别,什么时候要用render, 什么时候用redirect_to.

render 是指直接熏染某个页面.

redirect_to 是指告诉浏览器,让浏览器再重新发送一个指定路由的请求操作。

如:create action 里写到如果保存成功就 redirect_to admin_articles_path, 如果失败就 render 'new'.

  1. 假如保存成功,就会告诉浏览器, 让浏览器再向服务器发送一个admin/articles路由请求,然后进入index action里,查询所有Action记录,再熏染index.html页面,返回给浏览器。

  2. 假如保存失败,就用用户填写的@article信息熏染new.html页面,并用flash里的信息,告诉用户提交失败的原因,如果失败后用 redirect_to new_admin_articles_path,也能跳转到new页面,但是用户提交的信息就没有了。

view

.row
  .offset-md-2.col-md-8
    = simple_form_for [:admin, @article] do |f|
      = f.error_notification
      = f.input :title
      = f.input :subtitle
      = f.text_area :content, id: 'editor_content', class: 'simditor', autofocus: true
      = f.submit '提交', class: 'btn btn-primary'
      = link_to '取消', admin_articles_path
javascript:
  new Simditor({
    textarea: $('#editor_content'),
    toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', '|', 'blockquote', 'code', 'table', 'link', 'image', 'hr', 'indent', 'outdent', 'alignment']
  });

这个有点需要讲的是编辑器使用了simditor插件,具体要加哪些信息可以看一下这个文档: http://simditor.tower.im/, 但是要支持上传图片功能需要在admin下添加一条路由: post '/upload', to: 'photos#upload', 在photos controller里添加一个upload action,把上传的图片保存到数据库。

前端设计

前端的controller继承ApplicationController,前端的因为只设计到查询,所以添加路由的时候加上only, 如: resources :articles, only: [:index, :show], 就只添加两条路由,如果不加only默认会创建 7 条路由。

前端功能主要就涉及到css.

css调试步骤:

  1. 右击选择'检查',就能打开控制台,在控制台处,通过点击(2) 处的图标,可以选择页面上任意节点,选择后(3)处会显示这个节点所对应的CSS样式。同样在style处可以通过添加和注释css来对页面样式进行调试。

样式这里涉及的东西太多,我不一一讲解,只讲一些我认为值得讲一讲的知识点。如果想学习更多的css样式知识,可以在文章开头处提供的文档查看学习。

  1. 文章的展示对字体,间距,背景,颜色等等都要求很高,如果设计的不好,文章看久了就容易累,而且容易给别人一种不想去看的感觉。如果间距很窄,一大段落全是文字,就给人一种很不舒服的感觉。如果你对这些信息了解不多,不知道把这些值设置成多少比较好,也不要担心,找一个你觉得文字展示效果看起来很舒服的网站,打开他的控制台,看一下这个网站上这些信息设置的值是多少,跟着一样设置就行了。具体的细节可以再另做调整。

  2. 博客的页面底部用的fa字体,在gemfile里添加 font-awesome-sass 后,就能展示出这些字体图标。但是目前的字体中没有支付宝的字体图标,你先不要看代码,想一想,如果是你,你要怎么实现一个跟fa字体相同效果的图标,这个图标带有hover效果,当鼠标放上去的时候背景变成了蓝色。

我的实现方法:

一开始我想的是用一个黑白图片代替,弄完之后我发现hover效果无法实现。于是我就用一个背景透明只有一个支字的图片代替,设置border-radius,background-color和字体达成一致效果,当鼠标放上去的时候就改变background-color: #0085A1;

代码:

footer .fa-alipay {
    border-radius: 50%;
    margin-bottom: 4px;
    background-color: #222529;
    width: 41px;
}
footer .fa-alipay:hover {
    background-color: #0085A1;
}

调试页面上关于hover,visited, focus, active效果,可以像图片中勾选来查看相应的样式效果。

时间线

时间线是用的一个js库,https://github.com/RyanFitzgerald/vertical-timeline, 具体可以查看文档。值得说一下的是,一开始看到这个时间线的效果是在一个网站看到的。然后我通过页面控制台,看到里面class名称命名很规范,所以感觉是个js库,直接在google搜索 cd-timeline-block 第一个结果就是这个库的信息。除了这种方式,还可以通过控制台的Sources查看assets文件信息,一般都是经常压缩的,但是有些外部库是有注释的,会写上这个是来自哪个库之类的信息。不过最简单快速的办法还是用google搜索来的快一点。如果你搜的class名字没有找到相应的信息,可以换个class名字试试。

另外一个要说的是,这个JS库里的一个js文件main.js, 与turbolink一起加载,没生效,加载的时候就没被执行,然后我就把它用$(document).on 'turbolinks:load', 加载就好了。

相册

博客里我最喜欢的就是这个相册功能了,当初也是看了这个翻书的效果,我才有重写博客的冲动。看到这个js库是在github Trending上, 这上面会推荐github上比较火的项目。这个库的地址: http://www.turnjs.com, 这里面提供了几个demo. 这个turnjs用的 yepnope 加载js,这么加载是因为,有些内容需要在其他文件加载之后去执行。但是有个问题是在生产环境这些js文件都是被转译了的。所以直接在yepnope里面写上文件名,在生产环境上就会找不到对应的文件。对于这个我没有想到特别好的处理办法,就用

$('head').append('<%= javascript_include_tag 'turn.min.js' %>')

来加载文件,然后再执行yepnope({complete: loadApp})。如果你有更好的办法可以交流一下。

其他知识点

  • 效果支持手机端页面需要加上: meta width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no

  • 前端和后端的JS, CSS尽量分开,这样加载速度会快一些

  • 使用的外部库最好重新命名成可读名称, 不然时间长了你就不知道这个库是干什么的了. 比如我用了 timeline 的JS库, 里面有个main.js的文件, 我就把它重命名为 timeline-main.js, 这样不需要再加注释来说明这个文件是做什么的了.

发布

发布需要在服务器上安装好rails后,配置nginx.conf,一般放在/etc/nginx/conf.d/xxx.conf文件.

puma.rbdeploy.rb 配置文件是mina部署的相关配置信息,具体操作了什么可以通过bundle exec mina deploy -v来查看:

$ bundle exec mina deploy -v
-----> Creating a temporary build path
-----> Server: liuzhen.me
-----> Path: /home/ruby/RBlog
       $ echo "-----> Branch: master"
-----> Branch: master
-----> Using RVM environment "2.3.1"
-----> Quiet sidekiq (stop accepting new work)
-----> Fetching new git commits
       $ (cd "/home/ruby/RBlog/scm" && git fetch "https://github.com/liuzhenangel/RBlog.git" "master:master" --force)
-----> Using git branch 'master'
       $ git clone "/home/ruby/RBlog/scm" . --recursive --branch "master"
       Cloning into '.'...
       done.
-----> Using this git commit
       $ git rev-parse HEAD > .mina_git_revision
       $ git --no-pager log --format="%aN (%h):%n> %s" -n 1
       liuzhenangel (eb06b54):
       > update timeline
       $ rm -rf .git
-----> Symlinking shared paths
-----> Installing gem dependencies using Bundler
       $ bundle install --without development test --path "vendor/bundle" --deployment
-----> DB migrations unchanged; skipping DB migration
-----> Skipping asset precompilation
-----> Cleaning up old releases (keeping 5)
-----> Deploy finished
-----> Building
-----> Moving build to /home/ruby/RBlog/releases/41
-----> Build finished
-----> Launching
-----> Updating the /home/ruby/RBlog/current symlink
-----> Restart Puma -- hard...
-----> Stopping Puma...
-----> Starting Puma...

从这些日志信息可以看出, 首先会根据你配置的服务器的域名和用户名ssh到服务器上,加载ruby环境,从github拉取最新代码,安装gem包,如果css, js, 图片有更新就重新编译压缩js, css, 图片, 执行 db:migrate 数据迁移, 首次发布还会执行rails db:create来创建数据库。然后重启puma.

为什么要nginx,puma

nginx相当于一个代理,当你在浏览器输入:http://liuzhen.me 的时候,先通过DNS找到这个域名对应的IP,然后通过路由到达IP所在的服务器上,服务器发现用户请求的是 liuzhen.me,然后nginx就根据配置文件里配置的 liuzhen.me 找到对应的项目,这个Rails项目是由puma启动的,然后nginx就把这个事交给puma, puma收到后就根据路由去到对应的controller,然后返回对应的页面给到浏览器。

monit 是什么

没有monit也能发布成功,但是有时候你的puma可能异常关掉了,如果有monit的话,就能时刻监听这个进程是不是启动状态,一旦关闭了,就重新启动。

博客地址: http://liuzhen.me

博客代码: https://github.com/liuzhenangel/RBlog

原文来源: http://liuzhen.me/articles/16

共收到 2 条回复
1楼 已删除

女神啊!

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册