Ubuntu 20.04搭建Ruby on Rails 7与React全栈项目指南

~/rails_react_recipe/package.json的中文原生解释：

~/rails_react_recipe/package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.1.0",
    "@hotwired/turbo-rails": "^7.1.3",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.1",
    "bootstrap-icons": "^1.9.1",
    "esbuild": "^0.15.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "sass": "^1.54.9"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

使用CTRL+C停止网络服务器。

在这一步中，您配置了您的应用程序以使用React作为其前端。在下一步中，您将创建能够创建，读取，更新和删除食谱的模型和控制器。

第六步 – 创建菜谱控制器和模型

现在你已经为应用程序设置了React前端，你将创建一个Recipe模型和控制器。Recipe模型将代表包含有关用户配方信息的数据库表，而控制器将接收并处理创建、读取、更新或删除配方的请求。当用户请求配方时，配方控制器接收该请求并将其传递给配方模型，后者从数据库中检索所请求的数据。然后，模型将配方数据作为响应返回给控制器。最后，该信息在浏览器中显示出来。

从Rails提供的generate model子命令开始创建一个Recipe模型，指定模型的名称以及其列和数据类型。运行以下命令：

rails generate model Recipe name:string ingredients:text instruction:text image:string

上述命令指示Rails创建一个Recipe模型，它包括一个名为name的字符串类型列、一个名为ingredients和instruction的文本类型列，以及一个名为image的字符串类型列。本教程将模型命名为Recipe，因为Rails中的模型使用单数名称，而它们对应的数据库表使用复数名称。

运行生成模型命令会创建两个文件并打印以下输出：

输出
调用  active_record
      创建    db/migrate/20221017220817_create_recipes.rb
      创建    app/models/recipe.rb

创建的两个文件有：

• 一个recipe.rb文件，包含所有与模型相关的逻辑。
• 一个20221017220817_create_recipes.rb文件（文件开头的数字可能取决于您运行命令的日期而有所不同）。这个迁移文件包含创建数据库结构的指令。

接下来，您将编辑配方模型文件以确保只将有效数据保存到数据库中。您可以通过在模型中添加一些数据库验证来实现此目标。

打开位于app/models/recipe.rb的配方模型。

nano ~/rails_react_recipe/app/models/recipe.rb

请将以下代码中的突出部分添加到文件中。

class Recipe < ApplicationRecord
  validates :name, presence: true
  validates :ingredients, presence: true
  validates :instruction, presence: true
end

在这个代码中，你添加了模型验证，检查名称、成分和指令字段是否存在。如果缺少这三个字段，则菜谱无效，不会保存到数据库中。

保存并关闭文件。

要让Rails在你的数据库中创建recipes表，你需要运行一个迁移（migration），这是一种以编程方式对数据库进行更改的方法。为了确保迁移与你设置的数据库配合工作，你必须对20221017220817_create_recipes.rb 文件进行修改。

请在你的编辑器中打开这个文件。

nano ~/rails_react_recipe/db/migrate/20221017220817_create_recipes.rb

添加被标记的材料以使您的文件与下列内容相匹配。

class CreateRecipes < ActiveRecord::Migration[5.2]
  def change
    create_table :recipes do |t|
      t.string :name, null: false
      t.text :ingredients, null: false
      t.text :instruction, null: false
      t.string :image, default: 'https://raw.githubusercontent.com/do-community/react_rails_recipe/master/app/assets/images/Sammy_Meal.jpg'

      t.timestamps
    end
  end
end

这个迁移文件包含一个Ruby类，其中包含一个change方法和一个创建名为recipes的表以及列和它们的数据类型的命令。你还通过添加null: false，确保这些列在更改数据库之前都有一个值，更新了20221017220817_create_recipes.rb，在name、ingredients和instruction列上添加了一个NOT NULL约束。最后，你为image列添加了一个默认的图片URL；如果你想使用不同的图片，这可以是另一个URL。

完成这些更改后，保存并退出文件。现在，您已经准备好运行迁移并创建表。在您的终端中运行以下命令：

rails db:migrate

您可以使用数据库迁移命令来运行迁移文件中的指令。命令成功运行后，您将会收到类似以下的输出信息：

输出
== 20190407161357 CreateRecipes: migrating ====================================
-- create_table(:recipes)
   -> 0.0140s
== 20190407161357 CreateRecipes: migrated (0.0141s) ===========================

安装好你的配方模型后，接下来要创建配方控制器来添加创建、读取和删除配方的逻辑。运行下面的命令：

rails generate controller api/v1/Recipes index create show destroy  --skip-template-engine --no-helper

在这个命令中，你会在api/v1目录中创建一个Recipes控制器，包括index、create、show和destroy四个动作。 index动作将负责获取所有的食谱； create动作将负责创建新的食谱； show动作将获取单个食谱，而destroy动作将处理删除食谱的逻辑。

