Node js 获取数据库中的数据,并渲染页面。
使用工具:
Vscode
,MySQL
,Google Chrome(谷歌浏览器)
,Navicat Premium(MySQL可视化软件)
- Demo目录介绍:
-
客户端(client)目录:
-
服务端(server)目录:
-
客户端 (client)
HTML 结构 因为几乎没有写样式,这里css的样式就不做展示了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<h1>用户信息</h1>
<div class="user"></div>
</body>
</html>
JS结构 主要就是请求后台的数据,然后渲染页面
$.ajax({
type: "get",
url: "http://127.0.0.1:3000/server/data/user.json", // 这里为后台写入的json文件路径。
dataType: "json",
success: function (response) {
var html = '';
for (var i = 0; i < response.length; i++) {
html += '<p> 姓名:' + response[i]["UserName"] + '   密码:' + response[i]["UserPwd"] + '</p>';
$('.user').html(html);
}
},
});
服务端(server)
服务端主要就是 nodeJS 的文件了
var http = require('http');
var fs = require('fs');
// http 服务
http.createServer(function (req, res) {
console.log('访问路径', req.url);
// HTML 主页
if (req.url == "/" || req.url == "/favicon.ico") {
fs.readFile('client/index.html', function (err, data) {
if (err) {
console.log("HTML 文件读取失败!");
}
res.end(data.toString());
return;
});
}
// css 样式
if (req.url == "/css/index.css") {
fs.readFile('client/css/index.css', function (err, data) {
if (err) {
console.log("CSS 文件读取失败");
}
res.writeHead(200, {"Content-Type" : "text/css"});
res.end(data.toString())
return;
})
}
// jquery 文件
if (req.url == "/js/jquery-3.4.1.js") {
fs.readFile('client/js/jquery-3.4.1.js','utf8', function (err, data) {
if (err) {
console.log("jquery 文件读取失败");
}
res.end(data.toString())
return;
})
}
// json 文件(用户表)
if (req.url == "/server/data/user.json") {
fs.readFile('server/data/user.json', function (err, data) {
if (err) {
console.log("json 文件读取失败");
}
// 数据库数据
mysql_start();
res.end(data.toString())
return;
})
}
}).listen('3000', '127.0.0.1')
console.log("可以使用", '127.0.0.1:3000', '访问');
function mysql_start() {
var a = '';
// 连接数据库
const mysql = require('mysql');
let connection = mysql.createConnection({
host: 'localhost', // 主机名 localhost / 127.0.0.1
user: 'root', // MySQL登录名 root
password: '******', // 密码
database: '数据库名' // 数据库名
});
connection.connect(function (err) {
if (err) {
console.error('连接失败!' + err.stack);
return;
}
connection.query('select * from AiGou.User', (err, results) => {
if (err) {
console.log('查询错误',err);
}
a = JSON.stringify(results); // 把查询到的数据,转换为json格式
var fs = require('fs');
fs.writeFile('server/data/user.json', a, function (error) {//json文件写入到data文件夹下
if (error) console.log('json-文件写入失败');
});
});
});
}
最终效果图:
如有问题,欢迎留言指出错误。