有关vue前后端分离的实践(一)

最新推荐文章于 2025-06-13 18:22:58 发布

yukicris

最新推荐文章于 2025-06-13 18:22:58 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yukicris/article/details/83094750

本文介绍如何在Vue项目中通过安装并配置axios实现Ajax请求，完成与后端的数据交互。详细讲解了从引入工具包到解决跨域问题的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先用到ajax技术,需要安装相应的包(不知道是否必须)

npm install axios
引入工具包

util包,包含了axios等相关配置如axios的官方api.js文件

在main.js里面设置工具包的引入

import './utils/filter_utils.js'

添加完毕后,ajax的基本部署完成,可以进行一些类似于

postRequest的操作,在target中写入地址等等,然后即可实现与后台的交互

但是,这样会有跨域的麻烦,比如他默认的是8080端口,而后台的提供的接口是8082端口

就需要在vue 的文件包中找到config文件夹,打开里面的index.js文件,为需要的方法实现跨域

proxyTable: {
  '/login': {
    target: 'http://127.0.0.1:8082', // 接口的域名
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    pathRewrite: {
      '^/login': '/login'
    }
  }
}