Ruby+Vue先後端分離嘗試

後端：Ruby On Rails提供API

前端：HTML+Vue+ajax

首先，初始化Ruby On Rails項目，並新建EmployeeModel和對應Controller，添加對應的CRUD方法，

class EmployeesController < ApplicationController

  def index
    #@employees = Employee.all
    json_str = Employee.all.to_json   
    render :json=>json_str, status=>'200'
  end
  def new
  end
  def show
    @employee = Employee.find(params[:id])
  end
  def create
    @employee = Employee.new(employee_params)
    @employee.save
    json_str = @employee.to_json
    render :json=>json_str, status=>'200'
  end
  
  def update
    @employee = Employee.find(params[:id])
    if @employee.update(employee_params)
      json_str = @employee.to_json   
      render :json=>json_str, status=>'200'
    else
      render 'edit'
    end
  end
  
  def destroy
    @employee = Employee.find(params[:id])
    @employee.destroy
    json_str = @employee.to_json   
    render :json=>json_str, status=>'200'
  end
  private
    def employee_params
      params.permit(:name, :gender,:age,:telephone)
    end
end

先後端都是經過JSON進行通訊的，因此對應的方法若是有返回值，須要轉成JSON格式，不然會報錯。

而後，前端HTML界面根據須要經過ajax調用對應的API接口，

$.ajax({
    url: url,
    type: 'GET/Post',
    dataType: 'json',
    data: data,
    success: callback,
    error: function(xhr, errorType, error) {
        alert('error: ' + error)
    }
})

前端效果圖，頁面佈局來源：

須要注意的地方，主要在服務端，由於涉及到跨域以及CSRF驗證，因此須要在服務端進行相應的配置

一、跨域，打開Gemfile添加rack-cors gem，並install，代碼以下：

gem 'rack-cors', :require => 'rack/cors'

打開config/application.rb文件，添加如下代碼，爲了測試方便，把put和delete操做也添加進去：

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :post,:put,:delete, :options]
  end
end

二、去掉CSRF驗證，爲了測試正常進行，因此暫時去掉，正常狀況下不建議去掉CSRF驗證；在application_controller.rb文件中添加  

protect_from_forgery with: :null_session

三、解決掉跨域和CSRF驗證之後，調用GET、POST方法是都沒問題，可是在調用PUT或者DELETE方法時，會提示找不到對應的路由設置，解決方法：在routes.rb文件中添加

match '*path' => 'application#cors_preflight_check', :via => :options

此時的頁面沒有權限認證，是不安全的，全部能訪問頁面的人均可以進行增刪改查操做，能夠經過如下方法實現權限認證，

一、服務端提供用戶認證方法，在用戶登陸時，對用戶提供的用戶名和密碼信息進行驗證，若是用戶名和密碼匹配則驗證經過容許登陸，不然驗證失敗，

  def create
    user = User.find_by(name: params[:username])
    if user && user.authenticate(params[:password])
        log_in user
        json_str = user.to_json
        render :json=>json_str, status=>'200'
    else
        #...todo
    end
  end

二、前端根據服務端的返回信息，若是驗證經過則把用戶信息記錄在sessionStorage中，並進行後續操做，若是驗證失敗，則提示用戶從新輸入用戶名和密碼，

三、用戶登陸之後，在界面中進行須要權限認證的操做時，須要由前端發起ajax請求，確認該用戶是否有相應的權限，首先在sessionStorage中取出用戶惟一性標示信息，若是sessionStorage中找不到對應的信息，則直接返回當前用戶無權限，提示用戶登陸，若是在sessionStorage中找到標示信息，則調用服務端API，sessionStorage標示信息做爲入參傳入，服務端處理過程

  # 返回當前登陸的用戶（若是有的話）
  def current_user
    @current_user ||= User.find_by(name: params[:userName])
  end
  
  # 若是用戶已登陸，返回 true，不然返回 false
  def logged_in?
    !current_user.nil?
  end

四、根據入參能夠找到對應的用戶信息，則認爲該用戶有權限進行相應操做，若是找不到對應的用戶信息，則認爲該用戶沒有權限進行相關操做。

在登陸的狀態下，能夠進行刪除修改操做，在用戶註銷退出之後，若是在執行刪除操做時，會提示用戶登陸：

PS：這只是爲了測試用例的完整性採用的解決方案，權限認證應該有更嚴謹的解決方案，這裏就再也不具體討論了。