Question

我使用Laravel 5.4创建了一个API，并在不同的域上使用Vue.js 2创建了前端。将CORS安装到API。到这时，它在我的本地机器上都能正常工作。我应该如何以适当的方式将其部署到托管服务器？我有2个文件夹：后端和前端。在那里，我实现了两个独立的项目：一个是API，另一个是前端。

这是我的 routes / api.php

Route::group(['middleware' => ['jwt.auth']], function() {    
    Route::get('logout', 'AuthController@logout');
    Route::get('/requests', 'RequestController@index');
    Route::delete('/requests/{id}', 'RequestController@destroy');
});

Route::post('login', 'AuthController@login');
Route::post('register', 'AuthController@register');


Route::post('/requests', 'RequestController@create');

Route::get('/', function() {
    return response()->json([
        'success' => true
    ]);
});

Route::get('/hello', function() {
    return response()->json([
        'success' => true,
        'message' => 'API is working correctly.'
    ]);
});

Answer 1

您可能已经观察到Laravel预先配置为使用Vue.js作为其前端，您可以使用它来构建组件，然后使用Webpack，Laravel-Mix，Babel等构建或编译到您的app.js中。 p>

正常结构是您的Laravel代码，您的api，位于app目录中，您的Vue.js和样式表构建在resources/assets/目录中，然后构建到您的公共html中目录使用npm run dev或npm run watch等。

要连接前端和后端，或者在两者之间进行通信，您可以使用某种形式的XMLHttpRequest，a.k.a Ajax。

Laravel默认安装了Axios，满足您的所有Ajax需求。这是您想要开始查看api调用后端的地方。

来自Vue的Axios请求看起来像这样。（基于承诺）

axios.get('logout').then(//some function).catch(//some function);

以下是对远程端点发出的简单api请求，该请求返回带有{"message":"hello world"}的json响应

＆＃13;

Vue.component('example', {
	template: '#cool',
  data(){
  	return{
    	 requestData: {"message":"waiting for request..."},
    }
  },
  methods: {
    makeRequest(){
      axios.get('https://api.myjson.com/bins/xpk6h').then(function(response) {
          console.log(response.data.message); 
          this.requestData = response.data;
       }.bind(this));
    }
  },
});

const app = new Vue({
  el: '#app'
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
    <example></example>
</div>


<template id="cool" functional>
      <div>
          <button @click="makeRequest">make api request</button>
          <p>{{requestData.message}}</p>
      </div>
 </template>

＆＃13;

如何部署Laravel 5.4 API和Vue.js 2项目？

1 个答案: