ساخت وب اپلیکشن SPA با laravel و vue js

۱۵ دی ۱۳۹۶

ما قصد داریم در این آموزش با ترکیب laravel و vue js یک وب اپلیکشن تک صفحه ای (single page applicaton - SPA) ایجاد نماییم.بعد از این که پروژه لاراول خود را ساختیم نیاز است vue router را با NPM نصب کنیم:

    
laravel new vue-router
cd vue-router

# Link the project if you use Valet
valet link

# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

پیکر بندی vue router

برای پیکر بندی vue router نیاز است که در قسمت html کدهای زیر را وارد کنیم.

    
<router-view></router-view>

حالا از آدرس resources/assets/js/app.js کدهای زیر در قسمت جاوااسکریپت برنامه اضافه می کنیم:

    
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

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

همانطور که می بینید باید برای هر صفحه component مربوط به آن صفحه را ایجاد کرد با دستورات زیر می توانید این کار را انجام دهید(البته اگر در لینوکس یا مک کار می کنید.در ویندوز بصورت دستی می توانید اضافه کنید.):

    
mkdir resources/assets/js/views
touch resources/assets/js/views/App.vue
touch resources/assets/js/views/Home.vue
touch resources/assets/js/views/Hello.vue

در قسمت App.vue می توانید از تگ <router-link/> برای رفتن به صفحات مختلف استفاده نمایید:

    
<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to="{ name: 'home' }">Home</router-link> |
            <router-link :to="{ name: 'hello' }">Hello World</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

حالا در component های home و hello کدهای زیر را وارد می کنیم:

resources/assets/js/views/Home.vue:

    
<template>
  <p>This is the homepage</p>
</template>

resources/assets/js/views/Hello.vue:

    
<template>
  <p>Hello World!</p>
</template>

Server-Side

سمت سرور که از لاراول استفاده می کنیم در قسمت routes/web.php کانفیگهای زیر را انجام می دهیم:

    
Route::get('/{any}', 'SpaController@index')->where('any', '.*');

حالا SpaController خود را با دستور زیر می سازیم:


php artisan make:controller SpaController

و کدهای زیر را به آن اضافه می کنیم:



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

ویو resources/views/spa.blade.php زیر را ساخته و کدهای زیر را در آن وارد می کنیم.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA Demo</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

با دو دستور زیر نتیجه را مشاهده می کنیم:

yarn watch # or npm run watch

نویسنده:حمید شاه محمدی

تعداد مشاهده خبر:(2230)

هر روز از مقاله های جدید طراحی سایت در کانال تلگرام ما با خبر شوید

میانگین امتیازات:

تعداد رای دهندگان: {{ count }}

نظرات:

نویسنده:{{ com.name }}