Integrar uma API Laravel com uma aplicação Vue.js é uma estratégia eficaz para construir aplicações web modernas e escaláveis. Neste guia, vamos explorar passo a passo como criar uma API no Laravel e consumi-la de forma eficiente utilizando Vue.js. Essa abordagem permite separar o back-end e o front-end, proporcionando flexibilidade e manutenção simplificada.
Configurando o Laravel para a API:
1. Criação de Rotas API:
Arquivo routes/api.php: Configure rotas específicas para a API.
Route::get('/produtos', 'ProdutoController@index');
Route::get('/produto/{id}', 'ProdutoController@show');
Route::post('/produto', 'ProdutoController@store');
Route::put('/produto/{id}', 'ProdutoController@update');
Route::delete('/produto/{id}', 'ProdutoController@destroy');
2. Controlador de Produtos:
Comando Artisan para Criação:
php artisan make:controller ProdutoController
Métodos Básicos no Controlador (ProdutoController.php):
public function index()
{
return Produto::all();
}
public function show($id)
{
return Produto::findOrFail($id);
}
public function store(Request $request)
{
return Produto::create($request->all());
}
public function update(Request $request, $id)
{
$produto = Produto::findOrFail($id);
$produto->update($request->all());
return $produto;
}
public function destroy($id)
{
$produto = Produto::findOrFail($id);
$produto->delete();
return 204;
}
Configurando o Vue.js para Consumir a API:
1. Instalando o Axios:
Instalação via npm:
npm install axios
2. Consumindo a API no Vue Component:
Exemplo de Consumo (MeuComponente.vue):
<template>
<div>
<h1>Lista de Produtos</h1>
<ul>
<li v-for="produto in produtos" :key="produto.id">{{ produto.nome }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
produtos: [],
};
},
mounted() {
this.carregarProdutos();
},
methods: {
async carregarProdutos() {
try {
const resposta = await axios.get('http://localhost/api/produtos');
this.produtos = resposta.data;
} catch (erro) {
console.error('Erro ao carregar produtos', erro);
}
},
},
};
</script>
<style scoped>
/* Estilos específicos do componente aqui */
</style>
Comunicação Bidirecional:
1. Enviando Dados para a API:
Exemplo de Envio (MeuComponente.vue):
<template>
<div>
<!-- Formulário para adicionar um novo produto -->
<form @submit.prevent="adicionarProduto">
<input v-model="novoProduto.nome" placeholder="Nome do Produto" required>
<input v-model="novoProduto.preco" type="number" placeholder="Preço do Produto" required>
<button type="submit">Adicionar Produto</button>
</form>
<!-- Lista de Produtos -->
<ul>
<li v-for="produto in produtos" :key="produto.id">{{ produto.nome }} - R$ {{ produto.preco }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
produtos: [],
novoProduto: {
nome: '',
preco: 0,
},
};
},
mounted() {
this.carregarProdutos();
},
methods: {
async carregarProdutos() {
try {
const resposta = await axios.get('http://localhost/api/produtos');
this.produtos = resposta.data;
} catch (erro) {
console.error('Erro ao carregar produtos', erro);
}
},
async adicionarProduto() {
try {
const resposta = await axios.post('http://localhost/api/produto', this.novoProduto);
this.produtos.push(resposta.data);
this.novoProduto = { nome: '', preco: 0 };
} catch (erro) {
console.error('Erro ao adicionar produto', erro);
}
},
},
};
</script>
<style scoped>
/* Estilos específicos do componente aqui */
</style>
Autenticação e Segurança:
1. Configurando Tokens de API:
Método no Controlador (ProdutoController.php):
public function __construct()
{
$this->middleware('auth:api');
}
2. Enviando Token nas Requisições:
Configuração Global do Axios (app.js):
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
Conclusão:
Integrar uma API Laravel com uma aplicação Vue.js é uma estratégia poderosa para desenvolver aplicações modernas e escaláveis. Neste guia, abordamos desde a criação da API no Laravel até o consumo eficiente no Vue.js. Continue explorando recursos adicionais, como autenticação, manipulação de dados complexos e otimizações de desempenho para aprimorar ainda mais sua aplicação. Com essa combinação, você terá uma base sólida para criar aplicações web robustas e eficientes.