SPA (Single Page Applications) Laravel ? Vue.js? ???? ?? ? ? ????. 1) Laravel?? API ??? ? ????? ???? ??? ??? ?????. 2) vue.js?? ?? ??? ? ??? ??? ??? ??? ????? ? ??? ?? ??? ??????. 3) CORS? ???? ??? ?? ??? AXIOS? ??????. 4) VUE ???? ???? ??? ??? ???? ??? ??? ??????.

??

?? ? ???? SPA (Single Page Applications)? ?? ????????. ??? ??? ??? ??? ???? ?? ????? ?????. ??, ??? Laravel? Vue.js? ???? ??? ??? ??? ?? ????. ? ??? ?? Vue.js ??? ?? ??? ??? ???? Laravel? ??? API? ???? ??? ????.

?? ?? ??

???? ?? Laravel? Vue.js? ?? ??? ??? ?????. Laravel? ??? ??? ??? ??? ???? PHP ?? ??? ??? ??? API? ???? ? ?????. Vue.js? ??? ????? ??? ??? ? ???? JavaScript ??? ?????. ?? ?? ??? ?????.

? ? ??? ??? ???? ?? ?? ?? ?? ??? ??? ?? ????. Laravel? ?? ???? ???, ????, ?? ? ??????? ???? Vue.js? ?? ???? ?? ??, ??? ? ?? ??? ?????.

?? ?? ?? ?? ??

??? API?? Laravel

??? API?? Laravel? ?? ??? ??? ??? ???? ??? ?????? ???? ????. Laravel? ???? ??? ?? ???? ?? ???? ?? ??? API? ?? ?? ? ????.

 // ??/api.php
route :: get ( '/user', 'usercontroller@index');
route :: post ( '/user', 'usercontroller@store');

// app/http/????/usercontroller.php
?? ???? ? \ http \ ????;

app \ user? ?????.
Illuminate \ http \ request? ??????.

??? usercontroller? ????? ?????
{
    ?? ?? ?? ()
    {
        ?? ??? :: all ();
    }

    ?? ?? ??? (?? $ ??)
    {
        $ user = ? ??? ();
        $ user-> name = $ request-> input ( 'name');
        $ user-> email = $ ??-> ?? ( '???');
        $ user-> save ();
        ?? $ user;
    }
}

? ??? Laravel?? API ??? ? ????? ???? ??? ?????. ??? ???? ???? ?? ???? ??? ??? ?? ? ? ????.

??? ?? ??? ???? Vue.js

vue.js? ?? ??? ??? ?????? ???? ??? ?? ??? ???? ????. vue.js? ?? ?? ??? ???? ? ??? ?? ??? ???? ?? ?? ??? ? ??? ?? ??????? ?? ? ????.

 // src/components/userList.Vue
<emplate>
  <div>
    <H1> ??? ?? </h1>
    <ul>
      <li v -for = "user in user": key = "user.id"> {{user.name}} - {{user.email}} </li>
    </ul>
    <form @down.prevent = "adduser">
      <?? v-model = "newuser.name"?? ??? = "name" />
      <?? v-model = "newuser.email"?? ?? ? = "???" />
      <?? ?? = "??"> ??? ?? </button>
    </form>
  </div>
</???>

<cript>
???? ??? {
  ??? () {
    ?? {
      ??? : [],
      Newuser : {
        ??: &#39;&#39;,
        ??? : &#39;&#39;
      }
    };
  },
  ??? () {
    this.fetchusers ();
  },
  ?? : {
    Fetchusers () {
      ?? ( &#39;/api/users&#39;)
        .Then (?? => response.json ())
        . ??? (data => {
          this.users = data;
        });
    },
    AddUser () {
      ?? ( &#39;/api/users&#39;, {
        ?? : &#39;post&#39;,
        ?? : {
          &#39;Content-Type&#39;: &#39;Application/JSON&#39;
        },
        ?? : JSON.Stringify (this.newuser)
      })
        .Then (?? => response.json ())
        . ??? (data => {
          this.users.push (???);
          this.newuser.name = &#39;&#39;;
          this.newuser.email = &#39;&#39;;
        });
    }
  }
};
</????>

