如何使用 nodejs 创建 table 个车把
How to create table handlebars with nodejs
伙计们,我有以下json server.js:
const express = require("express")
const app = express()
const http = require('http').Server(app);
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./conta.sql')
const handlebars = require("express-handlebars");
const bodyParser = require("body-parser")
app.use(express.static(__dirname + "/css/"));
app.use(bodyParser.urlencoded({extended:true}));
app.engine('handlebars', handlebars({defaultLayout:false}));
app.set('view engine', 'handlebars');
function getallusers(req,res) {
try{
data = [
{
id: 1,
nome: 'Ronnica Hardison',
data: '2021-09-31 04-54-00',
email: 'test@gmail.com',
nome_bonus: 'John Watson',
cod_bonus: 'piwi20k9'
},
{
id: 2,
nome: 'Kellie Jean Abernethy',
data: '2021-09-31 23-50-00',
email: 'gobirob190@mnqlm.com',
nome_bonus: 'Ámelia Barton',
cod_bonus: 'piwiki20k9'
}
]
res.render(__dirname + "/index.handlebars")
}
catch(err){
console.log("\x1b[31m Problema ao carregar as informações do banco de dados!",err);
}
}
app.get('/', function(req,res){
getallusers(req,res)
});
http.listen(8083,() => {
console.log("Servidor escutando na porta 8083");
});
index.handlebars:
<center>
<div class="table">
<table cellspacing="0">
<thead>
<tr class="indices">
<th>Nome</th>
<th>Email</th>
<th>Data de Criação</th>
<th>Convidada de</th>
<th>Codico usado</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
{{data here}}
</tr>
</tbody>
</table>
</div>
</center>
伙计们...我需要做的是在 table 中呈现 json 数据,我该怎么做?我需要的是根据 json 信息创建 <th>
标签,但这必须是动态的。 json 信息可能不同,即它是动态的,那么我该如何呈现呢?
试试这个:
在您的 server.js 中将数据传递到 index.handlebars 文件:
res.render(__dirname + "/index.handlebars",{data})
在index.handlebars中使用这个
<center>
<div class="table">
<table cellspacing="0">
<thead>
<tr class="indices">
<th>Nome</th>
<th>Email</th>
<th>Data de Criação</th>
<th>Convidada de</th>
<th>Codico usado</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<th scope="row">{{this.id}}</th>
<td>{{this.nome}}</td>
<td>{{this.email}}</td>
<td>{{this.nome_bonus}}</td>
<td>{{this.cod_bonus}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</center>
伙计们,我有以下json server.js:
const express = require("express")
const app = express()
const http = require('http').Server(app);
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./conta.sql')
const handlebars = require("express-handlebars");
const bodyParser = require("body-parser")
app.use(express.static(__dirname + "/css/"));
app.use(bodyParser.urlencoded({extended:true}));
app.engine('handlebars', handlebars({defaultLayout:false}));
app.set('view engine', 'handlebars');
function getallusers(req,res) {
try{
data = [
{
id: 1,
nome: 'Ronnica Hardison',
data: '2021-09-31 04-54-00',
email: 'test@gmail.com',
nome_bonus: 'John Watson',
cod_bonus: 'piwi20k9'
},
{
id: 2,
nome: 'Kellie Jean Abernethy',
data: '2021-09-31 23-50-00',
email: 'gobirob190@mnqlm.com',
nome_bonus: 'Ámelia Barton',
cod_bonus: 'piwiki20k9'
}
]
res.render(__dirname + "/index.handlebars")
}
catch(err){
console.log("\x1b[31m Problema ao carregar as informações do banco de dados!",err);
}
}
app.get('/', function(req,res){
getallusers(req,res)
});
http.listen(8083,() => {
console.log("Servidor escutando na porta 8083");
});
index.handlebars:
<center>
<div class="table">
<table cellspacing="0">
<thead>
<tr class="indices">
<th>Nome</th>
<th>Email</th>
<th>Data de Criação</th>
<th>Convidada de</th>
<th>Codico usado</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
{{data here}}
</tr>
</tbody>
</table>
</div>
</center>
伙计们...我需要做的是在 table 中呈现 json 数据,我该怎么做?我需要的是根据 json 信息创建 <th>
标签,但这必须是动态的。 json 信息可能不同,即它是动态的,那么我该如何呈现呢?
试试这个:
在您的 server.js 中将数据传递到 index.handlebars 文件:
res.render(__dirname + "/index.handlebars",{data})
在index.handlebars中使用这个
<center>
<div class="table">
<table cellspacing="0">
<thead>
<tr class="indices">
<th>Nome</th>
<th>Email</th>
<th>Data de Criação</th>
<th>Convidada de</th>
<th>Codico usado</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<th scope="row">{{this.id}}</th>
<td>{{this.nome}}</td>
<td>{{this.email}}</td>
<td>{{this.nome_bonus}}</td>
<td>{{this.cod_bonus}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</center>