前端怎么调用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

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

相关推荐
wangruofeng1 小时前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng1 小时前
给前端开发者的 100 个设计参考网站
前端·设计
星栈4 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技4 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569154 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马7 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng7 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding8 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
鶴哥只手遮天9 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
FungLeo11 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构