您还可以传入一些标志来使控制器更轻量化，包括：

• –skip-template-engine，该标志指示Rails跳过生成Rails视图文件，因为React负责处理前端需求。
• –no-helper，该标志指示Rails跳过为控制器生成辅助文件。

运行该命令还会在路由文件中为 Recipes 控制器中的每个操作添加一条路由。

当命令运行时，它将打印出以下类似的输出:

输出

创建 app/controllers/api/v1/recipes_controller.rb 控制器文件，并设置以下路由：
namespace :api do
  namespace :v1 do
    get 'recipes/index'
    get 'recipes/create'
    get 'recipes/show'
    get 'recipes/destroy'
  end
end
要使用这些路由，你需要对你的 config/routes.rb 文件进行更改。在文本编辑器中打开 routes.rb 文件：
nano ~/rails_react_recipe/config/routes.rb
将此文件更新为以下代码，修改或添加标记的行：

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      get 'recipes/index'
      post 'recipes/create'
      get '/show/:id', to: 'recipes#show'
      delete '/destroy/:id', to: 'recipes#destroy'
    end
  end
  root 'homepage#index'
  get '/*path' => 'homepage#index'
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end

在这个路由文件中，你修改了创建和删除路由的HTTP谓词，以便可以发送和删除数据。你还通过在路由中添加 :id 参数，修改了展示和删除操作的路由。:id 将保存你想要读取或删除的食谱的标识号。
你可以使用 get '/*path' 添加一个捕获所有路径的路由，将所有不匹配现有路由的其他请求重定向到主页控制器的索引动作。前端路由将处理与创建、阅读或删除食谱无关的请求。
保存并退出文件。
要评估您应用程序中可用的路由列表，请运行以下命令：
rails routes
运行这个命令会显示项目中的URI模式、动词和匹配的控制器或动作的一个长列表。
接下来，您将添加一种逻辑来一次性获取所有的菜谱。Rails使用ActiveRecord库来处理与数据库相关的任务。ActiveRecord将类连接到关系型数据库表，并提供了丰富的API来与这些表进行交互。
为了获取所有的菜谱，你将使用ActiveRecord查询菜谱表，并从数据库中获取所有的菜谱。
使用以下命令打开 recipes_controller.rb 文件：
nano ~/rails_react_recipe/app/controllers/api/v1/recipes_controller.rb
将突出显示的行添加到食谱控制器中：

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
  end

  def show
  end

  def destroy
  end
end

在你的索引操作中，你使用了ActiveRecord的 all 方法来获取数据库中的所有菜谱。使用 order 方法，你按照创建日期的降序进行排序，这样最新的菜谱会排在首位。最后，你使用 render 将菜谱列表以JSON响应的形式发送出去。
接下来，你将添加有关创建新食谱的逻辑。与获取所有食谱一样，你将依赖于ActiveRecord来验证和保存所提供的食谱细节。请在你的食谱控制器中更新下面突出显示的代码行：

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
    recipe = Recipe.create!(recipe_params)
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def show
  end

  def destroy
  end

  private

  def recipe_params
    params.permit(:name, :image, :ingredients, :instruction)
  end
end

在创建操作中，您可以使用ActiveRecord的 create 方法来创建新的食谱。create 方法可以一次将所有控制器参数分配给模型。该方法使记录的创建变得简单，但也存在恶意使用的可能性。可以通过使用Rails提供的强参数功能来防止恶意使用。这样，只有被允许的参数才能被分配。您在代码中将一个 recipe_params 参数传递给 create 方法。recipe_params 是一个私有方法，在其中允许控制器参数，以防止错误或恶意内容进入您的数据库。在这种情况下，您允许使用 name、image、ingredients 和 instruction 参数来正确使用 create 方法。
您的配方控制器现在可以读取和创建配方了。剩下的就是读取和删除单个配方的逻辑。使用下面的代码更新您的配方控制器：

class Api::V1::RecipesController < ApplicationController
  before_action :set_recipe, only: %i[show destroy]

  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
    recipe = Recipe.create!(recipe_params)
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def show
    render json: @recipe
  end

  def destroy
    @recipe&.destroy
    render json: { message: '食谱已删除！' }
  end

  private

  def recipe_params
    params.permit(:name, :image, :ingredients, :instruction)
  end

  def set_recipe
    @recipe = Recipe.find(params[:id])
  end
end

