Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
1 gostou3,085 visualizações
O documento resume as principais tecnologias para desenvolvimento web com Node.js, incluindo MongoDB, Express, Mongoose e Vue.js. Explica como cada uma funciona e como podem ser integradas para criar aplicações fullstack com banco de dados NoSQL usando o framework Express e o ORM Mongoose para acessar dados no MongoDB, com interface desenvolvida em Vue.js.
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
- 1. DESENVOLVENDO COM NODE.JS Prof. Romulo Fagundes Cantanhede @romulofagundes
- 2. NOSSA META NoSQL - MongoDB Node.JS Express Mongoose Mongoose Generator https://github.com/romulofagundes/app-teste/
- 3. 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?
- 4. 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/
- 5. MONGODB Melhor na prática, para entender!
- 6. 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/
- 7. ANTES DE CONTINUAR… O que ambos tem em comum? MongoDB e Node.JS?
- 8. 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/
- 9. 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
- 10. 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.
- 11. 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
- 12. 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”:
- 13. 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
- 14. 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:
- 15. TORNANDO O EXEMPLO MAIS PRÁTICO…VUE.JS
- 16. 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/
- 17. 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.
- 18. VUE.JS Jade (Pug) file Grupo JS
- 20. VUE.JS Update Remove Todas as chamadas(REST) criadas pelo Mongoose Generation!
- 21. FIM?
- 22. 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…
- 23. FIM!