آفلاین
user-avatar

تغییر فایل vue در لاراول

2 سال پیش
توسط bardia آپدیت شد
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

سلام دوستان من یه Sample ساده که vue وlaravel هست رو دانلود کردم
اینم لینکش

https://github.com/fagray/vuejs2-laravel53-starter

اینم فایلroute.js

import VueRouter    from 'vue-router'

//Define route components
const Home = { template: '<div>ddd home</div>' }
const Foo = { template: '<div>ddd Foo</div>' }
const Bar = { template: '<div>Bar</div>' }

// lazy load components
const Room = (resolve) => require(['./components/Room.vue'], resolve)

export default new VueRouter({
    mode: 'history',
    base: __dirname,
      routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
        { path: '/rooms', component: Room } // example of route with a seperate component
      ]
});

حال من تغییراتی که میدم مثلن نامشو میخوام عوض کنم توی خروجی همون نام قبلی هست هیچ تغیر نمی کنه
مشکل از کجاست؟
مثلن نام زیر رو میخوام تغییر بدم

<div>home</div>

به صورت زیر

<div>ddd home</div>

اما تغییرات اعمال نمیشه

آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

کامپایل کردید؟
در ضمن اگه سایت spa نمیخواید از vuerouter استفاده نکنید

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@alirezasafdari

سایت spa نیست

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

نمیدونم چرا تغییر میدم داخل div هر template رو چیزی اعمال نمیشه
برای اجراش
باید از فرمامین زیر استفاده کنم؟

run npm dev
or
run npm wath
const Home = { template: '<div>ddd home</div>' }
const Foo = { template: '<div>ddd Foo</div>' }
const Bar = { template: '<div>Bar</div>' }
آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

بله کدهای vue رو باید با laravel mix فشرده کنید و بذارید توی صفحه اصلی بعد ناحیه app رو هم تعیین کنید،
در ضمن اگه پروژه لاراولی هست نیازی به vue router نیست، صرفا کامپوننت رو درست کنید و بعد فشرده و فراخوانی کنید بعد هر جا میخواین بیاریدش اسمش رو فراخوانی کنید، روت ها رو هم با روت خود لاراول بزنید

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@alirezasafdari
نمونه کد دارید برام بفرستید
ممنون میشم

آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

نمونه کد از چی؟

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@alirezasafdari
همین مواردی که گفتید رو

آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

این صفحه بلید اصلی:

<!doctype html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {!! SEO::generate() !!}
    @include('front.include.css')
</head>
<body>
@include('front.include.header')
<div id="app">
    @yield('center')
</div>
@include('front.include.footer')
@include('front.include.js')
<script>
    window.Laravel = {};
    window.Laravel.Auth = '{{ Auth::check() }}' == '' ? false : true;
    window.Laravel.csrfToken = '{{ csrf_token() }}'
</script>
@yield('script')
</body>
</html>

این صفحه app.js:

import './bootstrap';
import Like from './components/Like.vue';
import Follow from './components/Follow.vue';

Vue.component('Like', Like);
Vue.component('Follow', Follow);

const app = new Vue({
    el: '#app',
});

این هم صفحه کامپوننت لایک :

<template>
    <div class="d-flex flex-row justify-content-center">
        <a href="" @click.prevent="likeIt">
            <i class="fa fa-thumbs-o-up pl-2" style="font-size: 20px"></i>
        </a>
        <p style="font-size: 16px">{{likes}}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                likes: 0,
                Laravel : window.Laravel,
            }
        },
        props: [
            'likable_type', 'likable_id', 'user_id',
        ],
        mounted(){
            axios.post('/api/web/getLike',{
                likable_type: this.likable_type,
                likable_id: this.likable_id,
            })
                .then(response => {
                    this.likes = response.data.likes
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            likeIt(){
                if (this.Laravel.Auth) {
                axios.post('/api/web/saveLike', {
                    likable_type: this.likable_type,
                    likable_id: this.likable_id,
                    user_id: this.user_id,
                })
                    .then(response => {
                        if (response.data.data == 'deleted') {
                            this.likes -= 1;
                        } else {
                            this.likes += 1;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }else{
                    window.location.href = '/login'
                }
            }
        }
    }
</script>

این هم صفحه لاراول میکس:

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/assets/js/app.min.js')
   .sass('resources/assets/sass/app.scss', 'public/assets/css/app.min.css');

داده ها رو هم با api از سرور میگیرم و تغییرات رو انجام میدم

آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

این هم فراخوانی کامپوننت لایک توی بلیدهای لاراول هست :

<Like likable_type="answer" :likable_id="{{$answer->id}}"
                                              :user_id="{{auth()->user()->id}}"></Like>
آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@alirezasafdari
حال ابن نحوه فراخوانی روت کجاست
منظورم اینه که ما چندتا کامپونت داشته باشیم نحوه فراخوانیش چطوره
در واقع من دارم یه پنل ادمین طراحی می کنم
میخوام روی هر آپشن کلیک کرده بره توی صفحه دیگه
اینو توی لاراول می خوام

آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

ببینید دو حالته، یکبار شما میخواین کل پنل ادمین spa بشه واسه اون باید از vue router استفاده کنید
ولی یکبار کل پنل ادمین رو با خود بلیدهای لاراول زدید، و میخواین مثلا یک قسمت کوچیک توی یک صفحه مثلا دکمه لایک رو درست کنید اینجا از کامپوننت vue استفاده میکنید و اسم همون کامپوننت رو همون جایی که میخواین استفاده کنید فراخوانی میکنید شبیه همون چیزی که فرستادم توی پیام آخری،
اگه میخواین روی یک آپشن کلیک کنید بره صفحه دیگه، اینجا یا صفحه بعدی لود میشه که باید با روت خود لاراول انجام بدید یا صفحه لود نمیشه و spa هست که با vue router

آفلاین
user-avatar
bardia ( 22746 تجربه )
2 سال پیش
تخصص : Golang/Laravel

@alirezasafdari
توی گیت هاپ نمونه ای هست؟

برای ارسال پاسخ باید وارد سایت شوید