在新的代码行中，你创建了一个私有的 set_recipe 方法，在show和delete操作匹配请求时由 before_action 调用。set_recipe 方法使用ActiveRecord的 find 方法找到一个id与params中提供的id匹配的recipe，并将其赋值给实例变量 @recipe。在show操作中，你将由 set_recipe 方法设置的 @recipe 对象作为JSON响应返回。
在销毁操作中，你使用了Ruby的安全导航运算符 &.，它在调用方法时避免了空值错误。这个附加功能允许你仅在存在时才删除一个菜谱，并作为响应发送一条消息。
在对 recipes_controller.rb 进行这些更改之后，保存并关闭文件。
在这一步中，你为你的食谱创建了一个模型和控制器。你已经编写了所有与后端食谱操作相关的逻辑。在接下来的部分中，你将创建组件来查看你的食谱。
第七步 - 浏览食谱
在此部分，您将创建用于查看食谱的组件。您将创建两个页面：一个用于查看所有现有的食谱，另一个用于查看单个食谱。
首先，您将创建一个页面来查看所有的食谱。在创建页面之前，由于您的数据库当前为空，您需要一些食谱供您使用。Rails 提供了一种为您的应用程序创建种子数据的方式。
打开名为seeds.rb的种子文件进行编辑。
nano ~/rails_react_recipe/db/seeds.rb
用以下代码替换种子文件的初始内容。
~/rails_react_recipe/db/seeds.rb 的内容：
9.times do |i|
  Recipe.create(
    name: "食谱 #{i + 1}",
    ingredients: '227克凝脂奶油，25克黄油，1茶匙玉米淀粉，100克帕尔马干酪，磨碎的肉豆蔻，250克新鲜意面或宽面条，切碎的细香葱或欧芹（可选）',
    instruction: '在一个中等大小的平底锅中，用中小火搅拌凝脂奶油、黄油和玉米淀粉，煮至微沸。关火并保持温暖。'
  )
end
在这段代码中，你使用一个循环命令Rails创建九个配方，包括名称、配料和指导部分。保存并退出文件。
为了用这些数据填充数据库，请在终端中运行以下命令。
rails db:seed
运行这个命令将会向您的数据库中添加九个食谱。现在您可以获取并在前端渲染它们。
查看所有食谱的组件将向 RecipesController 的 index 操作发出 HTTP 请求，以获取所有食谱的列表。然后将在页面上以卡片的形式显示这些食谱。
在app/javascript/components目录下创建一个Recipes.jsx文件。
nano ~/rails_react_recipe/app/javascript/components/Recipes.jsx
一旦文件打开，通过添加以下代码，导入React、useState、useEffect、Link和useNavigate模块。
~/rails_react_recipe/app/javascript/components/Recipes.jsx 的代码：
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
接下来，将所示的代码行添加到创建并导出一个功能性的React组件Recipes中。
~/rails_react_recipe/app/javascript/components/Recipes.jsx 的代码：
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";

const Recipes = () => {
  const navigate = useNavigate();
  const [recipes, setRecipes] = useState([]);
};

export default Recipes;
在Recipe组件内部，React Router的导航API会调用useNavigate钩子。React的useState钩子将初始化recipes状态，该状态是一个空数组([])，以及一个用于更新recipes状态的setRecipes函数。
接下来，在useEffect钩子中，您将发送一个HTTP请求来获取所有的食谱。为了实现这一点，请添加以下突出显示的代码行：
~/rails_react_recipe/app/javascript/components/Recipes.jsx 的代码：
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";

const Recipes = () => {
  const navigate = useNavigate();
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const url = "/api/v1/recipes/index";
    fetch(url)
      .then((res) => {
        if (res.ok) {
          return res.json();
        }
        throw new Error("网络响应不正常。");
      })
      .then((res) => setRecipes(res))
      .catch(() => navigate("/"));
  }, []);
};

export default Recipes;
在你的 useEffect hook 中，你使用 Fetch API 发起一个 HTTP 调用来获取所有的食谱。如果响应成功，应用程序会将食谱数组保存到 recipes 状态中。如果发生错误，它会将用户重定向到主页。
最后，当组件被渲染时，在浏览器页面上返回将被评估和显示的元素的标记。在这种情况下，组件将从recipes状态渲染一个食谱卡片。将这些高亮行添加到Recipes.jsx中。
~/rails_react_recipe/app/javascript/components/Recipes.jsx 的代码：
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";

