子组件请求数据:
// 存数据
data() {
return {
data: [],
showBool:false
}
},
// 类似声明周期 可以触发函数
mounted(){
this.getData()
},
// 写函数
methods:{
// 请求数据
getData(){
this.$api.zyl_getTaoh().then((res)=>{
this.data = res.data;
this.showBool = true;
}).catch((res)=>{
console.log(res)
})
},
}
封装请求数据:
main.js同一级创建common文件夹:文件夹里创建两个js文件:
api.js 设置对后台操作的函数
import Request from '@/utils/requset.js' let request = new Request().http //全局定义请求头 export default { // 请求样式 // 获取 getMsg: function(data) { return request({ url: "/api/sp", //请求头 method: "GET", //请求方式 data: data, //请求数据 }) }, // 删除 delMsg: function(data) { return request({ url: `/api/delschool/${data.id}`, method: 'DELETE', data: data, }) }, // 添加 addMsg: function(data) { return request({ url: '/api/addschool', method: 'POST', data: data, }) }, // 更新 upMsg: function(data) { return request({ url: `/api/xgschool/${data.id}`, method: 'PUT', data: data, }) }, // 查找 searchMsg: function(data) { return request({ url: `/api/school/${data.id}`, method: 'GET', data: data, }) } }
operate.js 设置接口路径:
export default { //接口 api: "http://127.0.0.1:7001", }
main.js引入全局
import api from '@/common/api.js' Vue.prototype.$api = api
页面调用:
methods:{ // 请求数据 getData(){ this.$api.getMsg().then((res)=>{ this.data = res.data; this.showBool = true; }).catch((res)=>{ console.log(res) }) }, },