node.js动态加载数据库数据响应到html页面

node.js响应html页面

// http.js
// 开启监听,将请求处理放在luyou页面上
// 服务器启动模块
var http = require('http');
var luyou = require('./luyou');
// 创建服务
var server = http.createServer();
// 调用luyou模块中的bind方法,设置监听事件
luyou.bind(server)
// 设置服务器的监听端口
server.listen(8090, function() { 
    console.log('访问127.0.0.1:8090')
})
//luyou.js
// 将响应逻辑放在yewu.js页面
var yewu = require('./yewu')
var fs = require('fs')
// 导出数据(bind方法)
// bind设置监听
module.exports.bind = function(server) { 
    server.on('request', function(request, response) { 
        const url = request.url;
        if (url == '/') { 
            // 调用yewu模块获取data
            response.end(yewu.data)
        } else { 
            // 接收静态资源请求并安装请求路径响应
            fs.readFile('.' + url, function(err, data) { 
                response.end(data)
            })
        }
    })
}
//yewu.js
// 引入linkdb模块,获取数据
var fs = require('fs');
var moment = require('moment');
var art_template = require('art-template');
var linkdb = require('./linkdb')
const {  request } = require('http');
art_template.defaults.root = './';
// 从linkdb.js获取从数据库拿到的信息
module.exports.data = art_template('./index.html', { data: linkdb.data});
// linkdb.js
var mysql = require('mysql');
// 设置数据库连接信息
var connection = mysql.createConnection({ 
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'onepiece'
})
// 打开连接
connection.connect();

var sql_r = 'select * from users';
connection.query(sql_r, function(error, data, field) { 
    // console.log(data);
    module.exports.data = data;
    // 该函数是异步的,在被调用的时候,已经结束了,数据并没有被传出去
    result = data
})
// // module.exports.data = result;
connection.end()
// 这个使用了art-template模块渲染数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <title>Document</title>
</head>
<body>
    <style> .hero-list img {  width: 50px } </style>
    <header>
        <div class="page-header container">
            <h1>海贼王 <small>角色管理器</small></h1>
        </div>
    </header>
    <div class="container hero-list">
        <a href="/add" class="btn btn-success pull-right">添加英雄</a>
        <table class="table table-hover">
            <thead>
                <th>编号</th>
                <th>名称</th>
                <th>能力</th>
                <th>团体</th>
                <th>操作</th>
            </thead>
            <tbody id="tbody">
                {
  {each data}}
                <tr>
                    <td>{
  {$value.id}}</td>
                    <td>{
  {$value.name}}</td>
                    <td>{
  {$value.nengli}}</td>
                    <td>{
  {$value.jituan}}</td>
                    <td>
                        <a href="#">查看</a>
                        <a href="#">修改</a>
                        <a href="#">删除</a>
                    </td>
                </tr>
                {
  {/each}}
            </tbody>
        </table>
    </div>
</body>
</html>

这个时候启动服务器,页面并没有显示数据,结果发现是在从数据库拿取到数据后,将数据module.exports的时候,数据并没有导出去,因为在yewu.js调用linkdb模块的时候,node.js查询数据已经结束了,所以数据没有被传出去

解决:在yewu.js使用回调函数,将数据获取

// linkdb.js 将数据通过回调函数传出去
// 将整个查询的方法导出
// 想要接受一个回调函数 使用回调函数将数据传出去
module.exports.setDatas = function(callback) { 
    // callback是传进来的一个函数,为了将数据传出去
    var sql_r = 'select * from users';
    connection.query(sql_r, function(error, data, field) { 
        // 调用回调函数,将数据当作实参,进行函数的回调
        callback(data)
        // 获取数据后关闭
        connection.end()
    })
}
// 利用回调函数,获取linkdb得到的数据
linkdb.setDatas(function(datas) { 
    // 接收的数据
    // console.log(data)
    // 利用模块引擎遍历解析数据
    // 将解析好的数据导出
    module.exports.data = art_template('./index.html', { data: datas});
})

《node.js动态加载数据库数据响应到html页面》

    原文作者:鸣拙
    原文地址: https://blog.csdn.net/weixin_45939191/article/details/116028718
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