rina (angel)

1024 节，来测测你是哪款极客程序员？ [集赞有礼品哦]

rina — Wed, 20 Oct 2021 17:27:56 +0800

1024 程序员节

我们向所有极客精神的程序员致敬

他们桀骜不驯或谦卑内敛

他们沉浸在代码世界中

善于用不同角度去思考

既不墨守成规，也不安于现状

他们拥有分享精神

正因为他们大爱着这个世界

敲透代码只是表象

改变世界才是梦想

数字化时代的今天，极客精神的程序员们不断的在改变着这个世界。

极客之王、“Linux 之父”李纳斯·托沃兹就曾说过：“真正的代码质量意味着让程序员为他们写的代码自豪，参与到编写代码之中并把它当做自己个人的事情，并把这件事情做到极致”。

今年 1024 程序员节，该怎么发朋友圈，才能让不善言语的程序员们极客（装逼）指数上升？

ShowMeBug 推出非常有趣的极客型程序员自测活动，立马测出你的极客咖位！

识别下方海报二维码，立即开始测试

截止目前，我们参与的上千名程序员中，仅有 1 位是 Linus 型程序员，看来 Linus 型程序员还是少数派的，毕竟是金字塔顶端的大神了。

测试结果已经在朋友圈刷屏了，平时不发朋友圈的程序员们也晒出自己标签，比以往任何时候都热闹。

当然啦，除了有意思的测试，ShowMeBug 还为参与测试的程序员朋友送上精品好礼：

奖品领取规则：

1、将测试结果海报分享至朋友圈，并集齐 1024 个赞（能实现吗？动动你的小脑筋试试吧~）； 2、领取时间：10 月 24 日晚上 10:24 兑奖； 3、凭借截图添加下方客服微信领取。

程序员节，当然少不了与技术大神交流的机会，10 月 24 日 20:00 在 ShowMeBug 视频号直播间邀请多位技术大神畅聊「从 Markdown 程序员到技术极客养成记」等话题。

与大咖互动，抢先一步！快识别下方海报二维码，提前预约，立即锁定！

最后，预祝大家 1024 程序员节快乐！

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

rina — Sat, 23 Dec 2017 00:26:34 +0800

简介

这篇文章主要分享博客里涉及的 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，简历表Resume和Article的创建方式相同。

表创建好了，我们就可以创建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'.

假如保存成功，就会告诉浏览器，让浏览器再向服务器发送一个admin/articles路由请求，然后进入index action里，查询所有Action记录，再熏染index.html页面，返回给浏览器。
假如保存失败，就用用户填写的@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 调试步骤：

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

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

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

辞旧迎新之际, 我给博客换了新装

rina — Mon, 18 Dec 2017 10:20:57 +0800

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

这个博客的诞生是因为平时在浏览其他网站及关注一些 js 库时发现一些特别喜欢的东西，所以才给了我做这件事的动力。其实做完这个项目真正花费的时间并不多，比较难的是要让自己愿意来做这件事。

整个项目做下来，对我来说，最难的不是技术实现，而是为博客每个主题找到合适的背景图片，简直就是大海捞针。别人给我推荐了这个图片库，经过长时间的寻找，终于找到了几张让我比较满意的的图片。这个工具不错，有需要的可以收藏一下。

新的博客系统主要功能有：

后端：数据统计，后台文章管理，相册管理，个人简历管理
前端：文章列表，相册展示，时间线等

Demo

项目 Demo 请访问：http://liuzhen.me

项目 github 代码：https://github.com/liuzhenangel/RBlog

核心技术框架

Ruby on Rails 5.1.4
bootstrap 4
font-awesome
figaro
postgres
slim
high_voltage
carriewave & upyun
sidekiq
kaminari
mina
puma
lograge
simditor
turn.js

开发环境准备

第一步，安装项目依赖

$ bundle install

第二步，启动服务

$ rails s

第三步，浏览器访问：http://localhost:3000

结束。

如何发布？

第一步，配置 nginx

先根据项目里的 config/deploy/production.rb, /config/deploy.rb, config/puma.rb, /config/nigix.conf 文件，修改其中的配置，然后将 /config/nigix.conf 文件复制到你的服务器上 nginx 所在目录的 /etc/nginx/conf.d 目录下，命名为 xxx.conf 的文件。然后重启 nginx.

第二步，在服务器上初始化

$ mina setup

第三步，发布

$ mina deploy

学习参考资料

Rails 文档：http://edgeguides.rubyonrails.org/api_app.html

使用模板创建 Rails 项目：https://github.com/80percent/rails-template

ubuntu16.04 安装 rails: https://gorails.com/setup/ubuntu/16.04

simditor 编辑器：http://simditor.tower.im/

