个人中心
gpt4 book ai didi

node.js - 如何使用 node.js 和 express 从数据库动态创建 html 表？

转载 作者：搜寻专家 更新时间：2023-11-01 00:20:56 25 4
gpt4 key购买 nike

我是 node.js 的新手，我想用 express 和 postgresql 创建一个简单的电话簿应用程序。我想要两个页面，一个用于添加新联系人，另一个用于将联系人显示在具有更新或删除行功能的 html 表中。到目前为止，我已经实现了插入，但我不知道如何从数据库动态创建“contacts.html”页面。提前致谢!

index.html

<header>
    <ul>
        <li><h2>Phonebook</h2></li>
        <li><a href="index.html" id="index">New Contact</a></li>
        <li><a href="contacts.html" id="contacts">Contacts</a></li>
    </ul>
</header>

<section>
    <form action="insertContact">
        <p>Full Name</p>
        <input type="text" name="fullname" required>

        <p>Phone</p>
        <input type="text" name="phone1" required>

        <p>Mobile</p>
        <input type="text" name="phone2">

        <p>Address</p>
        <input type="text" name="address" required> <br><br>

        <input type="submit" name="submitBtn" id="submitBtn" value="Submit">
    </form>
</section>

服务器.js

var express = require('express');
var path = require('path');
var db = require('pg');
var http = require('http');

var app = express();

app.use(express.static(path.join(__dirname,'/')));

var dbConnection = "postgres://postgres:root@localhost:5432/Phonebook";

app.get('/insertContact',function(req,res){
    var dbClient = new db.Client(dbConnection);

    dbClient.connect(function(err){
        if(err)
            throw err;

        var query = "insert into Contacts (fullname,phone,mobile,address) values ($1,$2,$3,$4)";
        var fullname = req.query.fullname;
        var phone = req.query.phone1;
        var mobile = req.query.phone2;
        var address = req.query.address;

        var contact = [fullname , phone , mobile , address];

        dbClient.query(query , contact , function(err){
            if(err)
                throw err;
            else {
                console.log('Success!') ;
                res.redirect('/');      
                res.end();
            }               
        });
    });
});

app.get('????',function(req,res) {
    var dbClient = new db.Client(dbConnection);

    dbClient.connect(function(err){
        if(err)
            throw err;

        var query = "select * from Contacts";

        dbClient.query(query,function(err,result){
            if(err)
                throw err;
            else {

                   ??????????

                res.end();
            }
        });
    });
});

app.listen(8080,function(){
    console.log('Server started');
});

sample image

最佳答案

您可以通过使用任何 javascript 模板语言来做到这一点，其中一种最流行的语言是 EJS“嵌入式 javascript”，它非常容易与 Node js 集成和使用

您只需创建模板并传递任何变量(如数组)。

检查下面的代码，这是在 EJS 中添加模板的方式

<html >

<head>
    <meta charset="utf-8">
</head>

<body>
    <section class="home">
    <h1>Contacts list</h1>
    <ul class="list-group">
        <% for(var i=0; i<contacts.length; i++) {%>
            <li class="list-group-item">
                <span>Name: </span><%= contacts[i].name %>
                <br/>
                <span>Phone: </span><%= contacts[i].phone %>
            </li>
        <% } %>
    </ul>
    </section>
</body>

</html>

然后在您的 Node 中，js 路由处理程序将只呈现该模板并传递所需的数据。

app.get('????',function(req,res) {
    var dbClient = new db.Client(dbConnection);

    dbClient.connect(function(err){
        if(err)
            throw err;

        var query = "select * from Contacts";

        dbClient.query(query,function(err,result){
            if(err)
                throw err;
            else {
                 res.render('contacts.ejs', { contacts: result });  
            }
        });
    });
});

最后一步是告诉 Node 它将使用 ejs 作为模板语言。

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

不要忘记npm install --save ejs

关于node.js - 如何使用 node.js 和 express 从数据库动态创建 html 表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46632181/

25 4 0
文章推荐： 使用复杂和嵌套数据在 Swift 4 中解析 JSON
文章推荐： ios - 呈现 View Controller 时设置后退按钮
文章推荐： php - 使用php将字符串转换为数组
文章推荐： mysql - nodejs访问mysql数据库的最佳实践
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com