Nodejs Guides（三）

阔别的nodejs系列。这次把看过的东西前端实践一番。

1.实现原生ajax的get和post请求；

2.nodejs服务端接收数据；

3.连接mysql数据库，查询并发送数据给前端。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="container">
    <p>直接打开页面请求</p>
    <div class="btn">获取数据get</div>
    <div id="get"></div>
    <div class="btn">获取数据post</div>
    <div id="post"></div>
</div>
</body>
<script type="text/javascript">
    function GetData(str, json) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", `http://localhost:8080/getName?name=${str.name}&tel=${str.tel}`, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var data = xhr.responseText;
                    if (json) {
                        data = JSON.parse(data);
                    }
                    document.getElementById("get").innerHTML = xhr.responseText;
                }
            }
        };
    }

    function PostData(str, json) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:8080/getName", true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(str);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var data = xhr.responseText;
                    if (json) {
                        data = JSON.parse(data);
                    }
                    document.getElementById("post").innerHTML = xhr.responseText;
                }
            }
        };
    }


    document.getElementsByClassName("btn")[0].onclick = function () {
        var str = {"name": "yourName", "tel": "yourTel"};
        GetData(str, true)
    };
    document.getElementsByClassName("btn")[1].onclick = function () {
        var str = {"name": "yourName", "tel": "yourTel"};
        str = `name=${str.name}&tel=${str.tel}`;
        PostData(str)
    };

</script>

</html>

index.js

var http = require('http');
var urlFn = require('url');
var querystring = require('querystring');
var hostName = '127.0.0.1';
var port = 8080;
var mysql = require('mysql');
var TEST_DATABASE = 'users';
var TEST_TABLE = 'ceshi';
var client = mysql.createConnection({
    user: 'root',
    password: '123456'
});
client.connect();
client.query('use ' + TEST_DATABASE);

function getName(name, response) {
    client.query(
        'SELECT * FROM ' + TEST_TABLE + ' where ceshi_name="' + name + '";',
        function selectCb(err, results, fields) {
            if (err) {
                console.log(err)
            }
            if (results) {
                results = JSON.stringify(results);
                response.write(results);
                response.end();
            }
        }
    );
}

var server = http.createServer((request, response) => {
    response.setHeader('Content-Type', 'text/plain');
    response.setHeader('Access-Control-Allow-Origin', "http://localhost:63342");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
});
server.on('request', (request, response) => {
    const {method, url} = request;
    const {pathname} = urlFn.parse(url, true);
    request.on('error', (err) => {
        console.error(err);
    });
    if (url.pathname === '/favicon.ico') {
        return
    }
    if (method === 'GET' && pathname === '/getName') {
        console.log(method);
        var query = urlFn.parse(url).query;
        query = querystring.parse(query);
        getName(query.name, response);
    }
    if (method === 'POST' && pathname === '/getName') {
        console.log(method);
        var query = '';
        request.on('data', function (chunk) {
            query += chunk;
        });

        request.on('end', function () {
            query = querystring.parse(query);
            getName(query.name, response);
        });
    }
});

server.listen(port, hostName, () => {
    console.log(`服务器正在运行http://${hostName}:${port}`)
});

数据库操作

版本 mysql-installer-community-5.7.20.0，安装教程 https://jingyan.baidu.com/article/7e440953d6f0702fc1e2ef61.html

使用command line client - Unicode登录 密码******

use mysql;


show databases;
show tables;

CREATE DATABASE users;

use users;

CREATE TABLE ceshi(
   ceshi_id INT NOT NULL AUTO_INCREMENT,
   ceshi_name VARCHAR(100) NOT NULL,
   PRIMARY KEY (ceshi_id)
   );


INSERT INTO ceshi
    (ceshi_name)
    VALUES
    ("yourName");


select * from users;

select * from ceshi where ceshi_name=yourName

这就是我的nodejs开发敲门砖

相关阅读:
Delphi 窗体失踪在最上面的代码
 Delphi 目前使用delay函数功能
 Delphi Delay 延时计数的功能。下面的方法都是思路，但是没有用在项目上
 Delphi 通过SQLite3, SQLiteTable3 操作数据库
 解决sqlite删除数据后，文件大小不变问题转载
 delphi执行cmd命令和bat文件
 Delphi 获取sqlite中所有的表名
 delphi 获取USB口拔出和插入的状态
 深度揭密轮播插件核心代码的实现过程
 flowJS源码个人分析
原文地址：https://www.cnblogs.com/Merrys/p/8297829.html