{"id":4175,"date":"2017-12-12T07:00:40","date_gmt":"2017-12-12T15:00:40","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=4175"},"modified":"2025-06-13T18:45:53","modified_gmt":"2025-06-14T01:45:53","slug":"full-stack-node-js-vue-js-couchbase-nosql","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/full-stack-node-js-vue-js-couchbase-nosql\/","title":{"rendered":"Indo para a pilha completa com Node.js, Vue.js e Couchbase NoSQL"},"content":{"rendered":"

Se voc\u00ea est\u00e1 acompanhando, sou um grande defensor do desenvolvimento do Node.js e da pilha de desenvolvimento JavaScript. Anteriormente, escrevi sobre o Pilha Couchbase, Express, AngularJS e Node.js (CEAN)<\/a> e modernizamos a API de back-end com o Hapi.js<\/a>uma alternativa popular ao Express. Sou um grande f\u00e3 do Angular, mas recentemente tenho explorado a cada vez mais popular estrutura Vue.js.<\/p>\n

Veremos como criar um aplicativo de pilha completa usando a pilha JavaScript que consiste em Node.js, Hapi, Vue.js e Couchbase<\/a> NoSQL. Como todos os caracteres iniciais das tecnologias s\u00e3o consoantes, n\u00e3o tentarei criar um acr\u00f4nimo para elas.<\/p>\n

<\/p>\n

O aplicativo que criamos ter\u00e1 um modelo de dados semi-simplista. Armazenaremos informa\u00e7\u00f5es sobre pessoas e endere\u00e7os e configuraremos como os endere\u00e7os est\u00e3o relacionados a determinadas pessoas.<\/p>\n

\"Hapi.js<\/p>\n

O backend do Node.js com Hapi demonstrar\u00e1 o uso de N1QL e muta\u00e7\u00f5es de subdocumentos no banco de dados. O Vue.js<\/a> nos dar\u00e1 uma sa\u00edda semi-atrativa para trabalhar com nossa API.<\/p>\n

Configura\u00e7\u00e3o do Couchbase para consulta e controle de acesso com base em fun\u00e7\u00e3o<\/h2>\n

Antes de come\u00e7armos a desenvolver nossa API RESTful que se comunica com o banco de dados NoSQL do Couchbase, o banco de dados deve ser configurado corretamente. Vamos supor que voc\u00ea j\u00e1 tenha instalado o Servidor Couchbase 5<\/a> ou superior.<\/p>\n

Com o Couchbase pronto para funcionar, precisamos criar um Bucket para armazenar nossos dados. Este tutorial far\u00e1 refer\u00eancia a um Bucket chamado\u00a0exemplo<\/strong>mas isso realmente n\u00e3o importa, desde que voc\u00ea seja consistente.<\/p>\n

\"Couchbase<\/p>\n

O Bucket n\u00e3o precisa de nenhuma configura\u00e7\u00e3o especial para este exemplo.<\/p>\n

Com o Bucket dispon\u00edvel, precisamos criar um usu\u00e1rio com permiss\u00e3o para trabalhar com o Bucket. Para obter informa\u00e7\u00f5es sobre a cria\u00e7\u00e3o de controle de acesso baseado em fun\u00e7\u00e3o (RBAC), consulte um artigo anterior que escrevi intitulado,\u00a0Proteja seus dados NoSQL com o controle de acesso baseado em fun\u00e7\u00e3o do Couchbase<\/a>. A conta precisar\u00e1 de Leitor de dados<\/strong>, Gravador de dados<\/strong>e Sele\u00e7\u00e3o de consulta<\/strong> fun\u00e7\u00f5es. Isso nos permitir\u00e1 realizar opera\u00e7\u00f5es CRUD no banco de dados, bem como executar consultas N1QL.<\/p>\n

Por fim, precisamos preparar um \u00edndice para suporte a consultas N1QL.<\/p>\n

\"Couchbase<\/p>\n

Em um ambiente de produ\u00e7\u00e3o, voc\u00ea dever\u00e1 criar um \u00edndice para cada consulta que deseja executar. Para o nosso exemplo, usaremos um \u00edndice prim\u00e1rio que \u00e9 um \u00edndice de prototipagem.<\/p>\n

Execute a seguinte consulta para criar o \u00edndice:<\/p>\n

CREATE PRIMARY INDEX ON `example`;<\/pre>\n
O \u00edndice prim\u00e1rio nos proporcionar\u00e1 a conveni\u00eancia de poder executar qualquer consulta em nosso Bucket, mas com o custo do desempenho. Os \u00edndices personalizados proporcionar\u00e3o um desempenho muito melhor.<\/p>\n
Nesse momento, podemos iniciar o desenvolvimento.<\/p>\n
Desenvolvimento de um back-end da Web com o Node.js e a estrutura Hapi<\/h2>\n
Com o Couchbase pronto para uso, podemos come\u00e7ar a desenvolver o aplicativo Node.js com Hapi. Se voc\u00ea j\u00e1 viu meu Artigo anterior<\/a>No caso do Node js e do Couchbase, grande parte do material ser\u00e1 mantido. No entanto, este exemplo ser\u00e1 um pouco mais completo em rela\u00e7\u00e3o ao que o Node.js e o Couchbase podem fazer.<\/p>\n
Supondo que voc\u00ea tenha o Node.js instalado, precisamos criar um novo projeto. Na CLI, execute o seguinte:<\/p>\n
npm init -y\r\nnpm install hapi joi couchbase uuid --save<\/pre>\n
Os comandos acima inicializar\u00e3o um novo projeto e instalar\u00e3o o hapi<\/code> para o Hapi.js, o pacote joi<\/code> para valida\u00e7\u00e3o de dados, o pacote couchbase<\/code> para intera\u00e7\u00e3o com o Couchbase, e o pacote uuid<\/code> para gerar cadeias de caracteres exclusivas.<\/p>\n
Em seguida, crie um\u00a0app.js<\/strong> que conter\u00e1 todo o nosso c\u00f3digo Node.js. Para come\u00e7ar, adicione o seguinte ao arquivo\u00a0app.js<\/strong> file:<\/p>\n
const Couchbase = require(\"couchbase\");\r\nconst Hapi = require(\"hapi\");\r\nconst Joi = require(\"joi\");\r\nconst UUID = require(\"uuid\");\r\n\r\nconst server = new Hapi.Server();\r\nconst cluster = novo Couchbase.Cluster(\"couchbase:\/\/localhost\");\r\ncluster.authenticate(\"demo\", \"123456\");\r\nconst bucket = cluster.openBucket(\"example\");\r\n\r\nserver.connection({ host: \"localhost\", port: 3000, routes: { cors: true } });\r\n\r\nbucket.on(\"error\", error => {\r\n    throw error;\r\n});\r\n\r\nserver.start(error => {\r\n    if(error) {\r\n        throw error;\r\n    }\r\n    console.log(\"Listening at \" + server.info.uri);\r\n});<\/pre>\n
O c\u00f3digo acima importar\u00e1 nossas depend\u00eancias, se conectar\u00e1 \u00e0 nossa inst\u00e2ncia do Couchbase usando as informa\u00e7\u00f5es que especificamos na etapa anterior e configurar\u00e1 nosso servidor Hapi para operar em https:\/\/localhost:3000.<\/p>\n
Ao definir nossas informa\u00e7\u00f5es de conex\u00e3o, optamos por ativar o compartilhamento de recursos entre origens (CORS). Isso permitir\u00e1 que nosso aplicativo Vue.js se comunique com o aplicativo Node.js, mesmo que eles estejam operando em portas diferentes. Mais informa\u00e7\u00f5es sobre CORS com o Hapi podem ser encontradas em um Artigo anterior<\/a> que eu escrevi.<\/p>\n
Neste ponto, podemos come\u00e7ar a definir as rotas de endpoint para nossa API.<\/p>\n
O objetivo \u00e9 criar dados para pessoas e endere\u00e7os no Couchbase. Como atualmente n\u00e3o existem dados para essas duas categorias, faz sentido come\u00e7ar com endpoints que executam a cria\u00e7\u00e3o de dados.<\/p>\n
server.route({\r\n    method: \"POST\",\r\n    path: \"\/person\",\r\n    config: {\r\n        validate: {\r\n            payload: {\r\n                firstname: Joi.string().required(),\r\n                lastname: Joi.string().required(),\r\n                type: Joi.string().forbidden().default(\"person\"),\r\n                timestamp (registro de data e hora): Joi.any().forbidden().default((new Date).getTime())\r\n            }\r\n        }\r\n    },\r\n    handler: (request, response) => {\r\n        var id = UUID.v4();\r\n        bucket.insert(id, request.payload, (error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            request.payload.id = id;\r\n            response(request.payload);\r\n        });\r\n    }\r\n});<\/pre>\n
O c\u00f3digo acima criar\u00e1 um endpoint que aceita solicita\u00e7\u00f5es POST. Supondo que a carga \u00fatil de JSON enviada com a solicita\u00e7\u00e3o atenda aos crit\u00e9rios da l\u00f3gica de valida\u00e7\u00e3o, o manipulador<\/code> ser\u00e1 usado. Ser\u00e1 gerada uma identifica\u00e7\u00e3o exclusiva e a carga \u00fatil ser\u00e1 salva com a identifica\u00e7\u00e3o criada. Em caso de sucesso, a carga \u00fatil com o ID ser\u00e1 devolvida ao cliente.<\/p>\n
Uma l\u00f3gica semelhante pode ser usada na cria\u00e7\u00e3o de endere\u00e7os:<\/p>\n
server.route({\r\n    method: \"POST\",\r\n    path: \"\/address\",\r\n    config: {\r\n        validate: {\r\n            payload: {\r\n                city: Joi.string().required(),\r\n                state: Joi.string().required(),\r\n                type: Joi.string().forbidden().default(\"address\"),\r\n                timestamp: Joi.any().forbidden().default((new Date).getTime())\r\n            }\r\n        }\r\n    },\r\n    handler: (request, response) => {\r\n        var id = UUID.v4();\r\n        bucket.insert(id, request.payload, (error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            request.payload.id = id;\r\n            response(request.payload);\r\n        });\r\n    }\r\n});<\/pre>\n
A l\u00f3gica de valida\u00e7\u00e3o dos endere\u00e7os \u00e9 um pouco diferente, mas todo o resto permanece o mesmo. Essa mesma l\u00f3gica pode ser transferida para praticamente qualquer endpoint de cria\u00e7\u00e3o com solicita\u00e7\u00f5es POST.<\/p>\n
Com os documentos dispon\u00edveis no Couchbase, podemos tentar consult\u00e1-los. Faz sentido criar uma consulta especializada que encontre pessoa<\/code> documentos ou endere\u00e7o<\/code> documentos. Para fazer isso, usaremos o N1QL.<\/p>\n
server.route({\r\n    method: \"GET\",\r\n    path: \"\/addresses\",\r\n    handler: (request, response) => {\r\n        var statement = \"SELECT META(address).id, address.* FROM example AS address WHERE address.type = 'address'\";\r\n        var query = Couchbase.N1qlQuery.fromString(statement);\r\n        bucket.query(query, (error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            response(result);\r\n        });\r\n    }\r\n});<\/pre>\n
A rota acima usar\u00e1 uma consulta N1QL que obt\u00e9m todos os documentos e suas chaves de documento, desde que contenham uma propriedade chamada tipo<\/code> que \u00e9 igual a endere\u00e7o<\/code>.<\/p>\n
Da mesma forma, poder\u00edamos fazer a mesma coisa para pessoa<\/code> documentos:<\/p>\n
server.route({\r\n    method: \"GET\",\r\n    path: \"\/people\",\r\n    handler: (request, response) => {\r\n        var statement = \"SELECT META(person).id, person.* FROM example AS person WHERE person.type = 'person'\";\r\n        var query = Couchbase.N1qlQuery.fromString(statement);\r\n        bucket.query(query, (error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            response(result);\r\n        });\r\n    }\r\n});<\/pre>\n
No entanto, isso \u00e9 enfadonho, apenas consultar documentos com base em suas tipo<\/code> propriedade. Provavelmente, devemos estabelecer uma rela\u00e7\u00e3o entre os dois tipos.<\/p>\n
A ideia aqui \u00e9 criar uma matriz dentro do pessoa<\/code> documentos que cont\u00eam um ID para cada endere\u00e7o ao qual est\u00e3o associados. Em vez de obter um documento inteiro, criar ou atualizar a matriz e salvar novamente, faremos uma muta\u00e7\u00e3o de subdocumento diretamente no banco de dados.<\/p>\n
Veja o seguinte endpoint, por exemplo:<\/p>\n
server.route({\r\n    method: \"PUT\",\r\n    path: \"\/person\/address\/{personid}\",\r\n    config: {\r\n        validate: {\r\n            payload: {\r\n                addressid: Joi.string().required()\r\n            }\r\n        }\r\n    },\r\n    handler: (request, response) => {\r\n        bucket.mutateIn(request.params.personid).arrayAppend(\"addresses\", request.payload.addressid, true).execute((error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            bucket.get(request.params.personid, (error, result) => {\r\n                if(error) {\r\n                    return response({ code: error.code, message: error.message }).code(500);\r\n                }\r\n                response(result.value);\r\n            });\r\n        });\r\n    }\r\n});<\/pre>\n
O ponto de extremidade acima espera que haja um par\u00e2metro de rota e uma carga \u00fatil em cada solicita\u00e7\u00e3o. O par\u00e2metro de rota \u00e9 o ID de um pessoa<\/code> e o payload conter\u00e1 um id de um documento endere\u00e7o<\/code> documento.<\/p>\n
Ao usar o mutateIn<\/code> podemos fornecer um documento a ser alterado e um caminho para a propriedade que deve ser alterada. Nesse caso, o pessoa<\/code> ser\u00e1 alterado, e estaremos adicionando valores a um documento endere\u00e7os<\/code> dentro dele. Se o endere\u00e7os<\/code> n\u00e3o existe, n\u00e3o se preocupe, ela ser\u00e1 criada.<\/p>\n
Depois que a muta\u00e7\u00e3o ocorrer, vamos extrair todo o documento que sofreu muta\u00e7\u00e3o e devolv\u00ea-lo ao cliente.<\/p>\n
Agora podemos fazer uma consulta N1QL mais interessante em nossos dados. Confira este endpoint revisado para coletar pessoa<\/code> documentos:<\/p>\n
server.route({\r\n    method: \"GET\",\r\n    path: \"\/people\",\r\n    handler: (request, response) => {\r\n        var statement = \"SELECT META(person).id, person.firstname, person.lastname, (SELECT address.city, address.state FROM example AS address USE KEYS person.addresses) AS addresses FROM example AS person WHERE person.type = 'person'\";\r\n        var query = Couchbase.N1qlQuery.fromString(statement);\r\n        bucket.query(query, (error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            response(result);\r\n        });\r\n    }\r\n});<\/pre>\n
Agora estamos fazendo uma subconsulta. N\u00e3o estamos fazendo apenas uma consulta simples porque uma matriz de valores de identifica\u00e7\u00e3o de endere\u00e7o n\u00e3o \u00e9 muito \u00fatil para n\u00f3s. Em vez disso, a subconsulta carrega esses valores de id para que nossos resultados tenham endere\u00e7os reais neles.<\/p>\n
Legal, n\u00e3o \u00e9?<\/p>\n
Vamos concluir nossa API RESTful com um \u00faltimo endpoint.<\/p>\n
server.route({\r\n    method: \"GET\",\r\n    path: \"\/address\/{addressid}\",\r\n    handler: (request, response) => {\r\n        bucket.get(request.params.addressid, (error, result) => {\r\n            if(error) {\r\n                return response({ code: error.code, message: error.message }).code(500);\r\n            }\r\n            response(result.value);\r\n        });\r\n    }\r\n});<\/pre>\n
O ponto de extremidade acima nos permitir\u00e1 retornar um \u00fanico endere\u00e7o espec\u00edfico com base em sua chave de documento.<\/p>\n
Com a API criada, voc\u00ea poderia test\u00e1-la facilmente com o Postman ou uma ferramenta semelhante. No entanto, vamos criar um frontend para ela com o Vue.js.<\/p>\n
Cria\u00e7\u00e3o de um front-end de cliente com o Vue.js<\/h2>\n
A ideia por tr\u00e1s do frontend \u00e9 que estaremos fazendo solicita\u00e7\u00f5es HTTP para o backend que acabamos de criar. A maior parte do nosso trabalho ser\u00e1 nas solicita\u00e7\u00f5es, na vincula\u00e7\u00e3o de dados e na atratividade geral da nossa interface do usu\u00e1rio.<\/p>\n
Se voc\u00ea for novo no Vue.js, certifique-se de obter a CLI do Vue. Em um novo diret\u00f3rio, execute o seguinte com a CLI do Vue:<\/p>\n
vue init front-end do webpack<\/pre>\n
O comando acima iniciar\u00e1 o processo de scaffolding para o Vue.js. Selecione\u00a0n\u00e3o<\/strong> para tudo o que for solicitado, pois n\u00e3o usaremos todos esses recursos. Quando se trata de um projeto aut\u00f4nomo (compilador e tempo de execu\u00e7\u00e3o) versus somente tempo de execu\u00e7\u00e3o, isso n\u00e3o importa para este exemplo.<\/p>\n
Quando o andaime estiver pronto, execute os seguintes comandos:<\/p>\n
cd frontend\r\nnpm install<\/pre>\n
Os comandos acima far\u00e3o o download de todas as depend\u00eancias necess\u00e1rias para o projeto b\u00e1sico. No entanto, precisamos de uma depend\u00eancia para fazer solicita\u00e7\u00f5es HTTP com o Vue.js. Execute o seguinte na CLI:<\/p>\n
npm install axios --save<\/pre>\n
Este projeto usar\u00e1 o \u00e1xis<\/a> pacote. Para obter mais informa\u00e7\u00f5es sobre o axios e fazer solicita\u00e7\u00f5es HTTP com o Vue.js, confira um tutorial anterior que escrevi intitulado,\u00a0Consumir dados de API remota via HTTP em um aplicativo da Web Vue.js<\/a>.<\/p>\n
Em seu projeto, voc\u00ea deve ter um src\/App.vue<\/strong> arquivo. Para simplificar, este ser\u00e1 um aplicativo de p\u00e1gina \u00fanica e arquivo \u00fanico. Ignore quaisquer outros componentes que tenham sido criados com o scaffold.<\/p>\n
Antes de come\u00e7armos a adicionar a marca\u00e7\u00e3o HTML e a l\u00f3gica JavaScript, vamos incluir Bootstrap<\/a> como nossa estrutura de temas. Abra a se\u00e7\u00e3o\u00a0index.html<\/strong> e fa\u00e7a com que ele se pare\u00e7a com o seguinte:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <meta charset="utf-8">\r\n        <title>vue-project<\/title>\r\n        <link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css" \/>\r\n    <\/head>\r\n    <body>\r\n        <div id="app"><\/div>\r\n        <!-- built files will be auto injected -->\r\n        <script src="https:\/\/code.jquery.com\/jquery-3.2.1.min.js"><\/script>\r\n        <script src="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js"><\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
A maior parte das informa\u00e7\u00f5es acima foi extra\u00edda do Documenta\u00e7\u00e3o de introdu\u00e7\u00e3o ao Bootstrap<\/a>. Agora, quando come\u00e7armos a codificar no\u00a0src\/App.vue<\/strong> arquivo, ele parecer\u00e1 um pouco mais atraente.<\/p>\n
Como na maioria dos arquivos de projeto do Vue, h\u00e1 um <template><\/code>, <script><\/code>e <style><\/code> bloco. Nosso <style><\/code> n\u00e3o ter\u00e1 nada de especial adicionado, portanto, abra o bloco\u00a0src\/App.vue<\/strong> e inclua o seguinte:<\/p>\n
#app {\r\n        font-family: 'Avenir', Helvetica, Arial, sans-serif;\r\n        -webkit-font-smoothing: antialiased;\r\n        -moz-osx-font-smoothing: grayscale;\r\n        cor: #2c3e50;\r\n        margin-top: 30px;\r\n    }<\/pre>\n
A maior parte do nosso trabalho estar\u00e1 nos outros dois blocos de c\u00f3digo. Para simplificar, come\u00e7aremos com a l\u00f3gica e depois terminaremos com a interface do usu\u00e1rio.<\/p>\n
No \u00e2mbito do projeto\u00a0src\/App.vue<\/strong> inclua o seguinte c\u00f3digo JavaScript:<\/p>\n
<script>\r\n    import axios from \"axios\";\r\n    export default {\r\n        name: 'app',\r\n        data() {\r\n            return {\r\n                input: {\r\n                    person: {\r\n                        firstname: \"\",\r\n                        lastname: \"\"\r\n                    },\r\n                    address: {\r\n                        city: \"\",\r\n                        state: \"\"\r\n                    },\r\n                    addressid: \"\"\r\n                },\r\n                people: [],\r\n                addresses: []\r\n            }\r\n        },\r\n        mounted() {\r\n            axios({ method: \"GET\", url: \"https:\/\/localhost:3000\/people\" }).then(result => {\r\n                this.people = result.data;\r\n            });\r\n            axios({ method: \"GET\", url: \"https:\/\/localhost:3000\/addresses\" }).then(result => {\r\n                this.addresses = result.data;\r\n            });\r\n        },\r\n        methods: {\r\n            createPerson() {\r\n                if(this.input.person.firstname != \"\" && this.input.person.lastname != \"\") {\r\n                    axios({ method: \"POST\", url: \"https:\/\/localhost:3000\/person\", data: this.input.person, headers: { \"content-type\": \"application\/json\" }}).then(result => {\r\n                        this.people.push(result.data);\r\n                        this.input.person.firstname = \"\";\r\n                        this.input.person.lastname = \"\";\r\n                    });\r\n                }\r\n            },\r\n            createAddress() {\r\n                if(this.input.address.city != \"\" && this.input.address.state != \"\") {\r\n                    axios({ method: \"POST\", url: \"https:\/\/localhost:3000\/address\", data: this.input.address, headers: { \"content-type\": \"application\/json\" }}).then(result => {\r\n                        this.addresses.push(result.data);\r\n                        this.input.address.city = \"\";\r\n                        this.input.address.state = \"\";\r\n                    });\r\n                }\r\n            },\r\n            linkAddress(personid) {\r\n                if(this.input.addressid != undefined && personid != \"\") {\r\n                    axios({ method: \"PUT\", url: \"https:\/\/localhost:3000\/person\/address\/\" + personid, data: { addressid: this.input.addressid }, headers: { \"content-type\": \"application\/json\" }}).then(result => {\r\n                        for(let i = 0; i < this.people.length; i++) {\r\n                            if(this.people[i].id == personid) {\r\n                                if(this.people[i].addresses == undefined) {\r\n                                    this.people[i].addresses = [];\r\n                                }\r\n                                axios({ method: \"GET\", url: \"https:\/\/localhost:3000\/address\/\" + this.input.addressid }).then(result => {\r\n                                    this.people[i].addresses.push(result.data);\r\n                                    this.input.addressid = \"\";\r\n                                });\r\n                            }\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n        }\r\n    }\r\n<\/script><\/pre>\n
H\u00e1 muita coisa acontecendo no texto acima, portanto, vamos detalh\u00e1-lo.<\/p>\n
A primeira parte central da l\u00f3gica que adicionamos est\u00e1 relacionada \u00e0 inicializa\u00e7\u00e3o de dados. A dados<\/code> nos permitir\u00e1 inicializar as vari\u00e1veis usadas em todo esse arquivo espec\u00edfico.<\/p>\n
data() {\r\n    return {\r\n        input: {\r\n            person: {\r\n                firstname: \"\",\r\n                lastname: \"\"\r\n            },\r\n            address: {\r\n                city: \"\",\r\n                state: \"\"\r\n            },\r\n            addressid: \"\"\r\n        },\r\n        pessoas: [],\r\n        addresses: []\r\n    }\r\n},<\/pre>\n
No dados<\/code> m\u00e9todo, o entrada<\/code> ser\u00e1 vinculado a um formul\u00e1rio na interface do usu\u00e1rio. No nosso caso, teremos dois formul\u00e1rios, um para pessoa<\/code> e um para endere\u00e7o<\/code>. Por padr\u00e3o, queremos que os valores fiquem em branco. Tamb\u00e9m estamos inicializando nossa lista de pessoas<\/code> e nossa lista de endere\u00e7os<\/code> que ser\u00e1 obtido da API do Node.js.<\/p>\n
Ap\u00f3s a inicializa\u00e7\u00e3o das vari\u00e1veis, precisamos carregar alguns dados do servidor. Isso pode ser feito na se\u00e7\u00e3o montado<\/code> m\u00e9todo.<\/p>\n
mounted() {\r\n    axios({ method: \"GET\", url: \"https:\/\/localhost:3000\/people\" }).then(result => {\r\n        this.people = result.data;\r\n    });\r\n    axios({ method: \"GET\", url: \"https:\/\/localhost:3000\/addresses\" }).then(result => {\r\n        this.addresses = result.data;\r\n    });\r\n},<\/pre>\n
Quando o aplicativo \u00e9 carregado, \u00e9 feita uma solicita\u00e7\u00e3o de pessoas e uma solicita\u00e7\u00e3o de endere\u00e7os.<\/p>\n
Isso nos leva \u00e0 lista de m\u00e9todos que podem ser chamados a partir do HTML. O m\u00e9todo createPerson<\/code> pegar\u00e1 os dados do formul\u00e1rio da pessoa e os enviar\u00e1 \u00e0 API para serem salvos. Da mesma forma, o m\u00e9todo createAddress<\/code> far\u00e1 o mesmo, mas com informa\u00e7\u00f5es de endere\u00e7o.<\/p>\n
O linkAddress<\/code> \u00e9 um pouco diferente:<\/p>\n
linkAddress(personid) {\r\n    if(this.input.addressid != undefined && personid != \"\") {\r\n        axios({ method: \"PUT\", url: \"https:\/\/localhost:3000\/person\/address\/\" + personid, data: { addressid: this.input.addressid }, headers: { \"content-type\": \"application\/json\" }}).then(result => {\r\n            for(let i = 0; i  {\r\n                        this.people[i].addresses.push(result.data);\r\n                        this.input.addressid = \"\";\r\n                    });\r\n                }\r\n            }\r\n        });\r\n    }\r\n}<\/pre>\n
O linkAddress<\/code> pegar\u00e1 um determinado ID de pessoa e um determinado ID de endere\u00e7o e os enviar\u00e1 ao nosso endpoint da API de subdocumento. Quando terminar, ele atualizar\u00e1 as informa\u00e7\u00f5es nas vari\u00e1veis locais para exibi\u00e7\u00e3o na interface do usu\u00e1rio.<\/p>\n
Isso nos leva \u00e0 parte HTML do nosso arquivo de aplicativo. Dentro da se\u00e7\u00e3o <template><\/code> bloco, dever\u00edamos ter algo como o seguinte:<\/p>\n
<template>\r\n    <div id="app">\r\n        <div class="container">\r\n            <div class="row">\r\n                <div class="col-md-6">\r\n                    <div class="well">\r\n                        <form action="">\r\n                            <div class="form-group">\r\n                                <label for="firstname">Primeiro nome<\/label>\r\n                                <input type="text" v-model="input.person.firstname" class="form-control" id="firstname" placeholder="Primeiro nome">\r\n                            <\/div>\r\n                            <div class="form-group">\r\n                                <label for="lastname">Sobrenome<\/label>\r\n                                <input type="text" v-model="input.person.lastname" class="form-control" id="lastname" placeholder="Sobrenome">\r\n                            <\/div>\r\n                            <button type="button" v-on:click="createPerson()" class="btn btn-default">Salvar<\/button>\r\n                        <input type="hidden" name="trp-form-language" value="pt"\/><\/form>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class="col-md-6">\r\n                    <div class="well">\r\n                        <form action="">\r\n                            <div class="form-group">\r\n                                <label for="city">Cidade<\/label>\r\n                                <input type="text" v-model="input.address.city" class="form-control" id="city" placeholder="Cidade">\r\n                            <\/div>\r\n                            <div class="form-group">\r\n                                <label for="state">Estado<\/label>\r\n                                <input type="text" v-model="input.address.state" class="form-control" id="state" placeholder="Estado">\r\n                            <\/div>\r\n                            <button type="button" v-on:click="createAddress()" class="btn btn-default">Salvar<\/button>\r\n                        <input type="hidden" name="trp-form-language" value="pt"\/><\/form>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class="row">\r\n                <div class="col-md-12">\r\n                    <ul class="list-group">\r\n                        <li v-for="(person, index) in people" class="list-group-item">\r\n                            {{ person.firstname }} {{ person.lastname }} -\r\n                            <span v-for="(address, index) in person.addresses">\r\n                                {{ address.city }}, {{ address.state }} \/\r\n                            <\/span>\r\n                            <p>\r\n                                <form action="">\r\n                                    <div v-for="(address, index) in addresses">\r\n                                        <input type="radio" name="addressid" v-bind:value="address.id" v-model="input.addressid"> {{ address.city }}, {{ address.state }}\r\n                                    <\/div>\r\n                                    <button type="button" v-on:click="linkAddress(person.id)" class="btn btn-default">Salvar<\/button>\r\n                                <input type="hidden" name="trp-form-language" value="pt"\/><\/form>\r\n                            <\/p>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/template><\/pre>\n
A maior parte do HTML acima \u00e9 um boilerplate do Bootstrap. Se voc\u00ea j\u00e1 trabalhou com o Bootstrap antes, saber\u00e1 que h\u00e1 muita prepara\u00e7\u00e3o envolvida.<\/p>\n
V\u00e1 para a se\u00e7\u00e3o a seguir:<\/p>\n
<form action="">\r\n    <div class="form-group">\r\n        <label for="firstname">Primeiro nome<\/label>\r\n        <input type="text" v-model="input.person.firstname" class="form-control" id="firstname" placeholder="Primeiro nome">\r\n    <\/div>\r\n    <div class="form-group">\r\n        <label for="lastname">Sobrenome<\/label>\r\n        <input type="text" v-model="input.person.lastname" class="form-control" id="lastname" placeholder="Sobrenome">\r\n    <\/div>\r\n    <button type="button" v-on:click="createPerson()" class="btn btn-default">Salvar<\/button>\r\n<input type="hidden" name="trp-form-language" value="pt"\/><\/form><\/pre>\n
Observe que o entrada<\/code> que hav\u00edamos inicializado, agora est\u00e1 vinculado aos elementos do formul\u00e1rio. Essa \u00e9 uma vincula\u00e7\u00e3o de dados bidirecional.<\/p>\n
Quando o bot\u00e3o do formul\u00e1rio \u00e9 pressionado para esse formul\u00e1rio espec\u00edfico, o bot\u00e3o createPerson<\/code> \u00e9 chamado. O outro elemento do formul\u00e1rio se comporta da mesma forma.<\/p>\n
Na parte principal da interface do usu\u00e1rio, temos uma lista de dados recuperados do servidor:<\/p>\n
<ul class="list-group">\r\n    <li v-for="(person, index) in people" class="list-group-item">\r\n        {{ person.firstname }} {{ person.lastname }} -\r\n        <span v-for="(address, index) in person.addresses">\r\n            {{ address.city }}, {{ address.state }} \/\r\n        <\/span>\r\n        <p>\r\n            <form action="">\r\n                <div v-for="(address, index) in addresses">\r\n                    <input type="radio" name="addressid" v-bind:value="address.id" v-model="input.addressid"> {{ address.city }}, {{ address.state }}\r\n                <\/div>\r\n                <button type="button" v-on:click="linkAddress(person.id)" class="btn btn-default">Salvar<\/button>\r\n            <input type="hidden" name="trp-form-language" value="pt"\/><\/form>\r\n        <\/p>\r\n    <\/li>\r\n<\/ul><\/pre>\n
Estamos listando as pessoas, as informa\u00e7\u00f5es de endere\u00e7o expandidas de nossa consulta N1QL do lado do servidor e a intera\u00e7\u00e3o do bot\u00e3o de op\u00e7\u00e3o para emitir a solicita\u00e7\u00e3o de subdocumento.<\/p>\n
Tudo isso \u00e9 feito facilmente com o Vue.js devido \u00e0 forma como a interface do usu\u00e1rio est\u00e1 vinculada \u00e0 camada l\u00f3gica.<\/p>\n
Conclus\u00e3o<\/h2>\n
Voc\u00ea acabou de ver como criar um aplicativo de pilha completa composto estritamente de tecnologias JavaScript. Usamos o Node.js com a estrutura Hapi.js para a camada de backend da API e a estrutura Vue.js para a camada de frontend do navegador da Web. O frontend consome dados do backend e o backend obt\u00e9m seus dados do nosso Couchbase<\/a> Banco de dados NoSQL.<\/p>\n
Como tornamos o aplicativo muito modular, cada um dos componentes pode ser trocado por uma tecnologia diferente. Poder\u00edamos trocar o Node.js por Java ou outra coisa e poder\u00edamos trocar o Vue.js por outra coisa, como o Angular. Se quiser ver como usar pilha completa com Golang e Angular, consulte este tutorial que escrevi com o t\u00edtulo,\u00a0Crie um banco de dados de filmes em pilha completa com Golang, Angular e NoSQL<\/a>.<\/p>\n
Para obter mais informa\u00e7\u00f5es sobre como usar o Couchbase com o Node.js, consulte o Portal do desenvolvedor do Couchbase<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
If you’ve been keeping up, I’m a huge advocate for Node.js development and the JavaScript development stack. Previously I had written about the Couchbase, Express, AngularJS, and Node.js (CEAN) stack and modernized the backend API with Hapi.js, a popular alternative […]<\/p>","protected":false},"author":63,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1814,1815,1816,1822],"tags":[1393,1725,1745,2083],"ppma_author":[9032],"class_list":["post-4175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-best-practices-and-tutorials","category-couchbase-server","category-node-js","tag-api","tag-nosql-database","tag-restful","tag-vue-js"],"acf":[],"yoast_head":"\nGoing Full Stack with Node.js, Vue.js, and Couchbase NoSQL<\/title>\n<meta name=\"description\" content=\"Learn how to create a full stack application with Couchbase as the NoSQL database, Node.js and Hapi for backend, and Vue.js for the frontend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/pt\/full-stack-node-js-vue-js-couchbase-nosql\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a full stack application with Couchbase as the NoSQL database, Node.js and Hapi for backend, and Vue.js for the frontend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/pt\/full-stack-node-js-vue-js-couchbase-nosql\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-12T15:00:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T01:45:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/11\/couchbase-vuejs-hapijs-nodejs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"515\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL\",\"datePublished\":\"2017-12-12T15:00:40+00:00\",\"dateModified\":\"2025-06-14T01:45:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/\"},\"wordCount\":2081,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"keywords\":[\"API\",\"NoSQL Database\",\"restful\",\"vue.js\"],\"articleSection\":[\"Application Design\",\"Best Practices and Tutorials\",\"Couchbase Server\",\"Node.js\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/\",\"name\":\"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-12-12T15:00:40+00:00\",\"dateModified\":\"2025-06-14T01:45:53+00:00\",\"description\":\"Learn how to create a full stack application with Couchbase as the NoSQL database, Node.js and Hapi for backend, and Vue.js for the frontend.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.\",\"sameAs\":[\"https:\/\/www.thepolyglotdeveloper.com\",\"https:\/\/www.facebook.com\/thepolyglotdeveloper\",\"https:\/\/x.com\/nraboy\"],\"url\":\"https:\/\/www.couchbase.com\/blog\/pt\/author\/nic-raboy-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Indo para a pilha completa com Node.js, Vue.js e Couchbase NoSQL","description":"Learn how to create a full stack application with Couchbase as the NoSQL database, Node.js and Hapi for backend, and Vue.js for the frontend.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/pt\/full-stack-node-js-vue-js-couchbase-nosql\/","og_locale":"pt_BR","og_type":"article","og_title":"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL","og_description":"Learn how to create a full stack application with Couchbase as the NoSQL database, Node.js and Hapi for backend, and Vue.js for the frontend.","og_url":"https:\/\/www.couchbase.com\/blog\/pt\/full-stack-node-js-vue-js-couchbase-nosql\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2017-12-12T15:00:40+00:00","article_modified_time":"2025-06-14T01:45:53+00:00","og_image":[{"width":1100,"height":515,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/11\/couchbase-vuejs-hapijs-nodejs.png","type":"image\/png"}],"author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL","datePublished":"2017-12-12T15:00:40+00:00","dateModified":"2025-06-14T01:45:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/"},"wordCount":2081,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["API","NoSQL Database","restful","vue.js"],"articleSection":["Application Design","Best Practices and Tutorials","Couchbase Server","Node.js"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/","url":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/","name":"Indo para a pilha completa com Node.js, Vue.js e Couchbase NoSQL","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2017-12-12T15:00:40+00:00","dateModified":"2025-06-14T01:45:53+00:00","description":"Learn how to create a full stack application with Couchbase as the NoSQL database, Node.js and Hapi for backend, and Vue.js for the frontend.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/full-stack-node-js-vue-js-couchbase-nosql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Going Full Stack with Node.js, Vue.js, and Couchbase NoSQL"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"Blog do Couchbase","description":"Couchbase, o banco de dados NoSQL","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"Blog do Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, defensor dos desenvolvedores, Couchbase","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"Nic Raboy \u00e9 um defensor das modernas tecnologias de desenvolvimento m\u00f3vel e da Web. Ele tem experi\u00eancia em Java, JavaScript, Golang e uma variedade de estruturas, como Angular, NativeScript e Apache Cordova. Nic escreve sobre suas experi\u00eancias de desenvolvimento relacionadas a tornar o desenvolvimento m\u00f3vel e da Web mais f\u00e1cil de entender.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/pt\/author\/nic-raboy-2\/"}]}},"authors":[{"term_id":9032,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","first_name":"Nic","last_name":"Raboy","user_url":"https:\/\/www.thepolyglotdeveloper.com","author_category":"","description":"Nic Raboy \u00e9 um defensor das modernas tecnologias de desenvolvimento m\u00f3vel e da Web. Ele tem experi\u00eancia em Java, JavaScript, Golang e uma variedade de estruturas, como Angular, NativeScript e Apache Cordova. Nic escreve sobre suas experi\u00eancias de desenvolvimento relacionadas a tornar o desenvolvimento m\u00f3vel e da Web mais f\u00e1cil de entender."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/4175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=4175"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/4175\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=4175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=4175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=4175"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/ppma_author?post=4175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}