VueJs处理后端Laravel Api

· 2016-12-07 · # Vue # Api

用vueJs实现组件化时，我们可以在项目中引入后端API的概念，在这里我们就是去处理利用Laravel提供的后端API去实现我们通常说的前后端分离

1.后端提供API

在用vue-cli构建好我们的项目并且实现vueJs组件化.下面我们可以去尝试从后端的提供的API来获取我们前端需要的数据
因为我们的数据不可能都是预先写好在我们的组件里的

而后端的话就用我熟悉的Laravel项目作为Api的提供者

这样一来也就实现了我们通常所说的前后端分离

假设这样的一个应用场景就是任务管理系统(想来想去感觉还是这个应用场景比较容易理解):

我们需要：

Todo component(每一个任务当然也可以执行删除和已完成的状态)
Todos component(所有任务)
TodoForm component(添加任务)

在后端我们可以执行

$ php artisan make:model Todo -m

去生成我们的任务表然后在数据库里生成一定的测试数据
其中todos表的结构是这样的:

Schema::create('todos', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->boolean('completed')->default(false);
            $table->timestamps();
});

定义好表的内容结构之后我们去完成一些我们的Factory:

$factory->define(App\Todo::class, function (Faker\Generator $faker) {
    return [
        'title' => $faker->paragraph,
    ];
});

当然不要忘了在Todo model里去声明我们的fillable:

 class Todo extends Model
 {
     protected $fillable = ['title'];
 }

完成之后去用我们的tinker去生成大概10条数据(这里就不作介绍)

生成完毕我们的数据之后我们需要在routes的api.php里给出我们的数据:

Route::get('/todos',function(){
    $todos = Todo::all();
    return $todos;
})->middleware('api');

有了数据之后我们在前端VueJs项目的组件里就要去获取我们提供的api里的数据
这里就是我们的App.vue里需要我们后端提供的数据:

export default{
        computed: {
            //todos就需要我们后端传过来的数据
            todos () {
               ...
            }
        },  
    }

这样才算完成我们前后端的一个流程 😆

2.前端去处理后端数据

1.后端的数据已经准备好这时我们的vueJs项目就需要发起http请求去得到我们的数据

vueJs之前官方推荐的是使用vue-resource 但是后来作者有给我们推荐了vue-axios
使用这个package的话我们去执行:

如果你只需要在vueJs项目区使用axios的话就使用这个package 这个在之前的package做了一定的vue兼容
https://github.com/imcvampire/vue-axios

$ npm install --save axios vue-axios

安装完成之后我们就可以在我们的main.js去添加配置:

import axios from 'axios'
import VueAxios from 'vue-axios'

//去声明下这个package
Vue.use(VueAxios, axios)

现在我们就可以去App.vue里的mounted使用我们刚刚引入的package：

export default {
  name: 'app',
  mounted(){
    this.axios.get('http://localhost:8000/api/todos').then(response => {
        //获取我们后端api的数据(response.data)  
        ...
    })
   },
  components: {
    Hello
  }
}

至于this.axios.get()这个用法其实和我们vue-resource的tihs.$http.get()的用法是差不多的
而这个package在github上也给出了用法

这个时候我们发现并不能成功获取到我们的数据是因为涉及到跨域这个问题当然在laravel也有package给出了解决方案
https://github.com/barryvdh/laravel-cors

这个package就是去解决laravel作为后端api跨域的问题

安装的话参照github上的步骤就行了

安装完毕之后我们在路由上需要去添加我们的cors这个middleware:

Route::get('/todos',function(){
    $todos = Todo::all();
    return $todos;
})->middleware('api','cors');

添加完毕之后再去刷新我们的浏览器我们发现数据已经成功获取到了

他会返回相应的我们之前生成的10条测试数据的object

2.拿到我们的数据后我们就去在vueJs项目中去展示
我们去初始化我们的todos为一个空的数组在拿到后端数据后再赋予给我们的todos:

export default {
  name: 'app',
  data(){
  todos:[]
  },
  mounted(){
  this.axios.get('http://localhost:8000/api/todos').then(response => {
    this.todos = response.data
    })
   },
  components: {
    Hello
  }
}

已经拿到我们后端的API数据并且已经存放在todos里接下来怎么去展示就是看业务的要求了

到这我们其实就实现了以vueJs作为前端项目 laravel作为后端API 的前后端分离这种开发模式了

这样的话我们只需要后端去提供API 前端去请求我们的API去获取所需要的数据并在前端进行渲染展示

我们后端只需要去关心前端需要什么的数据并去提供这个API 而我们的前端则是要去关心怎么渲染这些数据

当然这只是获取到我们所有的数据我们的业务要求肯定远不止这些比如我们对数据的CURD这些其实我们都可以通过类似的
形式去实现但总的来说我们前后端的业务就是这样的一个处理流程