网站开发的公司推荐,茂名免费自助建站模板,深圳 网站设计师 招聘,美业o2o平台有哪些概述#xff1a;没有后端数据的前端#xff0c;就失去了灵魂#xff0c;由于本人没有写后端数据#xff0c;所有调用黑马的#xff0c;往下看相信对你会有收获的。
目录
第一步#xff1a;安装axios
第二步#xff1a;编写后端访问地址
第三步#xff1a;编写具体的…概述没有后端数据的前端就失去了灵魂由于本人没有写后端数据所有调用黑马的往下看相信对你会有收获的。
目录
第一步安装axios
第二步编写后端访问地址
第三步编写具体的路由地址
第四步读取地址里面的信息 第一步安装axios
npm install axios
在main.js里面使用axios
import Vue from vue
import axios from axios
import VueAxios from vue-axiosVue.use(VueAxios, axios)
第二步编写后端访问地址
import axios from axios; // 创建axios实例
const httpInstance axios.create({baseURL: http://pcapi-xiaotuxian-front-devtest.itheima.net,timeout: 5000})// axios请求拦截器httpInstance.interceptors.request.use(config {return config}, e Promise.reject(e))// axios响应式拦截器httpInstance.interceptors.response.use(res res.data, e {return Promise.reject(e)})export default httpInstance
baseURL就是基础地址这里可以进行修改改成localhost:8080也行上面的地址我用了黑马的小兔鲜的后端调用的地址
第三步编写具体的路由地址
import httpInstance from /utils/http;
export function getCategoryAPI(){return httpInstance({url: /home/category/head})}
这里结合起来就是http://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head
当然如果你把基础地址改成localhost8080的话则地址为localhost:8080/home/category/head
第四步读取地址里面的信息
script setup
import { getCategoryAPI } from /apis/layout
import { onMounted } from vue
const getCategoryasync (){const res getCategoryAPI()console.log(res)
}
onMounted((){getCategory()
})
/script
onMounted方法第一时间会执行下面那个方法。用const res去接收并打印到控制台上
第五步结果展示
