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