Webpack

JavaScript

19/10/2019

Ola gostaria de um curso de Webpack, tem algum na devmedia?
Raul Cesar

Raul Cesar

Curtidas 0

Melhor post

Raul Cesar

Raul Cesar

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>
GOSTEI 1

Mais Respostas

Gabriel Cruz

Gabriel Cruz

19/10/2019

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, tudo bem?

Deixa eu te perguntar, essa sua dúvida é de algum curso da Dev? Ou é um projeto pessoal?
GOSTEI 0
POSTAR