NodeJS-查询数据库并渲染到HTML Demo

最新推荐文章于 2024-06-18 16:14:45 发布

web-小白白

最新推荐文章于 2024-06-18 16:14:45 发布

阅读量8.5k

点赞数 7

分类专栏： NodeJS 文章标签： mysql nodejs ajax

本文链接：https://blog.csdn.net/weixin_45030716/article/details/107468362

版权

NodeJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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"] + '&emsp;&emsp; 密码：' + 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-文件写入失败');
            });
        });
    });
}

最终效果图：
在这里插入图片描述

如有问题，欢迎留言指出错误。

web-小白白

关注

7
点赞
踩
34

收藏

觉得还不错? 一键收藏
2
评论
NodeJS-查询数据库并渲染到HTML Demo

Node js 获取数据库中的数据，并渲染页面。使用工具: Vscode , MySQL , Google Chrome(谷歌浏览器) , Navicat Premium(MySQL可视化软件)Demo目录介绍:客户端(client)目录:服务端(server)目录:客户端 (client)HTML 结构因为几乎没有写样式，这里css的样式就不做展示了<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