startbootstrap-clean-blog 前端样式：https://startbootstrap.com/template-overviews/clean-blog/

sb-admin 前端样式：https://startbootstrap.com/template-overviews/sb-admin/

turnjs 前端样式：http://www.turnjs.com

timeline 前端样式：https://github.com/RyanFitzgerald/vertical-timeline

图片库：https://unsplash.com

引荐 Vue.js 项目

项目 Demo 请访问：http://v2ex.liuzhen.me/

项目代码：https://github.com/liuzhenangel/v2ex_frontend

引荐 React.js 项目

项目 Demo 请访问：http://ruby-china.liuzhen.me/

项目代码：https://github.com/liuzhenangel/react-ruby-china

GitHub 个人账户如何删除 Billing 账号？

rina — Tue, 21 Nov 2017 11:38:51 +0800

github 帮助文档只有组织账户下删除的方式：https://help.github.com/articles/removing-a-billing-manager-from-your-organization/

个人账户绑定账号后没有删除接口。。。。

有没有其他方式删除？

发现个关注统计数字的 Bug

rina — Thu, 27 Apr 2017 12:03:59 +0800

使用金数据被感动到了

rina — Tue, 03 Jan 2017 16:19:22 +0800

事情是这样的。

有个问卷调查的需求，一开始用的问卷星，现在想把数据集成到自己平台上。因为前段时间一直被安利金数据很好用，于是我在 12 月底注册了个账号，想看看能不能直接把结果弄过来，结果在设置 -> 结果分享看到了这个。

然后直接在项目里加了一行：

iframe.embed-responsive-item src="https://jinshuju.net/f/5PnXLt/xxx" id='survey_iframe' 就可以完美结合了。是不是觉得 so easy!

当时看到免费版的提交量是 50 条/月，为了满足我的好奇心，于是在 12 月 30 号，我成功把 50 条都用完了。我当时想着，反正马上就 1 号了。然而到了 1 月 3 号还是显示提交量用完了。于是我给金数据 HR 发了封邮件，结果收到了这个，没想到还关注了我的 Vue.js 前端项目，好感动啊。决定成为金数据终身粉了，有木有。

V2EX 克隆项目升级 Vue.js 1.x to 2.0

rina — Sat, 15 Oct 2016 13:45:40 +0800

Demo: http://v2ex.liuzhen.me/

项目地址：https://github.com/liuzhenangel/v2ex_frontend

项目升级更新详情：https://github.com/liuzhenangel/v2ex_frontend/commit/8bc0a8d87728e9e08f9207ebe0ff6e806cc704f2

升级步骤：

第一步，安装 vue-migration-helper CLI 工具，以帮助从 Vue 1.x 迁移到 2.0。它扫描文件以获取 Vue 特定的代码，并在找到过时的模式时提供详细的警告。

# install
npm install --global git://github.com/vuejs/vue-migration-helper.git

# navigate to a Vue 1.x project directory
cd path/to/my-vue-project

# scan all files in the current directory
vue-migration-helper
# scan all files in specific sub-directories
vue-migration-helper src folder-a folder-b

第二步，根据提示信息修改文件中对应的地方。

另：v2ex_frontend 项目 1.0 引用了 vue-paginate, 这个 package 不支持 Vue.js 2.0, 目前已经删除使用。

2.0 相关文档

vue.js 2.0 中文文档：http://vuefe.cn/guide/

vue.js 2.0 英文文档：http://rc.vuejs.org/guide/installation.html

vue-router 2.0 文档：http://router.vuejs.org

基于 React.js + Redux + Bootstrap 的 Ruby China 示例

rina — Tue, 11 Oct 2016 17:54:19 +0800

最近在学习前端的各大流行框架，主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本，最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本，两个项目都支持响应式布局。不得不说这是学习新知识的一个有效途径。这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考。

Vue.js + V2EX 项目

代码地址：https://github.com/liuzhenangel/v2ex_frontend

Demo: http://v2ex.liuzhen.me

关于这个项目的一些介绍和学习资料可以访问这里查看 .

这篇文章主要介绍 React.js 的相关知识。

React.js + RubyChina 项目

代码地址：https://github.com/liuzhenangel/react-ruby-china

Demo: http://ruby-china.liuzhen.me

项目介绍

react-ruby-china 项目是一个利用 react, react-dom, react-redux, react-router, redux, es6, redux-thunk 实现的 RubyChina 社区克隆项目。

这是一个前后端分离项目，前端主要是 react, redux, es6, css 框架使用了 bootstrap. 后端利用 ruby-china 开放的 api. 支持响应式布局。部分功能仍在持续完善中。

开发环境搭建

