CRUD com Node.js

Este artigo é baseado no seguinte link https://medium.com/baixada-nerd/criando-um-crud-completo-com-nodejs-express-e-mongodb-parte-1-3-6c8389d7147d.

1- Crie uma pasta para o projeto chamada CRUDNode

2- Execute npm init para cria o package.json (arquivo que gerencia dependências)

3- Abra o projeto no visual code executando ‘code .’ dentro da pasta CRUDNode

4- Crie o arquivo server.js e adicione o seguinte código:

console.log('Server Start...')

5- Execute o arquivo

[[email protected] CRUDNode]$ node server.js

6- Instale o Express com:

Express é um popular framework web estruturado, escrito em JavaScript que roda sobre o ambiente node.js em tempo de execução. 

npm install express --save

7- Vamos alterar o arquivo server.js e editá-los da seguinte forma:

A primeira coisa que é preciso fazer é importar o módulo express e criar um app. Em seguida temos que informar o servidor para escutar uma dada porta. Abaixo foi chamado o método listen(3000) do nosso objeto app que tenta criar um servidor e vinculá-lo à porta 3000.

const express = require('express') const app = express() app.listen(3000, function(){ console.log('servidor rodando na porta 3000') })

8- Teste no browser o endereço http://localhost:3000/

9- Vamos implementar o método GET no arquivo server.js. Depois salve, start o servidor novamente e execute novamente o endereço localhost:3000/. O primeiro argumento é “/”, o segundo argumento é uma função callback que informa ao servidor o que fazer quando o caminho é correspondido. Esse callback leva dois argumentos, um objeto de solicitação e outro de resposta (req e res, respectivamente).

app.get('/', function(req, res){ res.send('Ola Mundo'); });

10-Agora vamos instalar o template engine EJS (Embedded Javascript).

npm install ejs --save

11- Para configurar a view engine no Express escreva o código abaixo:

app.set('view engine', 'ejs')

12- Crie uma pasta chamada view e dentro desta pasta crie o arquivo chamada index.ejs

13- Vamos incluir o conteúdo abaixo no arquivo index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My CRUD in NodeJS</title>
</head>
<body>

    <h2>Registrar<h2>
    <form action="/show" method="POST">
        <input type="text" placeholder="Nome" name="name">
        <input type="text" placeholder="Sobrenome" name="surname">
        <button type="submit">Submit</button>
    </form> 

</body>
</html>

14- Agora precisamos setar nosso arquivo para que ele seja enviado pro servidor, e ser renderizado no navegador. Para isso precisamos fazer uma alteração no trecho de código app.get() no arquivo <code>server.js</code> .

app.get('/', function(req, res){
    res.render('index.ejs');
});

15- Reinicie o servidor serve.js e teste no browser

16- Instalando o Nodemon.

O Nodemon reinicia o servidor automaticamente sempre que você salva um arquivo que o servidor usa. Esse sinalizador salva o Nodemon como uma devDependency no nosso arquivo package.json.

npm install nodemon --save-dev

O Nodemon se comporta exatamente como o Node, o que significa que podemos executar nosso servidor chamando nodemon server.js. No entanto, não podemos fazer isso na linha de comando agora porque o Nodemon não está instalado com um sinalizador -g. Há outra maneira simples de executar o Nodemon, podemos criar um scriptdentro do package.json.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon server.js"
  }

Agora, você pode executar o npm run dev para acionar o nodemon server.js.

[[email protected] CRUDNode]$ npm run dev

17- Criando o CREATE. Em nosso servidor, podemos processar essa solicitação POST com um método post fornecido pelo Express. Salve o arquivo server.js e atualize a página e clique em submit.

app.post('/show', function(req, res){
    console.log('Teste post...')
});

18- Instale o pacote body-parser para obter os valores de entrada com o Express.

npm install body-parser --save

19- Adicione o código abaixo para obter os dados dos formulários.

const bodyparser = require('body-parse')
app.use(bodyparser.urlencoded({ extended: true}))

20- Instale o MongoDB.

npm install mongodb --save 

Crie uma conta no site https://mlab.com/. Após verificar sua conta, você pode criar um novo Deployment, selecione a opção sandbox, em seguida coloque o nome do seu banco de dados. Quando terminar de implementar, entre na aba ‘Users’ e crie um usuário e uma senha para o banco de dados, você vai usar esses dados para conectar ao banco que você acabou de criar. Finalmente, pegue o url do MongoDB e adicione-o ao seu método MongoClient.connect no arquivo server.js

Dúvidas verifique essa url https://medium.com/baixada-nerd/criando-um-crud-completo-com-nodejs-express-e-mongodb-parte-3-3-b243d14a403c

const ObjectId = require('mongodb').ObjectID

const MongoClient = require('mongodb').MongoClient
const uri = "mongodb+srv://teste:<password>@cluster0-7ht6s.mongodb.net/test?retryWrites=true&amp;w=majority";

