html - 如何在html模板中渲染 Node js数据？

Question

我无法在 html 模板中呈现数据，但是当我使用 express 然后插入但文件格式为 ejs 时。但我需要在没有 express 的情况下在 html 中列出我的数据。如何做到这一点？

这是我的 server.js 文件，我在这个文件中有数据库连接、插入记录、选择记录和编辑记录查询。请在此处查看我的代码是 sjs 模板。

注意:这里的问题是 ejs 模板，但我想以 .html 格式文件而不是 .ejs 格式呈现我的 nodejs 代码。

服务器.js

var express  = require('express'),
path     = require('path'),
bodyParser = require('body-parser'),
emailExistence = require('email-existence'),
app = express(),
expressValidator = require('express-validator');


/*Set EJS template Engine*/
app.set('views','./views');
app.set('view engine','ejs');

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: true })); //support x-www-form-urlencoded
app.use(bodyParser.json());
app.use(expressValidator());

/*MySql connection*/
var connection  = require('express-myconnection'),
mysql = require('mysql');

app.use(

connection(mysql,{
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'mydb',
    debug    : false //set true if you wanna see debug logger
},'request')

);

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


//RESTful route
var router = express.Router();


/*------------------------------------------------------
*  This is router middleware,invoked everytime
*  we hit url /api and anything after /api
*  like /api/user , /api/user/7
*  we can use this for doing validation,authetication
*  for every route started with /api
--------------------------------------------------------*/
router.use(function(req, res, next) {
    console.log(req.method, req.url);
    next();
});

var curut = router.route('/user');




//show the CRUD interface | GET
curut.get(function(req,res,next){


    req.getConnection(function(err,conn){

        if (err) return next("Cannot Connect");

        var query = conn.query('SELECT * FROM t_user',function(err,rows){

        if(err){
            console.log(err);
            return next("Mysql error, check your query");
        }

        res.render('user',{title:"RESTful Crud Example",data:rows});

        });

    });

});


//post data to DB | POST
curut.post(function(req,res,next){

    //validation
    req.assert('name','Name is required').notEmpty();
    req.assert('email','A valid email is required').isEmail();
    req.assert('password','Enter a password 6 - 20').len(6,20);

    var errors = req.validationErrors();
    if(errors){
        res.status(422).json(errors);
        return;
    }
   
    //get data
    var data = {
        name:req.body.name,
        email:req.body.email,
        password:req.body.password
    };
    //inserting into mysql
    req.getConnection(function (err, conn){

        if (err) return next("Cannot Connect");

        var query = conn.query("INSERT INTO t_user set ? ",data, function(err, rows){

        if(err){
        console.log(err);
        return next("Mysql error, check your query");
        }

        res.sendStatus(200);

        });

    });

});


//now for Single route (GET,DELETE,PUT)
var curut2 = router.route('/user/:user_id');

/*------------------------------------------------------
route.all is extremely useful. you can use it to do
stuffs for specific routes. for example you need to do
a validation everytime route /api/user/:user_id it hit.

remove curut2.all() if you dont want it
------------------------------------------------------*/
curut2.all(function(req,res,next){
console.log("You need to smth about curut2 Route ? Do it here");
console.log(req.params);
next();
});

//get data to update
curut2.get(function(req,res,next){

    var user_id = req.params.user_id;

    req.getConnection(function(err,conn){

        if (err) return next("Cannot Connect");

        var query = conn.query("SELECT * FROM t_user WHERE user_id = ? ",[user_id],function(err,rows){

        if(err){
            console.log(err);
            return next("Mysql error, check your query");
        }

        //if user not found
        if(rows.length < 1)
            return res.send("User Not found");
            res.render('edit',{title:"Edit user",data:rows});
        });

    });

});

