阔别的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开发敲门砖 