? ??? vue.js?? ??? ?? ?? ??? ???? API? ?? ???? ?? ???? ??? ?????.

??? ?

?? ??

?? ????? Laravel? Vue.js? ???? ?? ??? ? ??? ???????. ??, ??? ??? API? ??? ? ? ??? Laravel?? CORS? ???????.

 // app/http/middleware/cors.php
?? ???? ? \ http \ ????;

??? ??????.

??? ??
{
    ?? ?? ?? ($ ??, ?? $ ??)
    {
        return $ ?? ($ ??)
            -> ?? ( 'Access-Control-Ollow-Origin', '*')
            -> ?? ( 'Access-Control-allow-Methods', 'Get, Post, Put, Delete, Options'))))
            -> ?? ( 'Access-Control-Hallow-Headers', 'Content-Type, Authorization');
    }
}

?? ?? vue.js?? axios? ???? http ??? ??????.

 // src/main.js
'vue'?? vue ?? ??;
'./app.vue'?? ? ?? ??;
'axios'?? axios ?? ??;
'vue-axios'?? vueaxios? ?????.

vue.use (vueaxios, axios);

??? vue ({
  ?? : H => H (?)
}). $ mount ( '#app');

?? ???, ??? ?? ?? ?? ??? ???? ?? ?? ??? ? ????.

?? ??

?? ???? Vue ???? ???? ??? ??? ?????? ??? ??? ?? ? ????.

 // src/router/index.js
'vue'?? vue ?? ??;
'vue-router'?? vuerouter? ?????.
'../components/userlist.vue'?? userlist ?? ??;

vue.use (vuerouter);

const ?? = [
  {
    ?: '/',
    ?? : '??????',
    ?? ?? : userList
  }
];

Const Router = New Vuerouter ({{
  ?? : '??',
  ?? : process.env.base_url,
  ??
});

?? ??? ????;

VUE ???? ?? ??? ?? ??? ???? ??? ??? ???? ? ????.

???? ?? ? ??? ?

?? ???? CORS ??, ??? ??? ?? ?? ?? ? ?? ???? ??? ??? ? ????. ? ?? ??? ?? ??? ????.

• CORS ?? : CORS ????? Laravel?? ???? ?????? ??? ???? ??? ??? ??? ???? ?????.
• ??? ??? ?? : Vue.js ?? ??? ???? ??? ??? ??? ???? ?? ???? ??????? ??????.
• API ?? ?? : ????? ??? ??? ???? ???? ????? ??? ???? ???? ?????? ??????.

?? ??? ? ?? ??

?? ??? ? ?? ??? ?? ?? ???? ?? ?????. ? ?? ??? ??? ????.

• API ??? : Laravel??? Eloquent ORM? ?? ??? ??? ???? ?????? ?? ?? ??? API ?? ??? ???? ? ????.
• ??? ?? ??? : vue.js?? ?? ??? ??? ???? ?? ???? ? ?????? ???? ?? ??? ??? ?? ?? ?? ???? ?? ? ? ??????.
• ?? ??? : ??? ??? ? ?? ??? ???? ?? ? ??? ????? ???? ? ?? ? ?? ? ?????.

??? ??? ? ?? ??? ?? ????? ?? ?? ??? ??? ?? ? ? ????.

??

? ??? ?? Laravel ? Vue.js? ???? ?? ??? ?? ????? ???? ??? ??? ?? ???. ???? ?? ??, ?? ??? ? ?? ??? ????? ??? ??? ?? ? ?? ??? ??? ??? ? ? ???? ???? ? ?????? ????. ?? ??? ????? ??? ??? ???? ????!

? ??? Laravel vue.js ?? ??? ?? ???? (SPA) ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!