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

来源：互联网发布：人才素质测评软件编辑：程序博客网时间：2024/06/08 05:37

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 的世界吧

阅读全文

0 0