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

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

相关推荐
粥里有勺糖4 分钟前
视野修炼-技术周刊第127期 | Valdi
前端·javascript·github
前端世界30 分钟前
从零搭建 ASP.NET 单文件 Web 项目:一个能真用的 BookShop 管理页实战
服务器·前端·asp.net
码上成长41 分钟前
Vue Router 3 升级 4:写法、坑点、兼容一次讲透
前端·javascript·vue.js
BBB努力学习程序设计41 分钟前
响应式页面设计与实现:让网站适配所有设备的艺术
前端·html
IT从业者张某某1 小时前
less 工具 OpenHarmony PC适配实践
前端·microsoft·less
行走的陀螺仪2 小时前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
isyuah2 小时前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
qq_398586542 小时前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
Mapmost2 小时前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端
San30.3 小时前
Ajax 数据请求:从 XMLHttpRequest 到现代前端数据交互的演进
前端·ajax·交互