vue和django接口联调

vue访问服务端接口

配置跨域

前端跨域

打开vite.config.js，在和resolve同级的地方添加配置。

proxy代表代理的意思

"/api"是以/api开头的路径走这个配置 

target代表目标

changeOrigin: true,是开启跨域请求

rewrite是编辑路径。

(path) => path.replace(/^\/api/, "")是去掉/api

这样一个路径进来就会被处理，如下：

"/api/config"   -->   "http://localhost:8000/config"

  server: {proxy: {"/api": {target: "http://localhost:8000",changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, "")}}},

后端跨域

配置api

在utils下新建apis.js文件

注意，我们只配置了/api，所以只有/api开头的路径才能走vite.config.js中的跨域配置。

配置好api文件后记得对外暴露

// 用于访问服务端接口
const apiHost = "/api"const systemAPIs = {sliderListUrl : apiHost + "/system/slider/list", 
}export{systemAPIs
}

访问数据

在app.vue页面中完成访问数据

const bannerList = ref([])
// 访问接口获取数据const getBannerList = () => {ajax.get(systemAPIs.sliderListUrl).then(res => {bannerList.value = res.data.objectsconsole.log(bannerList.value)console.log(res)})
}// 页面元素加载前调用getBannerList函数
onMounted(() => {getBannerList()
})

其它问题

获取数据时我们用了res.data.objects，其中objects是后端传回的key值。

配置api的时候注意一定要和后端的路由完全相同，不能有任何区别，包括结尾的/，路由中有那访问路径中也一定要有。

无参数的get在路由的请求结尾已经要加/，有参数的get不能加/