当前位置:   article > 正文

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

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
推荐阅读
相关标签
  

闽ICP备14008679号