网站首页前端文档正文

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

作者：鸣拙更新时间： 2022-04-05 前端文档

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});
})

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_45939191/article/details/116028718

上一篇：解决nodejs报错 Cannot find module
下一篇：node.js连接mysql，实现CRUD，解决Field

网站首页 前端文档 正文

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

node.js响应html页面

相关推荐

网站首页前端文档正文