Nodejs后端使用axios接收vue3前端数据

前端示例代码：

使用params传参，axios会自动将params转成query

<script setup>

import{ reactive }from 'vue'
import axios from 'axios';

//定义一个发送请求的方法
function sendusinfo(){
    axios({
        method:'get',
        url:'http://127.0.0.1:9000/api/info/',
        
        //采用params传参，可以看看axios的官方文档
        params:{
            username:form.username,
            password:form.password
        }
    }).then(console.log(Response))
}


//设置表单响应式对象
const form = reactive({
    password:'',
    username:''
})


</script>

后端接收代码：

//router是路由对象，主要看后面

router.get('/info',(req,res)=>{
    // req.query是前端传过来的查询参数，是一个对象（{username:'',password:''}）
    let username = req.query.username
    let password = req.query.password

    res.setHeader('Access-Control-Allow-Origin','*')//用于解决跨域问题，不用管
    
    // 查询数据库中用户名对应的密码并返回判断结果
    // 问号表示占位符，用username来替代
    db.query('select * from user where username=?',username,(err,result)=>{
            console.log（result[0].password）
        }
       //result返回的是一个包含对象的列表，所以只有一条返回对象时是result[0]
    })
})

效果如下：

 数据：

 1.发一个账号，密码留空

 2.后端查询数据库后输出结果：