Tạo một ứng dụng với Rails API backend và VueJs frontend

Bài viết này sẽ hướng dẫn bạn tạo 1 ứng dụng Rails API backend và VueJs frontend. Nếu bạn chưa tìm hiểu về API bạn có thể đọc thêm tại đây

Your Rails App

Rails sẽ chịu trách nhiệm cho tất cả các phần liên quan đến xử lý dữ liệu, phần mà người dùng sẽ không thấy được khi thực hiện bất kỳ thao tác nào trên giao diện người dùng. Điều này có nghĩa là nó bao gồm quản lý Postgres Database, các Models, các Controllers và cả dữ liệu JSON trả về. Ứng dụng VueJs được viết riêng biệt sẽ xử lý phần giao diện người dùng, bài viết này sẽ tạo 1 ứng dụng Rails riêng biệt chỉ xử lý phần server bằng cách sử dụng --api khi tạo mới 1 Rails app. Thêm nữa bài viết sẽ sử dụng cơ sở dữ liệu Postgresql thay cho việc sử dụng SQlite mặc định, để sử dụng được ta sẽ thêm -d postgresql khi tạo app. Bạn có thể sử dụng mysql cho cơ sở dữ liệu. Dưới đây là trường hợp sử dụng Postgresql cho cơ sở dữ liệu.

rails new sandbox --api -d postgresql

Bởi vì Rails app và VueJs app được lưu trữ trên 2 server riêng biệt nên điều đầu tiên chúng ta cần xử lý là CORS (Cross-Origin Resource Sharing). Rất may mắn với Rails chúng ta sẽ không phải quá bận tâm đến vấn đề này. Tìm file theo đường dẫn sau config/initialzers/cors.rb và sửa file như sau:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

"* " biểu thị cho cả Origins và Resource. Trong môi trường phát triển bạn có thể sẽ muốn điền tên miền cụ thể cho ứng dụng của mình.

Tiếp đến, bạn cần thêm vào Gemfile gem sau: gem "rack-cors". Sau khi thêm gem vào ta chạy lệnh trên terminal:

bundle install

Tiếp theo chúng ta sẽ tạo Model đầu tiên cho ứng dụng. Tuy nhiên trước khi tạo chúng ta cần setup database

rails db:create

Sau đó chúng ta tạo 1 scaffold cho model

rails generate scaffold Contacts name:string relationship:string

Sau khi chạy lệnh trên xong sẽ tự động generate ra 1 file contact.rb có nội dung như sau:

class CreateContacts < ActiveRecord::Migration[5.2]
  def change
    create_table :contacts do |t|
      t.string :name
      t.string :relationship

      t.timestamps
    end
  end
end

Chúng ta chạy lệnh "rails db:migrate" để tạo bảng.

Chúng ta sẽ tạo resource đầu tiên cho backend. Bạn cũng có thể thấy trong file routes.rb đã tự tạo sẽ resourse