![Page 1: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/1.jpg)
DESENVOLVENDO COM NODE.JSProf. Romulo Fagundes Cantanhede
@romulofagundes
![Page 2: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/2.jpg)
NOSSA META
NoSQL - MongoDB
Node.JS
Express
Mongoose
Mongoose Generator
https://github.com/romulofagundes/app-teste/
![Page 3: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/3.jpg)
NOSQL
…Not Only SQL… Banco de dados não relacional, aonde os dados não estão diretamente correlacionados, ou seja, com restrição de integridade (fk).
Vamos entender o MongoDB, que armazena os dados em forma de documento.
Um exemplo prático: Preciso armazenar todas as preferências do meu usuário ‘like' facebook (dinâmico). Como diferenciar filmes, de livros, gostos e afins?
![Page 4: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/4.jpg)
MONGODB
Fundada em 2007, desenvolvido em C++.
Armazena os dados em um formato JSON, com as mesmas propriedades do JSON, com atributos dinâmicos e afins.
https://www.mongodb.com/
![Page 5: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/5.jpg)
MONGODB
Melhor na prática, para entender!
![Page 6: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/6.jpg)
NODE.JS
Baseado no V8, motor de renderização de código aberto do Google.
Possui a possibilidade de usar JS do lado do servidor, com isso é possível trabalhar com requisições HTTP’s (por exemplo).
Um linguagem simples dinâmica, e muito leve! Bem como o próprio JavaScript.
https://nodejs.org/
![Page 7: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/7.jpg)
ANTES DE CONTINUAR…
O que ambos tem em comum?
MongoDB e Node.JS?
![Page 8: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/8.jpg)
EXPRESS.JS
Framework para tratamento de requisição HTTP, que se utiliza do Node.JS.
Permite meios de tratar as requisições HTTP e trabalhar de forma simplificada com tais informações.
Mantém as mesmas características do Node.JS, simples e leve.
E como começar?
http://expressjs.com/
![Page 9: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/9.jpg)
EXPRESS.JS GENERATOR
http://expressjs.com/en/starter/generator.html
$ npm install express-generator -g
$ express app-teste$ cd app-teste && npm install $ DEBUG=app-teste:* npm start
123
![Page 10: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/10.jpg)
TECNOLOGIAS DO EXPRESS.JS
Algumas tecnologias pertinentes:
Pug (Jade) - Utiliza código HTML estilo Like Python.
Express - Responsável por tratar as requisições HTTP.
Demais complementos - Trabalhar com as requisições de forma correta.
![Page 11: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/11.jpg)
MONGOOSE
Ok, ok…creio que todos já ouviram falar de Hibernate. Quem não, é uma teoria denominada Mapeamento Objeto Relacional, em resumo:
Para cada classe, eu tenho uma tabela.
Para cada atributo, eu tenho uma coluna.
Para cada registro, eu tenho uma instância.
Qual a relação com o Mongoose?
…vamos entender…http://mongoosejs.com
![Page 12: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/12.jpg)
MONGOOSE - INSTALAÇÃOPara instalar, dentro da pasta do projeto faça a seguinte "receita de bolo”: $ npm install mongoose --save
Adicionando conexão ao projeto com Express.js (db/index.js):var mongoose = require('mongoose');
var options = { db: { safe: true }, server: { auto_reconnect: true, socketOptions: { keepAlive: 1 } }};
module.exports = function () { mongoose.connect(‘mongodb://127.0.0.1:27017/teste-app',options).connection;};
var db = require('./db')();
Chame a conexão no “app.js”:
![Page 13: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/13.jpg)
MONGOOSE GENERATOR
Complemento, utilizado de forma global, para gerar os Schemas (domínios), a cada para request(controller) e serviço.
Permite gerar código pronto, de forma simplificada, com base no mongoose.
Para instalar:
$ npm install -g express-mongoose-generator
![Page 14: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/14.jpg)
EXEMPLO DO MONGOOSE GEN.
mongoose-gen -m Grupo -f descricao -rmongoose-gen -m Contato -f nome,telefone,dataNascimento:date,preferencias:array,grupo:objectId -r
var grupoRoutes = require('./routes/GrupoRoutes.js');var contatoRoutes = require(‘./routes/ContatoRoutes.js');…app.use('/grupo', grupoRoutes);app.use('/contato', contatoRoutes);
Criado 2 schema’s: Grupo e Contato (!editar contato - rel. Grupo)
Adiciona as novas rotas, no app.js:
![Page 15: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/15.jpg)
TORNANDO O EXEMPLO MAIS PRÁTICO…VUE.JS
![Page 16: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/16.jpg)
VUE.JS
Script JS, que facilita a interação do código HTML com o servidor.
Permite com isso, converter valores de um FORM para um JSON, e facilita o envio de tais informações…e o que o MongoDB armazena? E o que o Express recebe?
https://vuejs.org/
![Page 17: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/17.jpg)
VUE.JS
O Vue.JS é principalmente dividido em 3 partes:
data - Dados que serão acessados pelo código HTML, modelos e listas.
created - Função que está no ciclo de vida do Vue, para inicializar valores.
methods - Métodos que serão acessados no código HTML.
![Page 18: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/18.jpg)
VUE.JS
Jade (Pug) fileGrupo JS
![Page 19: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/19.jpg)
VUE.JS
Init
Get List
Create
![Page 20: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/20.jpg)
VUE.JS
Update
Remove
Todas as chamadas(REST) criadas pelo Mongoose Generation!
![Page 21: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/21.jpg)
FIM?
![Page 22: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/22.jpg)
CRUD CONTATO
O arquivo JS basicamente é o mesmo de grupo.
Muda principalmente o FORM, e como os campos são mapeados.
O que fazer em seguida?
Entender a busca, como tratar os valores, e como relacionar os valores entre schema’s.
Para o CRUD de contato teve um pouco mais de código…
![Page 23: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/23.jpg)
FIM!
![Page 24: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS](https://reader034.vdocuments.mx/reader034/viewer/2022042503/58f230621a28aba0628b4603/html5/thumbnails/24.jpg)
LINKS INTERESSANTES
https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications
https://scotch.io/tutorials/build-a-restful-api-using-node-and-express-4