MongoClient.connect(uri, (err, client) => {
  if (err) return console.log(err)
  db = client.db('test') // coloque o nome do seu DB

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

21- Salvando os dados. Altere o método de post para o código abaixo. Segue o código completo.

const express = require('express')
const app = express()
const bodyparser = require('body-parser')

const ObjectId = require('mongodb').ObjectID

const MongoClient = require('mongodb').MongoClient
const uri = "mongodb+srv://teste:[email protected]@cluster0-7ht6s.mongodb.net/test?retryWrites=true&amp;w=majority";

MongoClient.connect(uri, (err, client) => {
  if (err) return console.log(err)
  db = client.db('test') // coloque o nome do seu DB

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

app.use(bodyparser.urlencoded({ extended: true}))

app.set('view engine', 'ejs')

app.get('/', function(req, res){
    res.render('index.ejs');
});

app.post('/show', (req, res)=>{
    //criar a coleção “data”, que irá armazenar nossos dados
    db.collection('data').save(req.body, (err, result) => {
        if (err) return console.log(err)
    
        console.log('Salvo no Banco de Dados')
        res.redirect('/show')
      })
});

Carrega a página principal, preencha os dados e certifique-se que foram salvos.

22- Consultando os dados. Crie um arquivo chamado shows.ejs na pasta views.

Abra-o e edite com o código abaixo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My CRUD in NodeJS</title>
</head>
<body>

<h2>Registros<h2>
    <table border="1">
        <thead>
            <tr>
                <td>Nome</td>
                <td>Sobrenome</td>
            </tr>
        </thead>
        <tbody>
        <% data.forEach(function(details) { %>
            <tr>
                <td><%= details.name %></td>
                <td><%= details.surname %></td>
            </tr>
            <% }) %>
        </tbody>
        <button><a href="/">Voltar</a></button>
</body>
</html>

Adicione os métodos GET no arquivo server.js

app.get('/', (req, res) => {
    var cursor = db.collection('data').find()
})

app.get('/show', (req, res) => {
    db.collection('data').find().toArray((err, results) => {
        if (err) return console.log(err)
        res.render('show.ejs', { data: results })

    })
})

Salve os arquivos e carregue a página http://localhost:3000/show

23- Atualizando os dados. Atualize o arquivos show.ejs para que inclua os botões de editar, remover e novo.

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My CRUD in NodeJS</title>
</head>
<body>

<h2>Registros</h2>
  <table border="1">
    <thead>
        <tr>
            <td>Nome</td>
            <td>Sobrenome</td>
            <td>Ação</td>
        </tr>
    </thead>
    <tbody>
    <% data.forEach(function(details) { %>
        <tr>
            <td><%= details.name %></td>
            <td><%= details.surname %></td>
            <td><a href="/edit/<%= details._id %>">Editar</a> - <a href="/delete/<%= details._id %>">Deletar</a></td>
        </tr>
        <% }) %>
    </tbody>
  </table>
  <button><a href="/">Novo</a></button>
</body>
</html>

Crie um novo arquivo com o nome de edit.js na pasta views. Nele há um formulário parecido com o que temos no index.ejs, porém, ao invés de incluir um novo “nome” e “sobrenome”, iremos alterar o valor já existente.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My CRUD in NodeJS</title>
</head>
<body>

<h2>Editar Registro</h2>
  <% data.forEach(function(details) { %>
    <form action="/edit/<%= details._id %>" method="POST">
      <input type="text" value="<%= details.name %>" name="name">
      <input type="text" value="<%= details.surname %>" name="surname">
      <br />
      <button><a href="/show">Todos</a></button>
      <button type="submit">Editar</button>
    </form>
  <% }) %>

</body>
</html>

Altere o arquivo para adicionar um rota para a página edit.ejs. O Roteamento refere-se à definição de terminais do aplicativo (URIs) e como eles respondem às solicitações do cliente. Saiba mais sobre rotas aqui. No método.get, estou armazenando em var id, o id que iremos passar no params vindo da view , estou usando essa variável para encontrar o objeto que iremos alterar, isso está sendo feito na função .find(Object(id)) que irá percorrer o array em nosso banco, e quando encontrar o nosso objeto, irá renderizar a nossa view edit.ejs e também passando o resultado desse objeto para ser usado com os valores dentro do <form> em nossa view. Quando fazemos um .post o nosso server irá armazenar as variáveis que iremos usar para dar update em nosso objeto, updateOne() recebe o nosso objeto que estamos alterando, e $set recebe os dados do form que queremos atualizar.

app.route('/edit/:id')
.get((req, res) => {
  var id = req.params.id

  db.collection('data').find(ObjectId(id)).toArray((err, result) => {
    if (err) return res.send(err)
    res.render('edit.ejs', { data: result })
  })
})
.post((req, res) => {
  var id = req.params.id
  var name = req.body.name
  var surname = req.body.surname

  db.collection('data').updateOne({_id: ObjectId(id)}, {
    $set: {
      name: name,
      surname: surname
    }
  }, (err, result) => {
    if (err) return res.send(err)
    res.redirect('/show')
    console.log('Atualizado no Banco de Dados')
  })
})

24- Apagando os dados. Altere o arquivo server.js para adicionar a rota para exclusão.

app.route('/delete/:id')
.get((req, res) => {
  var id = req.params.id

  db.collection('data').deleteOne({_id: ObjectId(id)}, (err, result) => {
    if (err) return res.send(500, err)
    console.log('Deletado do Banco de Dados!')
    res.redirect('/show')
  })
})

25- Salve os arquivos e carregue a página http://localhost:3000 para testar a aplicação.

Deixe uma resposta

Specify Google Client ID and Secret in Super Socializer > Social Login section in admin panel for Google Login to work

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *