💡 مشاوره

مارک پلاس

تکنولوژی نوین اینترنتی

اتصال فرانت‌اند Vue.js/React به API لاراول

اتصال فرانت‌اند Vue.js/React به API لاراول
اتصال فرانت‌اند Vue.js/React به API لاراول

اتصال فرانت‌اند‌های Vue.js و React به API لاراول یکی از رایج‌ترین کارها در توسعه وب است. در اینجا روش‌های مختلف برای اتصال هر دو فریم‌ورک به API لاراول را شرح می‌دهیم. این روش‌ها شامل استفاده از Axios یا Fetch API برای انجام درخواست‌ها و برقراری ارتباط با API لاراول است.

فصل 1: اتصال Vue.js به API لاراول

در این بخش، نحوه اتصال Vue.js به API لاراول با استفاده از Axios و دریافت و ارسال داده‌ها بررسی می‌شود.

1.1. نصب و راه‌اندازی Vue.js

  1. نصب Vue.js در پروژه لاراول: برای شروع، از Laravel Mix برای کامپایل کردن کد Vue.js استفاده می‌کنیم. ابتدا، اگر Vue.js را به پروژه خود اضافه نکرده‌اید، می‌توانید آن را با استفاده از npm نصب کنید:

    bash
    npm install vue@next

  2. تنظیم Vue.js در پروژه لاراول: در فایل resources/js/app.js، Vue را ایمپورت و راه‌اندازی می‌کنیم:

    js
    import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

  3. کامپایل و ساخت فایل‌ها: حالا با اجرای دستور زیر، پروژه را کامپایل کنید:

    bash
    npm run dev

1.2. ارسال درخواست به API لاراول با استفاده از Axios

برای ارسال درخواست‌ها به API لاراول، از Axios استفاده می‌کنیم. ابتدا باید آن را نصب کنید:

bash
npm install axios

سپس در Vue component خود می‌توانید به این صورت درخواست‌های HTTP را ارسال کنید.

  1. ارسال داده‌ها به API:

    فرض کنید یک فرم دارید که داده‌ها را به API لاراول ارسال می‌کند. برای این کار، از متد POST استفاده می‌کنیم:

    js
    <template>
    <div>
        <input v-model="title" placeholder="Title">
        <input v-model="content" placeholder="Content">
        <button @click="submitPost">Submit</button>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            title: '',
            content: ''
        };
    },
    methods: {
        async submitPost() {
            try {
                const response = await axios.post('http://localhost/api/posts', {
                    title: this.title,
                    content: this.content
                });
                console.log('Post created:', response.data);
            } catch (error) {
                console.error('There was an error!', error);
            }
        }
    }
};
</script>

    در اینجا:

    • درخواست POST به مسیر http://localhost/api/posts ارسال می‌شود.

    • داده‌های title و content از Vue به API ارسال می‌شوند.

  2. دریافت داده‌ها از API:

    برای دریافت داده‌ها از API، می‌توانید از متد GET استفاده کنید:

    js
    <template>
    <div>
        <ul>
            <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            posts: []
        };
    },
    mounted() {
        this.fetchPosts();
    },
    methods: {
        async fetchPosts() {
            try {
                const response = await axios.get('http://localhost/api/posts');
                this.posts = response.data;
            } catch (error) {
                console.error('There was an error!', error);
            }
        }
    }
};
</script>

    در اینجا:

    • متد mounted بعد از بارگذاری کامپوننت فراخوانی می‌شود و درخواست GET برای دریافت پست‌ها از API ارسال می‌کند.

1.3. احراز هویت با Laravel Sanctum

اگر از Sanctum برای احراز هویت استفاده می‌کنید، باید مطمئن شوید که توکن احراز هویت را در درخواست‌ها ارسال می‌کنید. برای این کار، پس از احراز هویت کاربر و دریافت token، باید آن را به عنوان هدر ارسال کنید:

js
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

فصل 2: اتصال React به API لاراول

2.1. نصب و راه‌اندازی React

  1. نصب React در پروژه لاراول: ابتدا با استفاده از npm یا yarn، React را به پروژه خود اضافه کنید:

    bash
    npm install react react-dom

  2. تنظیم React در پروژه لاراول: در فایل resources/js/app.js، React را راه‌اندازی می‌کنیم:

    js
    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

  3. کامپایل فایل‌ها: مانند Vue.js، با اجرای دستور زیر، فایل‌ها کامپایل می‌شوند:

    bash
    npm run dev

2.2. ارسال درخواست به API لاراول با استفاده از Axios

برای ارسال درخواست‌های GET و POST، از Axios استفاده می‌کنیم.

  1. ارسال داده‌ها به API:

    مشابه با Vue.js، در React نیز می‌توانید از Axios برای ارسال درخواست‌های POST استفاده کنید:

    jsx
    import React, { useState } from 'react';
import axios from 'axios';

function PostForm() {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const submitPost = async () => {
        try {
            const response = await axios.post('http://localhost/api/posts', {
                title: title,
                content: content
            });
            console.log('Post created:', response.data);
        } catch (error) {
            console.error('There was an error!', error);
        }
    };

    return (
        <div>
            <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Title"
            />
            <input
                type="text"
                value={content}
                onChange={(e) => setContent(e.target.value)}
                placeholder="Content"
            />
            <button onClick={submitPost}>Submit</button>
        </div>
    );
}

export default PostForm;

  2. دریافت داده‌ها از API:

    برای دریافت داده‌ها از API لاراول با استفاده از Axios و GET، مشابه با Vue.js عمل می‌کنیم:

    jsx
    import React, { useEffect, useState } from 'react';
import axios from 'axios';

function PostList() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        const fetchPosts = async () => {
            try {
                const response = await axios.get('http://localhost/api/posts');
                setPosts(response.data);
            } catch (error) {
                console.error('There was an error!', error);
            }
        };
        fetchPosts();
    }, []);

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}

export default PostList;

2.3. احراز هویت با Laravel Sanctum در React

برای ارسال توکن Bearer در React، مشابه Vue.js عمل می‌کنیم. پس از دریافت توکن از Sanctum، باید آن را در هدر درخواست‌ها ارسال کنیم:

js
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

نتیجه‌گیری

اتصال Vue.js و React به API لاراول با استفاده از Axios ساده است و امکان ارسال درخواست‌های GET و POST به سرور را فراهم می‌کند. با استفاده از روش‌های ذکر شده، شما می‌توانید داده‌ها را از API دریافت کرده و به آن ارسال کنید. همچنین، با استفاده از Laravel Sanctum یا Passport، امکان احراز هویت و ارسال توکن‌های Bearer برای درخواست‌های ایمن نیز وجود دارد.