可以根据下方列出的官方文档里面有详细说明，这里介绍一下 create-react-app 这个命令行脚手架工具。npm install create-react-app -g 之后执行 create-react-app my-app, 然后 npm start 就能运行了. 关于 create-react-app 详情可以点击这里查看。

核心技术框架

react
react-dom
react-router
redux
redux-thunk
react-md-editor
isomorphic-fetch
react-paginate
react-redux
marked
es6-promise
classnames

学习参考资料

在学习 React 过程中，React.js 文档做的没有 Vue.js 的好，文档中的例子各种不同语法。对着照做不一定对，也不方便查询，踩过很多坑后给大家做个分享。

React 中文文档 (这个文档很好查询，但是很多内容写的太简单了没讲清楚，而且内容不全): https://hulufei.gitbooks.io/react-tutorial/content/index.html

React 官方英文文档：https://facebook.github.io/react/docs/getting-started.html

React 中文文档 (这个文档比较差): http://reactjs.cn/react/docs/getting-started-zh-CN.html

极客学院提供的 React 中文文档：http://wiki.jikexueyuan.com/project/react/

另一个 Reac 中文文档 (这个比较全面，但是不便于搜索): http://www.phperz.com/article/15/0712/140537.html

React Router 中文文档：https://react-guide.github.io/react-router-cn/

RubyChina API: https://ruby-china.org/api

ReacChina 社区 (这里面有很多资源): http://react-china.org/

ES6 文档：http://es6.ruanyifeng.com/#docs/intro

Redux 介绍：http://www.alloyteam.com/2015/09/react-redux/

用 Vue.js 实现了一个 V2EX 克隆项目

rina — Mon, 19 Sep 2016 13:54:06 +0800

Rails 程序员一枚，最近在学习 Vue.js, 写了个项目，有兴趣的同学可以 start 一下.

Demo

项目 Demo 请访问：http://v2ex.liuzhen.me/

项目代码：https://github.com/liuzhenangel/v2ex_frontend

项目介绍

v2ex_frontend 项目是一个利用 vue.js 和 v2ex api 实现的 V2EX 社区克隆项目，主要目的是为了学习 vue.js, 很适合学习 vue.js 的朋友参考。

这是一个前后端分离项目，前端主要是 vue.js 和 vue-router, css 框架使用了 uikit. 后端利用 v2ex 开放的 api. 支持响应式布局。

核心技术框架

vue.js
uikit
lodash
vue-paginate
vue-router

系统依赖

Node ( >= 6.5 )
npm ( >= 3.10.6 )

学习参考资料

vue.js 文档：https://vuejs.org.cn/guide/overview.html

vue-router 文档：http://router.vuejs.org/zh-cn/index.html

lodash 文档：https://lodash.com/docs/4.15.0

uikit 文档：http://getuikit.com/index.html

v2ex api: https://gist.github.com/fanzeyi/6951803, https://www.v2ex.com/p/7v9TEc53

[已解决] 根据 Sunspot 文档配置, 查询 boolean 字段时, 没有查询到任何匹配结果, google 无果, 求指教?

rina — Mon, 29 Feb 2016 21:11:58 +0800

sunspot 文档：https://github.com/sunspot/sunspot 配置：

class Project < ActiveRecord::Base
  searchable do
   text :name, :oneword, :description
   integer :category_ids, multiple: true
   integer :city_ids, multiple: true
  boolean :published
 end
end

数据库数据：

 pry(main)> Project.all
  Project Load (2.5ms)  SELECT DISTINCT "projects".* FROM "projects"  WHERE "projects"."deleted_at" IS NULL