const Recipes = () => {
  const navigate = useNavigate();
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const url = "/api/v1/recipes/index";
    fetch(url)
      .then((res) => {
        if (res.ok) {
          return res.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((res) => setRecipes(res))
      .catch(() => navigate("/"));
  }, []);

  const allRecipes = recipes.map((recipe, index) => (
    <div key={index} className="col-md-6 col-lg-4">
      <div className="card mb-4">
        <img
          src={recipe.image}
          className="card-img-top"
          alt={`${recipe.name} image`}
        />
        <div className="card-body">
          <h5 className="card-title">{recipe.name}</h5>
          <Link to={`/recipe/${recipe.id}`} className="btn custom-button">
            View Recipe
          </Link>
        </div>
      </div>
    </div>
  ));
  const noRecipe = (
    <div className="vw-100 vh-50 d-flex align-items-center justify-content-center">
      <h4>
        No recipes yet. Why not <Link to="/new_recipe">create one</Link>
      </h4>
    </div>
  );

  return (
    <>
      <section className="jumbotron jumbotron-fluid text-center">
        <div className="container py-5">
          <h1 className="display-4">Recipes for every occasion</h1>
          <p className="lead text-muted">
            We’ve pulled together our most popular recipes, our latest
            additions, and our editor’s picks, so there’s sure to be something
            tempting for you to try.
          </p>
        </div>
      </section>
      <div className="py-5">
        <main className="container">
          <div className="text-end mb-3">
            <Link to="/recipe" className="btn custom-button">
              Create New Recipe
            </Link>
          </div>
          <div className="row">
            {recipes.length > 0 ? allRecipes : noRecipe}
          </div>
          <Link to="/" className="btn btn-link">
            Home
          </Link>
        </main>
      </div>
    </>
  );
};

export default Recipes;

保存并退出Recipes.jsx。
既然你已经创建了一个用于显示所有食谱的组件，现在你需要为它创建一个路由。打开前端路由文件app/javascript/routes/index.jsx。
nano app/javascript/routes/index.jsx


在文件中添加被突出显示的行。
~/rails_react_recipe/app/javascript/routes/index.jsx 请原生地用中文改写出来，只需要一个选项：

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "../components/Home";
import Recipes from "../components/Recipes";

export default (
  <Router>
    <Routes>
      <Route path="/" exact component={Home} />
      <Route path="/recipes" element={<Recipes />} />
    </Routes>
  </Router>
);

保存并退出文件。
在这一点上，验证代码是否按预期工作是一个好主意。就像之前一样，使用以下命令来启动你的服务器。
bin/dev


然后在您的浏览器中打开该应用程序。在主页上按下“查看食谱”按钮，即可进入一个包含您的种子食谱的展示页面。

                            

在终端中使用CTRL+C停止服务器并返回提示符。
既然你已经可以在应用程序中查看所有的食谱，现在是时候创建一个第二个组件来查看单个食谱了。在app/javascript/components目录下创建一个Recipe.jsx文件。
nano app/javascript/components/Recipe.jsx


与“Recipes”组件一样，通过添加以下行来导入React、useState、useEffect、Link、useNavigate和useParam模块：
~/rails_react_recipe/app/javascript/components/Recipe.jsx 的本地中文漢字化選項（僅需一個）。

import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

接下来，将高亮部分添加到代码中，创建并导出一个可用的React组件，命名为Recipe。
~/rails_react_recipe/app/javascript/components/Recipe.jsx 可以重新表示为以下中文方案：

~/rails_react_recipe/app/javascript/components/菜谱组件.jsx
import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

const Recipe = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState({ ingredients: "" });
};

export default Recipe;

与"菜谱"组件一样，您可以使用 useNavigate 钩子来初始化 React 路由导航。useState 钩子会使用一个 recipe 状态和 setRecipe 函数来更新状态。另外，您还可以调用 useParams 钩子，它会返回一个对象，该对象的键/值对是 URL 参数。
为了找到特定的食谱，您的应用程序需要知道食谱的id，这意味着您的食谱组件需要在URL中接收一个id参数。您可以通过params对象访问这个参数，该对象保存useParams钩子函数的返回值。
接下来，在useEffect钩子中声明一个变量，通过params对象获取id参数。一旦获取到食谱的id参数，你将发送一个HTTP请求来获取这个食谱。请将下面的代码添加到你的文件中：
~/rails_react_recipe/app/javascript/components/食谱.jsx
import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

const Recipe = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState({ ingredients: "" });

  useEffect(() => {
    const url = `/api/v1/show/${params.id}`;
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => setRecipe(response))
      .catch(() => navigate("/recipes"));
  }, [params.id]);
};

export default Recipe;

在useEffect钩子中，你使用params.id的值来发起GET HTTP请求，以获取拥有相应id的食谱，并使用setRecipe函数将其保存到组件状态中。如果食谱不存在，该应用会将用户重定向到食谱页面。
接下来，添加一个addHtmlEntities函数，用于将组件中的字符实体替换为HTML实体。addHtmlEntities函数将接受一个字符串，并将所有转义的开闭括号替换为它们对应的HTML实体。这个函数将帮助您将保存在食谱说明中的任何转义字符进行转换。添加以下突出显示的行：
~/rails_react_recipe/app/javascript/components/Recipe.jsx的中文释义是什么？
import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

