node连接数据库和axios请求数据_node 接收 axios 的patch请求

node连接数据库和axios请求数据

准备：
1.如果是准备的json文件，json文件的数据导入
xxx.json文件导入数据库。1.创建数据库,右键点击表，选择导入文件，文件导入json文件，后面全部是点击下一步，最后点击完成。
2.创建服务器，安装插件

npm init
cnpm install express --save
cnpm install mysql --save
1
2
3

在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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

创建并开启服务器：

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...");
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在组件中发送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);
    }
}
1
2
3
4
5
6
7

上述内容补充知识：
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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二：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})
1
2
3
4
5
6
7

(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);            
})
1
2
3
4
5
6
7
8
9

(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})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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');
1
2
3
4
5
6
7
8