//update data
curut2.put(function(req,res,next){
    var user_id = req.params.user_id;

    //validation
    req.assert('name','Name is required').notEmpty();
    req.assert('email','A valid email is required').isEmail();
    req.assert('password','Enter a password 6 - 20').len(6,20);

    var errors = req.validationErrors();
    if(errors){
        res.status(422).json(errors);
        return;
    }

    //get data
    var data = {
        name:req.body.name,
        email:req.body.email,
        password:req.body.password
    };

    //inserting into mysql
    req.getConnection(function (err, conn){

        if (err) return next("Cannot Connect");

        var query = conn.query("UPDATE t_user set ? WHERE user_id = ? ",[data,user_id], function(err, rows){

        if(err){
        console.log(err);
        return next("Mysql error, check your query");
        }

        res.sendStatus(200);

        });

    });

});

//delete data
curut2.delete(function(req,res,next){

var user_id = req.params.user_id;

req.getConnection(function (err, conn) {

    if (err) return next("Cannot Connect");

    var query = conn.query("DELETE FROM t_user  WHERE user_id = ? ",[user_id], function(err, rows){

    if(err){
    console.log(err);
    return next("Mysql error, check your query");
    }

    res.sendStatus(200);

    });
    //console.log(query.sql);

    });
});

//now we need to apply our router here
app.use('/api', router);

//start Server
var server = app.listen(4000,function(){

console.log("Listening to port %s",server.address().port);

});

用户.ejs这是我的 ejs View 模板文件

<!DOCTYPE html>
<html>
    <head>
        <title><%=title%></title>
        <script type="text/javascript" src="/../js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="/../js/all.js"></script>
        <link rel="stylesheet" href="/../css/style.css">
    </head>
<body>
<div class="data-table">
    <table border="1" cellpadding="7" cellspacing="7">
        <tr>
            <th width="50px">No</th>
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
            <th>Action</th>
        </tr>
                       
        <% if(data.length){ 
                        
         for(var i = 0;i < data.length;i++) { %>
         
        <tr>
            <td><%=(i+1)%></td>
            <td><%=data[i].name%></td>
            <td><%=data[i].email%></td>
            <td><%=data[i].password%></td>
            <td>
                <a class="a-inside edit" href="/api/user/<%=data[i].user_id%>">Edit</a>
               
                <a class="a-inside delete" href="javascript:void(0)" onClick="deleteUser(<%=data[i].user_id%>)">Delete</a>
               
            </td>
        </tr>
    <% }
    
     }else{ %>
         <tr>
            <td colspan="5">No Data</td>
         </tr>
    <% } %>
                                      
    </table>
</div>
<div class="page-data">
    
    <form method="post" action="" id="the-form">
        <table cellpadding="11">
        <tr>
            <td class="label">Name</td><td>: <input type="text" name="name"></td>
         </tr>
        <tr>
            <td class="label">Email</td><td>: <input type="text" name="email"></td>
         </tr>
          <tr>
            <td class="label">Password</td><td>: <input type="password" name="password"></td>
         </tr>
         <tr>
            <td class="label"></td>
            <td>
                &nbsp; <input type="button" value="Save" onClick="saveUser()">
            </td>
         </tr>
        </table>
    </form>
</div>
<div class="page-data">
     <ul class="err-area"></ul>
</div>

<script>

    function saveUser(){
       
       $.ajax({
        
        url:"/api/user",
        type:"post",
        data:$("#the-form").serialize(),
        success:function(res){
            
            window.location.reload();
            return false;
        },
        error:function(xhr, status, error){
            
            console.log(xhr.responseText);
            var err = '';
            $.each(JSON.parse(xhr.responseText) , function(i, item) {
               
                 err +='<li>'+item.msg+'</li>';
            });
            $(".err-area").html(err);    
            return false;
        }
        
       });
    }
    
    function deleteUser(user_id){
    
        $.ajax({
            url:"/api/user/"+user_id,
            type: 'DELETE',
            success: function(res) {
                
                window.location.reload();
                return false;
            },
            error:function(xhr, status, error){
            
                console.log(xhr.responseText);
                alert("Error deleting");
                return false;
            }
        });
    }

</script>
</body>
</html>

Answer 1

您只需要 res.render("path to ejs file", {variables...}) 将 ejs 模板转换为 HTML 响应。

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

这部分负责呈现 HTML。