Blog Javascript

Integrando um backend Node.js com um aplicativo Vue.js

O artigo descreve como integrar um backend Node.js com um aplicativo Vue.js para criar aplicativos web dinâmicos e escaláveis.

vue

16 abr 2023

Integrando um backend Node.js com um aplicativo Vue.js

Vue.js é uma biblioteca JavaScript usada para criar interfaces de usuário reativas e responsivas.

É frequentemente usado em conjunto com um backend Node.js para criar aplicativos web completos.

Neste artigo, vamos explorar como integrar um backend Node.js com um aplicativo Vue.js.

Passo 1: Criando um servidor Node.js

Antes de começar a integrar o backend Node.js com o aplicativo Vue.js, precisamos criar um servidor Node.js.

Vamos usar o Express, um framework Node.js popular, para criar o servidor.

Primeiro, precisamos criar um novo diretório para o projeto e, em seguida, instalar o Express.

Para fazer isso, abra o terminal e digite os seguintes comandos:

mkdir projeto-node-vue
cd projeto-node-vue
npm init -y
npm install express

Agora, vamos criar um arquivo chamado server.js e adicionar o seguinte código:

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

Este código cria um servidor Express que escuta na porta 3000 e retorna "Hello World!" quando acessado.

Para testar o servidor, execute o seguinte comando no terminal:

node server.js

Em seguida, acesse o endereço http://localhost:3000 no navegador. Você deve ver a mensagem "Hello World!".

Passo 2: Adicionando uma API ao servidor

Agora que temos um servidor Node.js funcionando, vamos adicionar uma API que retornará alguns dados quando acessada.

Vamos criar um arquivo chamado data.js e adicionar o seguinte código:

const data = [
  {
    id: 1,
    name: 'Produto 1',
    price: 10.0
  },
  {
    id: 2,
    name: 'Produto 2',
    price: 20.0
  },
  {
    id: 3,
    name: 'Produto 3',
    price: 30.0
  }
]

module.exports = data

Este código cria um array de objetos que representam alguns dados fictícios.

Em seguida, vamos adicionar uma rota ao servidor Express que retornará esses dados quando acessada.

Vamos atualizar o arquivo server.js com o seguinte código:

const express = require('express')
const data = require('./data')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/api/data', (req, res) => {
  res.send(data)
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

Este código adiciona uma rota /api/data ao servidor Express que retorna os dados do arquivo data.js quando acessada.

Para testar a rota, acesse o endereço http://localhost:3000/api/data no navegador.

Você deve ver os dados retornados como um array de objetos.

Passo 3: Criando um aplicativo Vue.js

Agora que temos um servidor Node.js funcionando e uma API que retorna alguns dados, vamos criar um aplicativo Vue.js que consumirá esses dados da API.

Primeiro, precisamos criar um novo diretório para o aplicativo Vue.js. Para fazer isso, abra o terminal e digite os seguintes comandos:

cd ..
mkdir projeto-vue-node
cd projeto-vue-node
npm init -y

Em seguida, vamos instalar o Vue.js e outras dependências necessárias:

npm install vue vue-router axios

O Vue.js é instalado como a biblioteca principal para criar a interface de usuário reativa e responsiva, o Vue Router é usado para gerenciar a navegação entre as páginas do aplicativo e o Axios é usado para fazer chamadas HTTP para a API.

Agora, vamos criar um arquivo chamado index.html na raiz do diretório e adicionar o seguinte código:

<!DOCTYPE html>
<html>
  <head>
    <title>Projeto Vue.js com Node.js</title>
    <script src="https://unpkg.com/vue@3.2.16/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script>
      const routes = [
        { path: '/', component: { template: '<h1>Home</h1>' } },
        { path: '/produtos', component: { template: '<h1>Produtos</h1>' } }
      ]

      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      })

      const app = Vue.createApp({})
      app.use(router)
      app.mount('#app')
    </script>
  </body>
</html>

Este código cria um esqueleto básico do aplicativo Vue.js com duas rotas definidas: a rota inicial '/' que exibe a página inicial e a rota '/produtos' que exibirá uma lista de produtos.

Agora, vamos criar um arquivo chamado Produtos.vue na pasta src/views e adicionar o seguinte código:

<template>
  <div>
    <h1>Produtos</h1>
    <ul>
      <li v-for="produto in produtos" :key="produto.id">
        {{ produto.name }} - R$ {{ produto.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      produtos: []
    }
  },
  async mounted() {
    const response = await axios.get('http://localhost:3000/api/data')
    this.produtos = response.data
  }
}
</script>

Este código define um componente Vue.js chamado Produtos que exibe uma lista de produtos recuperados da API usando o Axios.

Por fim

Por fim, vamos atualizar o arquivo index.html para adicionar a rota '/produtos' ao Vue Router e renderizar o componente Produtos.

Agora, podemos iniciar o servidor Vue.js digitando o seguinte comando no terminal:

npm run serve

Se tudo estiver configurado corretamente, você poderá acessar o aplicativo em http://localhost:8080 e ver a página inicial. Ao clicar no link "Produtos", você será redirecionado para a página de produtos e verá a lista de produtos recuperados da API Node.js.

Conclusão

Concluindo, a integração de um backend Node.js com um aplicativo Vue.js é uma maneira poderosa de criar aplicativos web completos e escaláveis.

Usando o Vue.js para criar a interface do usuário e o Node.js para gerenciar a lógica do servidor e as conexões com o banco de dados, é possível criar aplicativos web complexos e dinâmicos com facilidade.

Neste artigo, mostramos como criar uma API Node.js simples que fornece dados para um aplicativo Vue.js e como integrar esses dois componentes em um aplicativo funcional.

Embora tenhamos usado exemplos simples, as mesmas técnicas podem ser aplicadas a aplicativos mais complexos para criar soluções mais robustas e escaláveis.