Hantar data dari vue.js ke laravel 9
P粉951914381
2023-08-31 16:37:26
<p>Isu: Ralat pelayan dalaman apabila menghantar data daripada vue.js ke laravel menggunakan axios</p>
<p>Saya mencipta projek laravel baharu dan memasang breece menggunakan vue (php artisan Breeze: pasang vue). Kemudian saya mencipta pengawal menu dan memberikan menu.vue seperti ini: </p>
<pre class="brush:php;toolbar:false;">indeks fungsi awam()
{
$menuItems = Menu::semua();
return Inersia::render('Menu', [
'menuItems' =>
]);
}</pre>
<p><kod>Route::get('menu',[MenuController::class,'index']);
Sekarang saya mencipta CartController</p>
<pre class="brush:php;toolbar:false;"><?php
ruang nama AppHttpControllers;
gunakan AppModelsCart;
gunakan AppModelsMenu;
gunakan IlluminateHttpRequest;
kelas CartController memanjangkan Pengawal
{
kedai fungsi awam(Minta $request)
{
dd("PENGAWAL");
$menu_id = $request->input('id');
$menu = Menu::find($menu_id);
$cart=New Cart();
$cart->table=$request->table;
$cart->menus_id=$menu_id;
$respons=$cart->save();
}
}</pre>
<p>Di sini saya perlu menyimpan data yang dikembalikan daripada menu.vue
menu.vue</p>
<pre class="brush:php;toolbar:false;"><setup script>
import { Head } daripada '@inertiajs/vue3';
</skrip>
<template>
<Tajuk kepala="Menu"
<navbar />
<div
class="grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mx-20"
>
<div v-for="item dalam menuItems" :key="item.id">
<div class="p-6 bg-putih bulat-lg bayang-lg">
<img
v-bind:src="'menuItemImage/' + item.image"
kelas="w-12 h-12"
/>
<h3 class="teks-lg fon-sederhana terkemuka-ketat">
{{ nama barang }}
</h3>
<butang
@click="addToCart(item)"
class="mt-4 bg-biru-500 teks-putih py-2 px-4 bulat-lg tuding:bg-biru-600"
>
Tambah
</butang>
</div>
</div>
</div>
</template>
<skrip>
import navbar daripada "@/Layouts/NavbarLayout.vue";
import axios daripada "axios";
eksport lalai {
nama: "Menu",
data() {
kembali {};
},
komponen: {
navbar,
},
prop: ["menuItems"],
kaedah: {
addToCart(item) {
console.log(item.id);
aksios
.post("/cart", {
menu_id: item.id,
})
.then(fungsi (tindak balas) {
console.log(response.data);
})
.catch(fungsi (ralat) {
console.log(error);
});
},
},
};
</script></pre>
<p>问题是当这被调用时</p>
<pre class="brush:php;toolbar:false;">axios
.post("/cart", {
menu_id: item.id,
})</pre>
<p>它给了我这个错误：
错误</p>
<p>这是我的 app.js</p>
<pre class="brush:php;toolbar:false;">axios
import './bootstrap';
import '../css/app.css';
import { createApp, h } daripada 'vue';
import { createInertiaApp } daripada '@inertiajs/vue3';
import { resolvePageComponent } daripada 'laravel-vite-plugin/inersia-helpers';
import { ZiggyVue } daripada '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
tajuk: (tajuk) => `${title} - ${appName}`,
menyelesaikan: (nama) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
persediaan({ el, Apl, prop, pemalam }) {
kembalikan createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
kemajuan: {
warna: '#4B5563',
},
});</pre>
<p>这是我的app.blade.php</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<kepala>
<meta charset="utf-8">
<meta name="viewport" kandungan="lebar=lebar peranti, skala awal=1">
<inersia tajuk>{{ config('app.name', 'Laravel') }}</title>
<!-- Fon -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Skrip -->
@laluan
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inersiaHead
</head>
<kelas badan="font-sans antialiased">
@inersia
</badan>
</html></pre>
<p>Ini ada dalam fail storan/log<kod>[2023-02-08 16:39:49] setempat. RALAT: SQLSTATE[23000]: Pelanggaran kekangan integriti: 1048 Lajur 'id_menu' tidak boleh batal (SQL: Masukkan ke dalam </code>carts<code> (</code>menus_id<code>, </code>table<code>, </code>updated_at<code>, </code> ;) nilai(?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39:49)) {"Pengecualian":"[Objek] (Illuminate\Database\QueryException (kod: 23000 ): SQLSTATE[ 23000]: Pelanggaran kekangan integriti: 1048 Lajur 'id_menu' tidak boleh batal (SQL: INSERT ke dalam </kod>carts<kod> (</code>menus_id<kod>>table>>table>>table>> ;kod>, </kod >dikemas kini_pada<kod>, </kod>dicipta_pada<kod>) nilai (?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39 :49)) dalam D:\Trinity\7th SEM\Project Work\smart_QR_based_restaurant\Suppliers\laravel\Framework\src\Illuminate\Database\Connection.php:760) [stacktrace] </code> ;
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini mungkin masalah anda,
Anda menghantar objek ini sebagai data pos
{menu_id: item.id}Kemudian anda memanggil input dalam pengawal yang tidak wujud
$request->input('id')$menu_id = $request->input('id'); $menu = Menu::find($menu_id);sepatutnya
$request->input('menu_id');Namun, semak log anda sekali lagi untuk melihat ralat sebenar yang dibangkitkan
Selain itu, anda harus menambah pengesahan dalam pengawal anda untuk memastikan ID yang anda lulus wujud dalam jadual
public function store(Request $request) { $request->validate([ 'menu_id' => 'required|exists:menus,id' ]); $menu_id = $request->input('menu_id'); $menu = Menu::find($menu_id); $cart=new Cart(); $cart->table=$request->table; $cart->menus_id=$menu_id; $response=$cart->save(); }