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

hello，我是杨小宝，学习了几个月的vue终于到了与后台的数据交互，但是进行数据交互的时候我遇到了一些问题，今天就写一下这些问题，作为以后的用处！！！axios的get请求写法：axios.get('/user',{params:{ID:12345}}).then(function(response){console.log(response);}).catch

Facing_the_Giants

2934人浏览 · 2017-09-10 14:32:27

Facing_the_Giants · 2017-09-10 14:32:27 发布

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

axios的get请求写法：

axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});

axios的post请求写法：

axios.post('/user',{id:123},{
    headers:{
        'Content-Type': 'application/json'
    }
})
.then((response)=>{
    console.log(response.data);
})
.catch((error)=>{
    console.log('error');
    alert('服务器没有链接成功')
})

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>

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下文件夹 通过服务器在网页访问

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^