2018年的技术栈


技术栈

  1. 后端：Rails + gon + jwt + cancancan（权限管理）+ redis + psql
  2. 前端：Vue + axios + vue-router + vue-i18n + vuex + bootstrap + 小程序 + 安卓 + 苹果
  3. 构建部署：Docker + webpacker + capistrano/mina
  4. 测试：circleci + rspec + mocha + GitHub 强制检查
  5. 第三方服务：CDN + 邮件服务 + 短信服务


备注： 框架本身的目的就是通过用学习框架的时间和人力成本来换取开发大型项目的时间和人力成本，当这个大型项目足够大的时候，框架以及各种全家桶带给你的便利才能形成规模效应体现出来。


前端页面


vue目录结构
assets/  
   images/
      logo.png
pack/  (入口文件)
   application.js
   search.js
src/  (设计思想：页面、组件、共享资源 是一个级别，没有包含关系，页面专用的样式和js放在各自的page下面，也可以根据情况直接写在vue里面。)
   pages/
      search/
         app.vue
      admin/
   components/
      material.vue
      cart.vue
   shared/
      reset.scss
      devise.scss
      top_navigate.js
app.vue

在前端使用 Vue 做多页面应用

假设我们有三个页面 /users/ , /users/1 和 /users/new 。


那么每个页面就都会有一个入口 JS 文件，分别叫做 users/index.js, users/show.js 和 users/new.js


每个入口 JS 都引用了 Vue，大概长这样：


import 'initializers' // 各种初始化
import Vue from 'vue'
import axios from 'axios'
import ComponentA from 'components/a'

let app = new Vue({
  el: '#vue-app',
  components: {ComponentA}
})

如果这个页面较复杂，可以引入 Vuex 和 VueRouter（hash模式）。




在局部使用 Vue 做单页面应用

我们的 /admin/ 页面由于不需要 SEO，所以做成了完全的单页面。


后端路由会把 /admin/*path 全部渲染成 /admin/show 页面，VueRouter 接管所有 /admin/*path 路由。

get 'admin/*path', to: 'admin#show', constraints: ->(request) do
  !request.xhr? and request.format.html?
end

我们使用 Webpacker 打包所有前端资源。


后端


后端使用 RESTful API 与前端通信

所有后端接口都是 /api/v1/xxx 的形式，如

GET /api/v1/users
GET /api/v1/users/1
POST /api/v1/users
DELETE /api/v1/users

原则上不允许出现不符合 RESTful 风格的 API，如 /api/v1/createUser。


API 输出格式默认为 JSON。


后端 model 使用 as_json 做 JSON schema，例如 user.rb

def as_json(options = {})
  attributes.merge(
    admin: admin?,
    display_name: display_name
  )
end

后端传数据给JS

后端可以直接将变量传给前端的 window 以减少异步数据请求，如：

class ApplicationController < ActionController::Base
  before_action :set_gon
  def set_gon
    gon.qiniu = QiniuClient.settings
  end
end

这样做了之后，页面的 head 里就会出现

<script>
  window.qiniu = {uptoken:...}
</script>

组件化


所有无 SEO 需求的模块完全组件化

以课程页面为例，课程标题、主讲人等 SEO 信息直接用 Ruby 渲染，评价、问答等信息则使用 Vue 组件来渲染。如

<h1><%= @course.name %></h1>
<router-view></router-view> // 将会载入 <Comments> 组件


身份认证


使用 JWT 做身份认证

我们使用 JWT 做身份认证，同时使用 axios 对 HTTP 响应做拦截，一旦发现 Token 失效则弹出登录提示。




Rails RoutingError (No route matches [OPTIONS][编辑]
Installing and configuring this gem should allow your Rails application to properly process the options request caused by CORS:
https://github.com/cyu/rack-cors
Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.

阅读量: 305
发布于:
修改于: