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"

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

后端跨域

配置api

在utils下新建apis.js文件

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

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

python 复制代码
// 用于访问服务端接口
const apiHost = "/api"


const systemAPIs = {
    sliderListUrl : apiHost + "/system/slider/list", 
}


export{
    systemAPIs
}

访问数据

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

python 复制代码
const bannerList = ref([])
// 访问接口获取数据

const getBannerList = () => {
  ajax.get(systemAPIs.sliderListUrl).then(res => {
    bannerList.value = res.data.objects
    console.log(bannerList.value)
    console.log(res)
  })
}

// 页面元素加载前调用getBannerList函数
onMounted(() => {
  getBannerList()
})

其它问题

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

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

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

相关推荐
暂时先用这个名字3 小时前
常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式
前端·后端·网络协议·http·状态码·国产化·响应
好运yoo5 小时前
Array.prototype.push()的理解和手写
前端·javascript
赵锦川5 小时前
nuiapp vue3 uni-ui uni.uploadFile 图片上传
javascript·vue.js·ui
LCFliu7 小时前
13-鸿蒙开发中的综合实战:华为登录界面
前端·华为·harmonyos·鸿蒙·鸿蒙系统
GraduationDesign7 小时前
基于SpringBoot的免税商品优选购物商城的设计与实现
java·vue.js·spring boot·后端·html5
weixin_516875658 小时前
vue3 父子组件传参
前端·javascript·vue.js
gqkmiss8 小时前
Chrome 130 版本新特性& Chrome 130 版本发行说明
前端·chrome·chromeos·chrome 130
龙哥说跨境8 小时前
浏览器内核版本更新:Chrome 130✔
前端·javascript·chrome
浏览器爱好者8 小时前
Chrome与夸克的安全性对比
前端·chrome
浏览器爱好者8 小时前
Chrome与夸克谁更节省系统资源
前端·chrome