尝试使用React和Rails创建应用程序【TODO应用】

2 年 ago
新, 韵
3 minutes

在Rails上进行反应

■ 以JSON格式返回数据
■ 负责MVC中的M和C部分

回应
■ 承担MVC中的V角色

JSON是什么？

JSON是“JavaScript对象通知”的缩写，它是用于处理JavaScript值的文档规范。最初它只是一种在JavaScript中处理值的格式，但由于它方便地用于JavaScript前端的普及，它开始被用作与后端通信时的格式。

准备环境

//プロジェクトを作成する
rails new <プロジェクト名> --webpack=react -T

yarn add react-router-dom axios styled-components react-icons react-toastify
    • react-router-dom：Reactでのroutingの実現

 

    • axios：サーバとのHTTP通信を行う

 

    • styled-components：CSS in JS のライブラリ

 

    • react-icons：Font Awesomeなどのアイコンが簡単に利用できるライブラリ

 

    react-toastify ユーザーに対してエラーその他アラートを表示させるときに便利な機能

创建模型、表格和数据

rails g model todo name is_completed:boolean

def change
  create_table :todos do |t|
    t.string :name, null: false
    t.boolean :is_completed, default: false, null: false

    t.timestamps
  end
end

rails db:migrate

SAMPLE_TODOS = [
  {
    name: 'Going around the world',
  },
  {
    name: 'graduating from college'
  },
  {
    name: 'publishing a book',
  }
]

SAMPLE_TODOS.each do |todo|
  Todo.create(todo)
end

rails db:seed

创建一个控制器

创建一个名为site_controller.rb的文件在app/controllers目录下。

class SiteController < ApplicationController
    def index
    end
  end

请在app/views/下创建一个名为site/index.html.erb的文件。

<div id="root"></div>

在app/controllers/目录下创建api/v1文件夹和todo_controller.rb文件。

class Api::V1::TodosController < ApplicationController
  def index
    todos = Todo.order(updated_at: :desc)
    render json: todos
  end

  def show
    todo = Todo.find(params[:id])
    render json: todo
  end

  def create
    todo = Todo.new(todo_params)
    if todo.save
      render json: todo
    else
      render json: todo.errors, status: 422
    end
  end

  def update
    todo = Todo.find(params[:id])
    if todo.update(todo_params)
      render json: todo
    else
      render json: todo.errors, status: 422
    end
  end

  def destroy
    if Todo.destroy(params[:id])
      head :no_content
    else
      render json: { error: "Failed to destroy" }, status: 422
    end
  end

def destroy_all
    if Todo.destroy_all
      head :no_content
    else
      render json: { error: "Failed to destroy" }, status: 422
    end
  end

  private

  def todo_params
    params.require(:todo).permit(:name, :is_completed)
  end
end

编辑config/routes.rb文件。

root to: redirect('/todos')

get 'todos', to: 'site#index'
get 'todos/new', to: 'site#index'
get 'todos/:id/edit', to: 'site#index'

namespace :api do
  namespace :v1 do
    delete '/todos/destroy_all', to: 'todos#destroy_all'
    resources :todos, only: %i[index show create update destroy]
  end
end

编辑app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :null_session
end

禁用Turbolinks

Turbolinks是一个从Rails 4开始正式引入的用于加速页面转换的库。尽管Turbolinks本身是一个JavaScript库，但Rails已默认将其作为Gem方便使用。

删除app/views/layouts/application.html.rb文件中的第2行。

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
//書き換える

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

编辑app/javascript/packs/application.js


//コメントアウトする
// Turbolinks.start()

将app/javascripts/packs/hello_react.jsx更改为app/javascripts/packs/index.jsx。

请参考以下网站。

【React on Rails】使用React和Rails创建TODO应用（PART1）利用React创建Rails项目的方法
什么是JSON？用例和使用方法的解释，带有示例！
使用React.js库”react-toastify”来实现警报功能

bannerAds