Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

DESENVOLVENDO COM
NODE.JS
Prof. Romulo Fagundes Cantanhede
@romulofagundes

NOSSA META
NoSQL - MongoDB
Node.JS
Express
Mongoose
Mongoose Generator
https://github.com/romulofagundes/app-teste/

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 ﬁlmes,
de livros, gostos e aﬁns?

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 aﬁns.
https://www.mongodb.com/

MONGODB
Melhor na prática, para entender!

NODE.JS
Baseado noV8, 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/

ANTES DE CONTINUAR…
O que ambos tem em comum?
MongoDB e Node.JS?

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 simpliﬁcada com tais informações.
Mantém as mesmas características do Node.JS, simples e leve.
E como começar?
http://expressjs.com/

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
1
2
3

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.

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

MONGOOSE - INSTALAÇÃO
Para 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”:

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 simpliﬁcada, com base no
mongoose.
Para instalar:
$ npm install -g express-mongoose-generator

EXEMPLO DO MONGOOSE GEN.
mongoose-gen -m Grupo -f descricao -r
mongoose-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:

TORNANDO O EXEMPLO MAIS
PRÁTICO…VUE.JS

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/

VUE.JS
OVue.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 doVue, para
inicializar valores.
methods - Métodos que serão acessados no código HTML.

VUE.JS
Jade (Pug) ﬁle
Grupo JS

VUE.JS
Update
Remove
Todas as chamadas(REST) criadas pelo Mongoose Generation!

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…

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

Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

Último

Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS