node+mysql+ajax+javascript搭建一套服务接口，实现前后台数据请求
效果图如下所示：
express介绍
Express 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
Web 应用
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
API
丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。
性能
Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。
node.js 更适合做后端API
node.js 的异步非阻塞模式使其非常适合做后端API，可以大幅度提高接口的抗压能力。
后端接口常见形式 - JSON
node搭建服务
$ npm install --save express
$ npm install --save pathnode配置
// app.js
const express = require('express');
const path = require('path');
const app = express();
app.get('/', function (reg, res) {
const obj = {
name: 'hcoder',
version: 1.1
}
res.json(obj);
});
const server = app.listen(3000, function () {
console.log('run http://localhost:3000');
});mysql模块安装
$ npm install --save mysqlmysql配置
app.js中添加mysql配置
// app.js
const body_parser = require('body-parser');
function getDb() {
const mysqlHost = 'localhost';
const mysqlUser = 'root';
const mysqlPwd = 'root';
const mysqlDb = 'model_abc';
const mysql = require('mysql');
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'model_abc'
});
conn.connect();
return conn;
};
app.use(body_parser.urlencoded({
extended: false
}));
app.get('/user', function (reg, res) {
const db = getDb();
db.query('select * from model_abc.emp;', null, function (error, result) {
console.log(error);
const obj = {
status: 0,
data: result
}
res.json(obj);
})
});可能出现的问题
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is there
解决方法：
// app.js
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});完整代码如下所示：
配置文件
// app.js
const express = require('express');
const path = require('path');
const body_parser = require('body-parser');
const app = express();
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
function getDb() {
const mysqlHost = 'localhost';
const mysqlUser = 'root';
const mysqlPwd = 'root';
const mysqlDb = 'model_abc';
const mysql = require('mysql');
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'model_abc'
});
conn.connect();
return conn;
}
app.use(body_parser.urlencoded({
extended: false
}));
app.get('/', function (reg, res) {
const obj = {
name: 'hcoder',
version: 1.1
}
res.json(obj);
})
app.get('/user', function (reg, res) {
const db = getDb();
db.query('select * from model_abc.emp;', null, function (error, result) {
console.log(error);
const obj = {
status: 0,
data: result
}
res.json(obj);
})
})
const server = app.listen(3000, function () {
console.log('run http://localhost:3000');
})入口文件
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>node-mysql-ajax-javascipt</title>
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>node-mysql-ajax-javascipt</h1>
<h5 id="main"></h5>
</body>
</html>main.js 原生请求
$.ajax({
type: 'get',
url: 'http://localhost:3000/user',
data: {
username: 'admin'
},
dataType: 'json',
success: function(res) {
console.log(res);
},
error: function(err) {
console.log(err)
}
});
$.ajax({
type: 'post',
url: 'http://localhost:3000/user',
data: {
username: 'admin'
},
dataType: 'json',
success: function(res) {
console.log(res);
},
error: function(err) {
console.log(err)
}
});启动后台服务
$ node app.jsGET请求，node.js获取GET参数方式
// var username = req.query.username;
app.get('/user', function (req, res) {
var username = req.query.username;
res.json({status: 0, data: [{name: username}]});
});POST请求，node.js获取POST参数方式
// var username = req.body.username;
app.post('/user/post', function (req, res) {
var username = req.body.username;
res.json({status: 0, data: [{name: username}]});
});