阔别的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开发敲门砖
Nodejs Guides(三)
原文地址:https://www.cnblogs.com/Merrys/p/8297829.html