前端怎么调用node接口---小白

战斗中的老段2023-12-14 20:31

1.基于node搭建express后端脚手架：基于node搭建express后端脚手架

2.在node里边写一个接口

复制代码

// 引入express
const express = require('express')
// 创建实例
const app = express()
// 创建监听端口
const port = 3000
//  定义接口
app.get('/api/getData',(req,res) =>{
    // 返回的结果
    res.send({
        code:10000,
        data:{
            msg:'hellow '
        }
    })
})
// 监听当前的端口
app.listen(port,() =>{
    console.log(`server start! port:${port}`);
})

3.前端这块页面--通过axios调用接口

复制代码

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script>
    <script>
        axios({
            methods:'get',
            url:'http://localhost/3000/api/getData'
        })
    </script>

推荐我vscode安装了一个插件直接右键运行这个页面；安装很快,

安装成功后重启一下vscode

测试接口成功（不过请求接口的时候跨域了）