vue.js에서 laravel 9로 데이터 전달
P粉951914381
2023-08-31 16:37:26
<p>문제: axios</p>를 사용하여 vue.js에서 laravel로 데이터를 전달할 때 내부 서버 오류가 발생합니다.
<p>새로운 laravel 프로젝트를 생성하고 vue를 사용하여 breece를 설치했습니다(php artisan Breeze: install vue). 그런 다음 메뉴 컨트롤러를 만들고 다음과 같이 menu.vue를 렌더링했습니다. </p>
<pre class="brush:php;toolbar:false;">공개 함수 인덱스()
{
$menuItems = 메뉴::모두();
return Inertia::render('메뉴', [
'메뉴항목' =>
]);
}</pre>
<p><code>Route::get('menu',[MenuController::class,'index']) </code>
이제 CartController</p>를 만들었습니다.
<pre class="brush:php;toolbar:false;"><?php
네임스페이스 AppHttpControllers;
AppModelsCart를 사용하세요.
AppModelsMenu를 사용하십시오.
IlluminateHttpRequest를 사용하세요.
CartController 클래스는 Controller를 확장합니다.
{
공공 기능 저장소(요청 $request)
{
dd("컨트롤러");
$menu_id = $request->input('id');
$menu = 메뉴::find($menu_id);
$cart=새 장바구니();
$cart->table=$request->테이블;
$cart->menus_id=$menu_id;
$response=$cart->저장();
}
}</pre>
<p>여기에는 menu.vue에서 반환된 데이터를 저장해야 합니다.
menu.vue</p>
<pre class="brush:php;toolbar:false;"><스크립트 설정>
'@inertiajs/vue3'에서 { 헤드 }를 가져옵니다.
</스크립트>
<템플릿>
<헤드 제목="메뉴"
<탐색바 />
<div
class="그리드 그리드-콜스-1 md:그리드-콜스-3 lg:그리드-콜스-4 xl:그리드-콜스-5 갭-4 mx-20"
>
<div v-for="menuItems의 항목" :key="item.id">
<div class="p-6 bg-white rounded-lg Shadow-lg">
<img
v-bind:src="'menuItemImage/' + item.image"
class="w-12 h-12"
/>
<h3 class="text-lg 글꼴-medium Leading-Tight">
{{ 상품명 }}
</h3>
<버튼
@click="addToCart(항목)"
class="mt-4 bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600"
>
추가하다
</버튼>
</div>
</div>
</div>
</템플릿>
<스크립트>
"@/Layouts/NavbarLayout.vue"에서 navbar를 가져옵니다.
"axios"에서 axios를 가져옵니다.
기본값 내보내기 {
이름: "메뉴",
데이터() {
반품 {};
},
구성요소: {
탐색 모음,
},
소품: ["menuItems"],
방법: {
addToCart(항목) {
console.log(item.id);
액시오스
.post("/cart", {
menu_id: 항목.id,
})
.then(함수(응답) {
console.log(response.data);
})
.catch(함수 (오류) {
console.log(오류);
});
},
},
};
<p>问题是当这被调用时</p>
<pre class="brush:php;toolbar:false;">축
.post("/cart", {
menu_id: 항목.id,
})</pre>
<p>它给了我这个错误:
错误</p>
<p>내가 좋아하는 app.js</p>
<pre class="brush:php;toolbar:false;">축
import './bootstrap';
import '../css/app.css';
'vue'에서 { createApp, h } 가져오기;
'@inertiajs/vue3'에서 { createInertiaApp }을 가져옵니다.
'laravel-vite-plugin/inertia-helpers'에서 {solvePageComponent }를 가져옵니다.
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || '라라벨';
createInertiaApp({
제목: (제목) => `${제목} - ${appName}`,
해결: (이름) => solvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ 엘, 앱, 소품, 플러그인 }) {
return createApp({ 렌더링: () => h(App, props) })
.use(플러그인)
.use(ZiggyVue, Ziggy)
.mount(엘);
},
진전: {
색상: '#4B5563',
},
});</pre>
<p>내가 좋아하는 app.blade.php</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<머리>
<meta charset="utf-8">
<메타 이름="뷰포트" content="width=device-width,initial-scale=1">
<제목 관성>{{ config('app.name', 'Laravel') }}</제목>
<!-- 글꼴 -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap>
<!-- 스크립트 -->
@경로
@vite(['resources/js/app.js', "resources/js/Pages/{$page['comComponent']}.vue"])
@inertiaHead
</머리>
<body class="font-sans antialiased">
@관성
</body>
</html></pre>
<p>이 내용은 저장소/로그 파일<코드>[2023-02-08 16:39:49] local.ERROR: SQLSTATE[23000]: 무결성 제약 조건 위반: 1048 'menus_id' 열은 null일 수 없습니다(SQL: </code>카트<code> (</code>menus_id<code>, </code>table<code>, </code>updated_at<code>, </code>created_at<code> ;) value(?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39:49)) {"Exception":"[Object] (Illuminate\Database\QueryException (코드: 23000) ): SQLSTATE[ 23000]: 무결성 제약 조건 위반: 1048 'menus_id' 열은 null일 수 없습니다. (SQL: INSERT into </code>carts<code> (</code>menus_id<code>, < /code>table< ;code>, </code >updated_at<code>, </code>created_at<code>) 값 (?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39 :49)) D:\Trinity\7th SEM\Project Work\smart_QR_based_restaurant\Suppliers\laravel\Framework\src\Illuminate\Database\Connection.php:760) [stacktrace] </code>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이것이 당신의 문제일 수도 있습니다.
이 개체를 게시물 데이터로 전달하고 있습니다
으아악그런 다음 존재하지 않는 컨트롤러의 입력을 호출합니다
으아악$request->input('id')해야
$request->input('menu_id');그러나 실제 발생한 오류를 보려면 로그를 다시 확인하세요
또한 컨트롤러에 유효성 검사를 추가하여 전달한 ID가 테이블에 있는지 확인해야 합니다
으아악