const Recipe = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState({ ingredients: "" });

  useEffect(() => {
    const url = `/api/v1/show/${params.id}`;
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => setRecipe(response))
      .catch(() => navigate("/recipes"));
  }, [params.id]);

  const addHtmlEntities = (str) => {
    return String(str).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
  };
};

export default Recipe;

最后，通过添加高亮行将标记返回到页面上的组件状态中，以渲染配方。
~ /rails_react_recipe/app/javascript/components/Recipe.jsx 这个路径下的文件。
import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

const Recipe = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState({ ingredients: "" });

  useEffect(() => {
    const url = `/api/v1/show/${params.id}`;
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => setRecipe(response))
      .catch(() => navigate("/recipes"));
  }, [params.id]);

  const addHtmlEntities = (str) => {
    return String(str).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
  };

  const ingredientList = () => {
    let ingredientList = "没有可用的食材";

    if (recipe.ingredients.length > 0) {
      ingredientList = recipe.ingredients
        .split(",")
        .map((ingredient, index) => (
          <li key={index} className="list-group-item">
            {ingredient}
          </li>
        ));
    }

    return ingredientList;
  };

  const recipeInstruction = addHtmlEntities(recipe.instruction);
  
  return (
    <div className="">
      <div className="hero position-relative d-flex align-items-center justify-content-center">
        <img
          src={recipe.image}
          alt={`${recipe.name} image`}
          className="img-fluid position-absolute"
        />
        <div className="overlay bg-dark position-absolute" />
        <h1 className="display-4 position-relative text-white">
          {recipe.name}
        </h1>
      </div>
      <div className="container py-5">
        <div className="row">
          <div className="col-sm-12 col-lg-3">
            <ul className="list-group">
              <h5 className="mb-2">食材</h5>
              {ingredientList()}
            </ul>
          </div>
          <div className="col-sm-12 col-lg-7">
            <h5 className="mb-2">制作说明</h5>
            <div
              dangerouslySetInnerHTML={{
                __html: `${recipeInstruction}`,
              }}
            />
          </div>
          <div className="col-sm-12 col-lg-2">
            <button
              type="button"
              className="btn btn-danger"
            >
              删除食谱
            </button>
          </div>
        </div>
        <Link to="/recipes" className="btn btn-link">
          返回食谱列表
        </Link>
      </div>
    </div>
  );
};

export default Recipe;

通过ingredientList函数，你可以将逗号分隔的食谱食材分成数组，并对其进行映射以创建食材列表。如果没有食材，应用程序会显示一个提示消息，表示没有可用的食材。接下来，你通过addHtmlEntities函数替换食谱制作说明中的所有开放和关闭括号。最后，该代码将食谱图像显示为主要图像，并在食谱制作说明旁边添加一个删除食谱按钮，以及一个返回食谱列表的按钮。


注意：使用React的dangerouslySetInnerHTML属性是有风险的，因为它会使你的应用暴露给跨站脚本攻击。通过确保在创建食谱时使用NewRecipe组件中声明的stripHtmlEntities函数替换输入的特殊字符，可以减少这种风险。

保存并退出文件。
要在页面上查看食谱组件，您需要将其添加到您的路由文件中。打开您的路由文件进行编辑。
nano app/javascript/routes/index.jsx


请将下面的标记行添加到文件中：

请为我将以下内容以中文原生方式复述，只需要一种选项：

~/rails_react_recipe/app/javascript/routes/index.jsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "../components/Home";
import Recipes from "../components/Recipes";
import Recipe from "../components/Recipe";

export default (
  <Router>
    <Routes>
      <Route path="/" exact component={Home} />
      <Route path="/recipes" exact component={Recipes} />
      <Route path="/recipe/:id" element={<Recipe />} />
    </Routes>
  </Router>
);

你需要在这个路由文件中引入你的食谱组件并添加一个路由。此路由包含一个:id参数，将被你想要查看的食谱的id替换。
保存并关闭文件。

使用bin/dev脚本重新启动服务器，然后在浏览器中访问http://localhost:3000。点击"查看食谱"按钮，转到食谱页面。在食谱页面中，通过点击"查看食谱"按钮访问任意食谱。你将会看到一个根据数据库数据填充的页面。

    

你可以使用CTRL+C停止服务器。
在这一步中，你向你的数据库添加了九个食谱，并创建了可以单独查看这些食谱和作为集合查看的组件。在下一步中，你将添加一个创建食谱的组件。
步骤8 —— 制作食谱
拥有可用食谱应用的下一步是能够创建新的食谱。在这一步中，您将创建一个用于此功能的组件。该组件将包含一个表单，用于从用户处收集所需的食谱详细信息，然后向食谱控制器中的创建操作发出请求，保存食谱数据。
在app/javascript/components目录中创建一个NewRecipe.jsx文件。
nano app/javascript/components/NewRecipe.jsx


