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

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

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

相关推荐
saber_andlibert17 小时前
TCMalloc底层实现
java·前端·网络
逍遥德17 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~17 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions17 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子17 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘17 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录18 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
梦帮科技18 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
VT.馒头19 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多19 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js