node连接数据库和axios请求数据
准备:
1.如果是准备的json文件,json文件的数据导入
xxx.json文件导入数据库。1.创建数据库,右键点击表,选择导入文件,文件导入json文件,后面全部是点击下一步,最后点击完成。
2.创建服务器,安装插件
npm init
cnpm install express --save
cnpm install mysql --save
在node.js中连接并操作数据库:
const mysql = require('mysql');
//配置连接
const connection = {
host: 'localhost',
post: '3306',
user: 'root',
password: '123456',
database: 'hsuju'
}
//创建连接对象
// let con = mysql.createConnection(connection);
let con;
con.connect(err => {
if (err) {
console.log('数据库连接失败');
} else {
console.log('数据库连接成功');
}
})
//创建promise对象查询方法
function queryFn(sqlStr, arr) {
con = mysql.createConnection(connection);
return new Promise((resolve, reject) => {
con.query(sqlStr, arr, (error, result) => {
if (error) {
reject(error);
} else {
resolve(result);
con.end()
}
})
})
}
module.exports = queryFn;
创建并开启服务器:
const axios = require('axios')
var express = require('express')
var app = express()
var sqlQuery = require('./node')
app.get('/', (req, res) => {
res.send('这是答题API服务器')
})
app.get('/api/rtimu', (req, res) => {
//随机获取10个题目:
console.log(req.query);
let page = req.query.page ? req.query.page : 2;
// let strSql = "select * from quizzes limit 0,10"
let strSql = `select * from quizzes limit ${page*10},10`
let result = await sqlQuery(strSql)
console.log(result);
res.json(Array.from(result)) //Array.from(result)可以将result转换成真正的数组
})
let port = 8080;
app.listen(port, () => {
console.log("serve start...");
})
在组件中发送ajax请求(使用axios)
class App extends React.Component {
async UNSAFE_componentWillMount() {
let page = 2;
let httpUrl = `http://localhost:8080/api/rtimu`
let res = await axios.get(httpUrl);
}
}
上述内容补充知识:
axio请求的三种方式源地址:https://www.jianshu.com/p/3e08e0e60a29
一:get请求
axios中常见的get/delete请求,也称作query请求:
//一般发送请求是这么写(不推荐):
axios.get('/user?id=12345&name=user')
.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
//但是为了方便全局统一调用封装的axios,我一般采用(推荐)
axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以
params: {
id: 12345,
name: user
}
})
.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
二:post/put/patch请求
传参方式大致用的有3种
(1) ‘Content-Type’= ‘multipart/form-data’
传参格式为 formData
(全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’)
(request的Header:‘Content-Type’= ‘multipart/form-data’)
var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
axios.post("/notice",formData)
.then((res) => {return res})
.catch((err) => {return err})
(2) ‘Content-Type’= ‘application/x-www-form-urlencoded’
传参格式为 query 形式,使用$qs.stringify
(全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’)
(request的Header:‘Content-Type’= ‘application/x-www-form-urlencoded’)
import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
data
}))
.then(res=>{
console.log('res=>',res);
})
(3) ‘Content-Type’= 'application/json传参格式为 raw (JSON格式)
(全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’)
(request的Header:‘Content-Type’= ‘application/json;charset=UTF-8’)
//方法一:
import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
console.log('res=>',res);
})
//方法二:
var readyData=JSON.stringify({
id:1234,
name:user
});
axios.post("/notice",readyData)
.then((res) => {return res})
.catch((err) => {return err})
FormData
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。
如果你想构建一个简单的GET请求,并且通过的形式带有查询参数,可以将它直接传递给URLSearchParams。
实现了 FormData 接口的对象可以直接在for…of结构中使用,而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。
Qs
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
var qs = require('qs');
var assert = require('assert');
var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });
var str = qs.stringify(obj);
assert.equal(str, 'a=c');