在新文件中，导入你在其他组件中使用的React、useState、Link和useNavigate模块。
· ~/rails_react_recipe/app/javascript/components/NewRecipe.jsx
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

接下来，通过添加突出显示的行来创建和导出一个功能性的NewRecipe组件。
~/rails_react_recipe/app/javascript/components/NewRecipe.jsx
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

const NewRecipe = () => {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [ingredients, setIngredients] = useState("");
  const [instruction, setInstruction] = useState("");
};

export default NewRecipe;

与之前的组件一样，您可以使用useNavigate钩子来初始化React路由导航，然后使用useState钩子来初始化名称、配料和指导说明的状态，并分别使用其对应的更新函数。这些是您需要创建有效的食谱所需的字段。
然后，创建一个stripHtmlEntities函数，将特殊字符（如<）转换为其转义/编码值（如<）。为此，将以下突出显示的行添加到NewRecipe组件中。
~/rails_react_recipe/app/javascript/components/NewRecipe.jsx
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

const NewRecipe = () => {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [ingredients, setIngredients] = useState("");
  const [instruction, setInstruction] = useState("");

  const stripHtmlEntities = (str) => {
    return String(str)
      .replace(/\n/g, "<br> <br>")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  };
};

export default NewRecipe;

在stripHtmlEntities函数中，你用它们的转义值替换了<和>字符。这样，你就不会在数据库中存储原始的HTML。
接下来，将以下高亮代码添加到NewRecipe组件中，以处理表单的编辑和提交功能：
~/rails_react_recipe/app/javascript/components/NewRecipe.jsx
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

