主页 / coding / 问题 / 79481054
Accepted
Chris
Asked: 2025-03-03 21:11:51 +0800 CST

Rails 和 Inertia.js 如何实现 POST 请求

  • 772

我有一个使用 Inertia.js 和 Vue 的 Rails 8 应用程序。我不确定如何redirect_to()在 Rails 中使用 Inertia.js 实现请求。我的尝试没有奏效。我正在将https://github.com/skryukov/inertia_rails-contribInertia.js 集成到 Rails 中。

Github 仓库位于https://github.com/Chrisgo-75/rails8_inertiajs_vuejs

工作流程是

a) 在 上找到 HTML 按钮“添加到购物车” /app/frontend/pages/Store/Index.vue。

# /app/frontend/pages/Store/Index.vue

<template>
  <button
    @click="addToCart(product.id)"
    class="ml-4 rounded-lg py-1 px-2 text-white bg-green-600"
    >
    Add to Cart
  </button>
</template>

<script setup lang="ts">
import axios from "axios";
import { router } from '@inertiajs/vue3';

const addToCart = async (productId: number) => {
  try {
    const response = await axios.post('/line_items',
        { product_id: productId },
        { headers: { 'X-CSRF-Token': csrfToken } } // Include CSRF token
    );

    alert('Product added to cart!');

    // Extract the cart ID from the response.
    const cartId = response.data.cart_id;

    router.visit(`/carts/${cartId}`);
  } catch (error) {
    console.error('Error adding to cart: ', error);
    alert('Failed to add product to cart.');
  }
};
</script>

b) 单击“添加到购物车”按钮进入/app/controllers/line_items_controller.rb创建控制器操作。

  • 我无法使用 Rails 让 Inertia.js 在此创建操作中工作redirect_to()。
  • 所以我目前将其cart_id作为 JSON 传回给 Vue。
# line_items_controller.rb

def create
    product = Product.find(params[:product_id])
    @line_item = @cart.line_items.build(product: product)

    if @line_item.save
      # redirect_to @line_item.cart, notice: "Line item was successfully created."
      # redirect_to @cart, notice: "Cart was successfully updated."
      # redirect_to inertia: cart_path(@cart), notice: "Cart was successfully updated."
      render json: { cart_id: @cart.id }
    else
      # redirect_to new_line_item_url, inertia: { errors: @line_item.errors }
      # render inertia: "Carts/Show", props: { cart: @cart, errors: @line_item.errors }
      render json: { errors: @line_item.errors.full_messages },
             status: :unprocessable_entity
    end
end # END def create

c) LineItems 控制器创建操作传cart_id回/app/frontend/pages/Store/Index.vue其执行的位置router.visit('/carts/${cartId}')。

redirect_to()有没有人有在 Rails 中实现 Inertia.js 请求的解决方案？

ruby-on-rails

1 个回答

  1. Best Answer

    Axios 确实会重定向，但您必须自己处理最终响应，这就是您在render重定向时所做的事情。

    Inertia 提供了手动请求的 API，它处理重定向和页面更新。不要这样做axios.post：

    <template>
  <button @click="addToCart(product.id)">
    Add to Cart
  </button>
</template>

<script setup>
  import { router } from '@inertiajs/vue3';

  const addToCart = (product_id) => {
    router.visit('/line_items', {
      method: 'POST',
      data: { product_id },
    });
  }
</script>

    https://inertia-rails.dev/guide/manual-visits

    或者使用Link组件：

    <template>
  <Link
    href="/line_items"
    method="post"
    :data="{ product_id: product.id }"
  >
    Add to Cart
  </Link>
</template>

<script setup>
  import { Link } from '@inertiajs/vue3'
</script>

    https://inertia-rails.dev/guide/links

    • 0

相关问题