Axios数据请求post与node进行传参，node中处理json_nodejs axios application/json

作者：羊村懒王 | 2024-02-18 03:51:00

踩

nodejs axios application/json

hello，我是杨小宝，学习了几个月的vue终于到了与后台的数据交互，但是进行数据交互的时候我遇到了一些问题，今天就写一下这些问题，作为以后的用处！！！

axios的get请求写法：

axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});1
2
3
4
5
6
7
8
9
10
11

axios的post请求写法：

axios.post('/user',{id:123},{
    headers:{
        'Content-Type': 'application/json'
    }
})
.then((response)=>{
    console.log(response.data);
})
.catch((error)=>{
    console.log('error');
    alert('服务器没有链接成功')
})1
2
3
4
5
6
7
8
9
10
11
12

get方法发送数据请求都没有问题，但是post的请求的请求头需要更换成’application/json’ 在node后台代码中添加post接收app.use(bodyParser.json()) 接受成json对象形式。

简单做了一个与数据库本地测试登录demo

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <style type="text/css">
        #login{
            border: 1px solid red;
            margin: 200px auto;
        }

    </style>
</head>
<body>
    <div id="login">
        <p>账号:<input type="text" placeholder="请输入您的帐号" v-model='msg.username'></p>
        <p>密码:<input type="password" placeholder="请输入您的密码" v-model='msg.password'></p>
        <button @click='login'>点击登录</button>


        <h2>{{aaa}}</h2>
        <h1>{{bbb}}</h1>
    </div>
</body>
</html>
<script type="text/javascript">
    let vm = new Vue({
        data:{
            msg:{
                username:'',
                password:''
            },
            aaa:'',
            bbb:''
        },
        methods:{
            login(){
                console.log(1)
                axios.post('/user',this.msg,{
                    headers:{
                        'Content-Type': 'application/json'
                    }
                })
                .then((response)=>{
                    console.log(response.data);
                    this.aaa =  response.data.ok;
                    this.bbb = response.data.msg
                })
                .catch((error)=>{
                    console.log('error');
                    alert('服务器没有链接成功')
                })
            }
        },
        created(){

        }
    }).$mount('#login')

</script>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

node代码：

//常量
const express = require('express')// 服务器
const expressStatic = require('express-static')  //本地html上传服务器
const mysql = require('mysql');  // 数据库
const bodyParser = require('body-parser');// post 请求
const db = mysql.createPool({host:'localhost',user:'root',password:'yangbaoxi789',database:'lol'});

var app = express();  //创建服务器


app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
app.use('/user',function (req,res) {
    // console.log(req.query)  get请求
    console.log(req.body); // post请求 
    var username = req.body.username;
    var password = req.body.password;
    console.log(username)
    console.log(password)
    db.query(`SELECT * FROM login WHERE username='${username}'`,(err,data)=>{
        if (err) {
            console.log('数据库链接没有成功');
            console.log(err);
        }else{
            console.log(data)//  []
            if (data.length == 0) {
                // res.send() 往 前台发送数据
                res.send({ok:false,msg:'用户名不存在'})
            }else{
                if (data[0].password == password) {
                    res.send({ok:true,msg:'登录成功'})
                }else{
                    res.send({ok:false,msg:'密码错误'})
                }
            }
        }
    })

})


app.listen(8080)  // 端口号

app.use(express.static('./www'))   // 让我们的WWW下文件夹 通过服务器在网页访问
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
39
40
41
42
43
44

我是杨小宝！跟大家一起学习 Vue2.X 的世界吧

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/104440