const NewRecipe = () => {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [ingredients, setIngredients] = useState("");
  const [instruction, setInstruction] = useState("");

  const stripHtmlEntities = (str) => {
    return String(str)
      .replace(/\n/g, "<br> <br>")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  };

  const onChange = (event, setFunction) => {
    setFunction(event.target.value);
  };

  const onSubmit = (event) => {
    event.preventDefault();
    const url = "/api/v1/recipes/create";

    if (name.length == 0 || ingredients.length == 0 || instruction.length == 0)
      return;

    const body = {
      name,
      ingredients,
      instruction: stripHtmlEntities(instruction),
    };

    const token = document.querySelector('meta[name="csrf-token"]').content;
    fetch(url, {
      method: "POST",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => navigate(`/recipe/${response.id}`))
      .catch((error) => console.log(error.message));
  };
};

export default NewRecipe;

onChange函数接收用户输入的事件和状态设置函数，然后使用用户输入的值更新状态。在onSubmit函数中，您检查所有必填输入框不能为空。然后，您构建一个包含创建新食谱所需参数的对象。使用stripHtmlEntities函数，您将食谱说明中的<和>字符替换为它们的转义值，并将每个换行字符替换为换行标签，以保留用户输入的文本格式。最后，您发送POST HTTP请求来创建新食谱，并在成功响应时重定向到其页面。
为了防止跨站请求伪造（CSRF）攻击，Rails会将一个CSRF安全标记附加到HTML文档上。只要发起一个非GET请求，就需要这个标记。通过之前代码中的标记，您的应用程序可以在服务器上验证标记，并在安全标记与预期不符时抛出异常。在onSubmit函数中，应用程序会从Rails嵌入在HTML文档中的CSRF标记中检索出标记并发送一个带有JSON字符串的HTTP请求。如果成功创建了该食谱，应用程序会将用户重定向到食谱页面，用户可以在那里查看他们新创建的食谱。
最后，返回一个标记，用于渲染一个表单，让用户输入他们想要创建的菜谱的详细信息。添加高亮的行：
~/rails_react_recipe/app/javascript/components/NewRecipe.jsx 的中文本地化释义：新食谱组件。
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

const NewRecipe = () => {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [ingredients, setIngredients] = useState("");
  const [instruction, setInstruction] = useState("");

  const stripHtmlEntities = (str) => {
    return String(str)
      .replace(/\n/g, "<br> <br>")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  };

  const onChange = (event, setFunction) => {
    setFunction(event.target.value);
  };

  const onSubmit = (event) => {
    event.preventDefault();
    const url = "/api/v1/recipes/create";

    if (name.length == 0 || ingredients.length == 0 || instruction.length == 0)
      return;

    const body = {
      name,
      ingredients,
      instruction: stripHtmlEntities(instruction),
    };

    const token = document.querySelector('meta[name="csrf-token"]').content;
    fetch(url, {
      method: "POST",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => navigate(`/recipe/${response.id}`))
      .catch((error) => console.log(error.message));
  };

  return (
    <div className="container mt-5">
      <div className="row">
        <div className="col-sm-12 col-lg-6 offset-lg-3">
          <h1 className="font-weight-normal mb-5">
            向我们精彩的食谱集合添加一个新食谱。
          </h1>
          <form onSubmit={onSubmit}>
            <div className="form-group">
              <label htmlFor="recipeName">食谱名称</label>
              <input
                type="text"
                name="name"
                id="recipeName"
                className="form-control"
                required
                onChange={(event) => onChange(event, setName)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="recipeIngredients">食材</label>
              <input
                type="text"
                name="ingredients"
                id="recipeIngredients"
                className="form-control"
                required
                onChange={(event) => onChange(event, setIngredients)}
              />
              <small id="ingredientsHelp" className="form-text text-muted">
                请用逗号分隔每种食材。
              </small>
            </div>
            <label htmlFor="instruction">制作说明</label>
            <textarea
              className="form-control"
              id="instruction"
              name="instruction"
              rows="5"
              required
              onChange={(event) => onChange(event, setInstruction)}
            />
            <button type="submit" className="btn custom-button mt-3">
              创建食谱
            </button>
            <Link to="/recipes" className="btn btn-link mt-3">
              返回食谱列表
            </Link>
          </form>
        </div>
      </div>
    </div>
  );
};

export default NewRecipe;

返回的标记包括一个包含三个输入字段的表单；其中一个用于配方名称（recipeName），一个用于配方成分（recipeIngredients），一个用于指令（instruction）。每个输入字段都有一个onChange事件处理器，调用onChange函数。还有一个onSubmit事件处理器附加到提交按钮上，并调用提交表单数据的onSubmit函数。
保存并退出文件。
为了在浏览器中访问此组件，请在您的路由文件中更新它的路由设置。
nano app/javascript/routes/index.jsx


更新您的路由文件，添加以下高亮显示的代码行。
请使用以下内容更新文件：~/rails_react_recipe/app/javascript/routes/index.jsx

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "../components/Home";
import Recipes from "../components/Recipes";
import Recipe from "../components/Recipe";
import NewRecipe from "../components/NewRecipe";

export default (
  <Router>
    <Routes>
      <Route path="/" exact component={Home} />
      <Route path="/recipes" exact component={Recipes} />
      <Route path="/recipe/:id" exact component={Recipe} />
      <Route path="/recipe" element={<NewRecipe />} />
    </Routes>
  </Router>
);


设置好路由后，保存并退出文件。
重启您的开发服务器，然后在浏览器中访问http://localhost:3000。导航到食谱页面，点击"创建新食谱"按钮。您将跳转到一个包含表单的页面，该表单用于向数据库添加食谱。

                            
                        
输入所需的食谱详细信息，然后点击"创建食谱"按钮。新创建的食谱将显示在页面上。完成后，关闭服务器。
在这一步中，您为食谱应用程序添加了创建食谱的功能。下一步，您将添加删除食谱的功能。
第九步——删除食谱
在本部分中，您将修改食谱组件，以包含删除食谱的选项。当您在食谱页面上点击删除按钮时，应用程序将向数据库发送删除该食谱的请求。
首先，打开您的Recipe.jsx文件进行编辑。
nano app/javascript/components/Recipe.jsx


在Recipe组件中，添加一个包含高亮代码行的deleteRecipe函数。
以下是~/rails_react_recipe/app/javascript/components/Recipe.jsx文件的内容：

import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

const Recipe = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState({ ingredients: "" });

  useEffect(() => {
    const url = `/api/v1/show/${params.id}`;
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => setRecipe(response))
      .catch(() => navigate("/recipes"));
  }, [params.id]);

  const addHtmlEntities = (str) => {
    return String(str).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
  };

  const deleteRecipe = () => {
    const url = `/api/v1/destroy/${params.id}`;
    const token = document.querySelector('meta[name="csrf-token"]').content;

    fetch(url, {
      method: "DELETE",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(() => navigate("/recipes"))
      .catch((error) => console.log(error.message));
  };

  const ingredientList = () => {
    let ingredientList = "No ingredients available";

    if (recipe.ingredients.length > 0) {
      ingredientList = recipe.ingredients
        .split(",")
        .map((ingredient, index) => (
          <li key={index} className="list-group-item">
            {ingredient}
          </li>
        ));
    }

    return ingredientList;
  };

  const recipeInstruction = addHtmlEntities(recipe.instruction);

  return (
    <div className="">
...


在deleteRecipe函数中，您获取要删除的食谱的ID，然后构建URL并获取CSRF令牌。接下来，您向Recipes控制器发送DELETE请求来删除该食谱。如果成功删除食谱，应用程序会将用户重定向到食谱页面。
在组件中的删除按钮元素上添加一个onClick事件，并将deleteRecipe函数作为点击事件处理程序传递给该按钮，以便在点击删除按钮时运行该函数。
...
return (
    <div className="">
      <div className="hero position-relative d-flex align-items-center justify-content-center">
        <img
          src={recipe.image}
          alt={`${recipe.name} 图片`}
          className="img-fluid position-absolute"
        />
        <div className="overlay bg-dark position-absolute" />
        <h1 className="display-4 position-relative text-white">
          {recipe.name}
        </h1>
      </div>
      <div className="container py-5">
        <div className="row">
          <div className="col-sm-12 col-lg-3">
            <ul className="list-group">
              <h5 className="mb-2">配料</h5>
              {ingredientList()}
            </ul>
          </div>
          <div className="col-sm-12 col-lg-7">
            <h5 className="mb-2">制作说明</h5>
            <div
              dangerouslySetInnerHTML={{
                __html: `${recipeInstruction}`,
              }}
            />
          </div>
          <div className="col-sm-12 col-lg-2">
            <button
              type="button"
              className="btn btn-danger"
              onClick={deleteRecipe}
            >
              删除食谱
            </button>
          </div>
        </div>
        <Link to="/recipes" className="btn btn-link">
          返回食谱列表
        </Link>
      </div>
    </div>
  );
...

在教程到达这一点时，你的完整的Recipe.jsx文件应该与这个文件相匹配。
~/rails_react_recipe/app/javascript/components/食谱.jsx
import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

const Recipe = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState({ ingredients: "" });

  useEffect(() => {
    const url = `/api/v1/show/${params.id}`;
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then((response) => setRecipe(response))
      .catch(() => navigate("/recipes"));
  }, [params.id]);

  const addHtmlEntities = (str) => {
    return String(str).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
  };

  const deleteRecipe = () => {
    const url = `/api/v1/destroy/${params.id}`;
    const token = document.querySelector('meta[name="csrf-token"]').content;

    fetch(url, {
      method: "DELETE",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(() => navigate("/recipes"))
      .catch((error) => console.log(error.message));
  };

  const ingredientList = () => {
    let ingredientList = "No ingredients available";

    if (recipe.ingredients.length > 0) {
      ingredientList = recipe.ingredients
        .split(",")
        .map((ingredient, index) => (
          <li key={index} className="list-group-item">
            {ingredient}
          </li>
        ));
    }

    return ingredientList;
  };

  const recipeInstruction = addHtmlEntities(recipe.instruction);

  return (
    <div className="">
      <div className="hero position-relative d-flex align-items-center justify-content-center">
        <img
          src={recipe.image}
          alt={`${recipe.name} image`}
          className="img-fluid position-absolute"
        />
        <div className="overlay bg-dark position-absolute" />
        <h1 className="display-4 position-relative text-white">
          {recipe.name}
        </h1>
      </div>
      <div className="container py-5">
        <div className="row">
          <div className="col-sm-12 col-lg-3">
            <ul className="list-group">
              <h5 className="mb-2">Ingredients</h5>
              {ingredientList()}
            </ul>
          </div>
          <div className="col-sm-12 col-lg-7">
            <h5 className="mb-2">Preparation Instructions</h5>
            <div
              dangerouslySetInnerHTML={{
                __html: `${recipeInstruction}`,
              }}
            />
          </div>
          <div className="col-sm-12 col-lg-2">
            <button
              type="button"
              className="btn btn-danger"
              onClick={deleteRecipe}
            >
              Delete Recipe
            </button>
          </div>
        </div>
        <Link to="/recipes" className="btn btn-link">
          Back to recipes
        </Link>
      </div>
    </div>
  );
};

export default Recipe;

保存并退出文件。
重新启动应用服务器并导航至主页。点击查看菜谱按钮以访问所有已存在的菜谱，然后打开任何特定的菜谱并点击页面上的删除菜谱按钮以删除文章。您将被重定向至菜谱页面，被删除的菜谱将不再存在。
现在，随着删除按钮可用，你拥有了一个完全功能的食谱应用程序！
结论

在本教程中，您使用Ruby on Rails和React前端创建了一个食谱应用程序，使用PostgreSQL作为数据库，并使用Bootstrap进行样式设计。如果您想继续使用Ruby on Rails进行开发，请考虑按照我们的"使用SSH隧道安全通信的三层Rails应用程序"教程进行操作，或者访问我们的"如何使用Ruby进行编码"系列来复习您的Ruby技能。如果您想更深入地学习React，请尝试"如何使用React展示来自Silicon Cloud API的数据"教程。
        

        
        

			#React #Ruby on Rails #Ubuntu #Web开发 #全栈开发