=> [#<Project id: 1, name: "baidu", oneword: "Summary", description: "adf", stage: nil, industry: nil, city: "深圳", published: true, created_at: "2016-02-29 03:04:01", updated_at: "2016-02-29 10:30:18", team_story: nil, link: "liuzhen.me", status: "approved", deleted_at: nil>,
 #<Project id: 2, name: "dd", oneword: "dd", description: "ddd", stage: nil, industry: nil, city: "dd", published: false, created_at: "2016-02-29 10:44:23", updated_at: "2016-02-29 10:44:23", team_story: nil, link: "liuzhen.me", status: "drafted", deleted_at: nil>]

执行查询：

 Sunspot.search(Project) do
   with(:published, true)
end.results
D, [2016-02-29T21:03:46.567622 #9580] DEBUG -- :   SOLR Request (43.9ms)  [ path=select parameters={fq: ["type:Project", "published_b:true"], start: 0, rows: 30, q: "*:*"} ]
=> []

Discourse 单点登录

rina — Wed, 28 Oct 2015 17:58:31 +0800

PS: 楼主是个新手，写错的地方还请指正 :)

背景

公司内部有个discourse论谈：http://stage.bbs.uboss.me/, 想将这个论坛上注册功能屏蔽掉，注册登录功能统一到 Rails 项目：http://stage.uboss.me/ 这个网站上登录，帐户也是http://stage.uboss.me/这个网站上的帐户信息。

过程

discourse本身#设置/登录#里有支持 sso 单点登录配置。具体文档信息可以看这里.

参数解析

这里解释一下这几个配置字段的含义：

sso_url: 这个参数的作用是当你点击 discourse 论坛的登录时，要跳转的路径，这里要求统一到http://stage.uboss.me/这里登录，所以地址自然指向这个路径，但是要指出具体指向哪个 action, 因为在这个 action 里要校验传入的 secret 和配置的 secret 是否一致。

sso_secret : 这个 secret 是一个字符串，可以随意填写，但是必须和 action 里校验的一致。

enable_sso : 开启 sso 登录模式。如果误启动了可能进行 discourse 项目，执行：rails c后，设置：SiteSetting.enable_sso = false就可以关闭了。

添加一个 Action

创建一个文件：app/controllers/discourse_sso_controller.rb

这里面要处理两件事：

1. 判断用户是否登录，是：校验密码是否一致。

2. 判断用户是否登录，否：跳转到登录页面

参考代码：

class DiscourseSsoController < ApplicationController

  def sso  
   if current_user
      secret = ENV['SECRET']
      sso = SingleSignOn.parse(request.query_string, secret)
      sso.email = current_user.email
      sso.external_id = ENV['KEY'] # unique to your application
      sso.sso_secret = secret
      redirect_to sso.to_url(ENV['CALLBACK_URL'])
    else
      redirect_to(new_user_session_url(redirect: 'discourse'))
    end
  end

end

这里如果用户没用登录，则跳转到登录页面。登录完成后需要跳转回 discourse 论坛 (此时论坛是登录状态), 所以在请求时将请求地址记录下来方便登录后跳转。

在app/controllers/application_controller.rb中添加

内容如下：

before_action :store_discourse_sso_location

def store_discourse_sso_location
  if request.xhr? or ! request.get?
    return
  end
  if( request.path == discourse_sso_path )
    session[:discourse_sso] = request.fullpath if current_user.blank?
  end
end

在SessionsController判断一下，然后跳转到 session[:discourse_sso] 这个路径。

这里面用到的几个参数解释一下：

配置以下信息`secret`要与 discourse 上的 secret 一致，`key` 取一个唯一值，`callback_url`认证后跳转路径：http://discourse_url/session/sso_login\

SECRET: xxx KEY:123 CALLBACK_URL: http://stage.bbs.uboss.me/session/sso_login

考虑到密码的安全性，使用了 gem figaro, 配置使用文件可以 google 之。

配置路由

在 config/routes.rb 添加一条路由：get '/discourse/sso', to: 'discourse_sso#sso'

这个 url 配置是在 discourse 上配置 sso_url 用到的。

添加 discourse 中的 single_sign_on 文件

放于 lib/single_sign_on.rb

做好了这些之后就可以开始测试了。

此文来自 Rina's Blog

rina (angel)

1024 节，来测测你是哪款极客程序员？ [集赞有礼品哦]

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

简介

安装 Rails 环境

创建一个 Rails 项目

创建数据模型

后端设计

控制器

view

前端设计

时间线

相册

其他知识点

发布

为什么要 nginx，puma

monit 是什么

辞旧迎新之际, 我给博客换了新装

Demo

核心技术框架

开发环境准备

如何发布？

学习参考资料

引荐 Vue.js 项目

引荐 React.js 项目

GitHub 个人账户如何删除 Billing 账号？

发现个关注统计数字的 Bug

使用金数据被感动到了

V2EX 克隆项目升级 Vue.js 1.x to 2.0

升级步骤：

2.0 相关文档

基于 React.js + Redux + Bootstrap 的 Ruby China 示例

Vue.js + V2EX 项目

React.js + RubyChina 项目

项目介绍

开发环境搭建

核心技术框架

学习参考资料

用 Vue.js 实现了一个 V2EX 克隆项目

Demo

项目介绍

核心技术框架

系统依赖

学习参考资料

[已解决] 根据 Sunspot 文档配置, 查询 boolean 字段时, 没有查询到任何匹配结果, google 无果, 求指教?

Discourse 单点登录

背景

过程

参数解析

添加一个 Action

配置以下信息secret要与 discourse 上的 secret 一致，key 取一个唯一值，callback_url认证后跳转路径：http://discourse_url/session/sso_login\

配置路由

添加 discourse 中的 single_sign_on 文件

配置以下信息`secret`要与 discourse 上的 secret 一致，`key` 取一个唯一值，`callback_url`认证后跳转路径：http://discourse_url/session/sso_login\