Ajuda com express

jQuery

HTML

Node.js

JavaScript

Express

28/01/2020

Bom dia, estou aprendendo express.
Consegui fazer toda a conexão e criação de dados no banco.
Consegui puxar os dados por uma rota get, porem estou na duvida de como exibiria esses dados na minha pagina.
Fiz com um método utilizando a api do jquery para consumir a rota gerada pelo express,funcionou porem não sei se é a forma
correta de realizar esse procedimento.
Segue código:
Express
const express = require(''express'')
const bodyParser = require(''body-parser'')
const app = express()
const Sequelize = require(''sequelize'')
const sequelize = new Sequelize(''teste'', ''admin'', ''admin'', {
    host: ''localhost'',
    dialect: ''mysql''
})
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(express.static(''./public''))
 
sequelize.authenticate().then(function () {
    console.log(''usuario autenticado no banco de dados'')
})
 
// Rotas 
app.post(''/produtos'', store)
app.get(''/produtos'',listItens)
 
// modelo do banco de dados 
const postagemModel = sequelize.define(''postagems'', {
    titulo: {
        type: Sequelize.STRING
    }
})
// funcao que guarda no banco os dados
function store(req, res) {
    const produtos = postagemModel.create({ titulo: req.body.title }).then(()=>{
        console.log(''cadastrado no banco com sucesso'')
    })
}
function listItens(req, res){
    postagemModel.findAll().then(usuarios =>{
        res.send(usuarios)
    })
}
app.use(express.json())
app.listen(8180, () => {
    console.log(''Aplicativo executando'')
})



Jquery que esta incorporado em uma pagina

$.getJSON(''http://localhost:8180/produtos'', data => {
  data.map(res =>{
       
      $(''#lista'').append(`<li>${res.titulo}</li>`)
  })
  
})



html do formulario:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/produtos" method="POST">
  <input type="text" name="title" value="Mickey">

  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>


html da pagina que renderiza os produtos do banco, e instancia o jquery que lista os objetos:
<!DOCTYPE html>
<html>
    <header>
        <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    </header>
<body>
<ul id="lista"></ul>
<script src="./main.js"></script>
</body>
</html>
Raul Cesar

Raul Cesar

Curtidas 1

Respostas

Gabriel Cruz

Gabriel Cruz

28/01/2020

Bom dia, estou aprendendo express.
Consegui fazer toda a conexão e criação de dados no banco.
Consegui puxar os dados por uma rota get, porem estou na duvida de como exibiria esses dados na minha pagina.
Fiz com um método utilizando a api do jquery para consumir a rota gerada pelo express,funcionou porem não sei se é a forma
correta de realizar esse procedimento.
Segue código:
Express
const express = require(''''express'''')
const bodyParser = require(''''body-parser'''')
const app = express()
const Sequelize = require(''''sequelize'''')
const sequelize = new Sequelize(''''teste'''', ''''admin'''', ''''admin'''', {
    host: ''''localhost'''',
    dialect: ''''mysql''''
})
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(express.static(''''./public''''))
 
sequelize.authenticate().then(function () {
    console.log(''''usuario autenticado no banco de dados'''')
})
 
// Rotas 
app.post(''''/produtos'''', store)
app.get(''''/produtos'''',listItens)
 
// modelo do banco de dados 
const postagemModel = sequelize.define(''''postagems'''', {
    titulo: {
        type: Sequelize.STRING
    }
})
// funcao que guarda no banco os dados
function store(req, res) {
    const produtos = postagemModel.create({ titulo: req.body.title }).then(()=>{
        console.log(''''cadastrado no banco com sucesso'''')
    })
}
function listItens(req, res){
    postagemModel.findAll().then(usuarios =>{
        res.send(usuarios)
    })
}
app.use(express.json())
app.listen(8180, () => {
    console.log(''''Aplicativo executando'''')
})



Jquery que esta incorporado em uma pagina

$.getJSON(''''http://localhost:8180/produtos'''', data => {
  data.map(res =>{
       
      $(''''#lista'''').append(`<li>${res.titulo}</li>`)
  })
  
})



html do formulario:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/produtos" method="POST">
  <input type="text" name="title" value="Mickey">

  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>


html da pagina que renderiza os produtos do banco, e instancia o jquery que lista os objetos:
<!DOCTYPE html>
<html>
    <header>
        <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    </header>
<body>
<ul id="lista"></ul>
<script src="./main.js"></script>
</body>
</html>


Fala Raul, beleza?

Deixa eu te perguntar, essa sua dúvida é referente a um projeto pessoal ou é de um curso da DevMedia?
GOSTEI 0
Raul Cesar

Raul Cesar

28/01/2020

È um projeto pessoal, estou fazendo para estudo, fiz o curso de primeiros passos com express, queria aprofundar mais e praticar.
Me surgiu esta duvida.
GOSTEI 0
POSTAR