axios请求后台

本文记录使用axios请求后台的操作，可参看文档进入

1 下载 axios 相关包

在 Idea 控制台输入，如果npm不能直接下载相关的辅助包，则推荐查看博文

1 安装 axios: npm install axios
2 刷新项目中的包: npm install 
3 发布前端工程: npm run serve

配置Axios请求

在这里插入图片描述
request.js 代码

import axios from 'axios'

const instance = axios.create({
    
    
  baseURL: 'http://localhost:8081',//此处为后台程序的端口号
  timeout: 3000
});
export default instance;

在这里插入图片描述
api/user.js 代码，注意user.js主要存储和User对象相关的操作

import request from '../utils/request'
/*
后面每次请求都需要携带token
 */
export const findDList = () => {
    
    
  return request({
    
    
    url: '/system/ddict/findDList',
    method: 'get'
  })
}

主页调用

<script>
import {
    
     findDList } from '../../api/user'
export default {
    
    
  name: 'Users',
  },
  created () {
    
    
    // 创建组件的时候 调用医生信息查询
    this.getDList();
  },
  methods: {
    
    
  //异步请求
    async getDList(){
    
    
     const {
    
    data} = await findDList()
      console.log(data);
    }
  }
}
</script>

上面配置完，在访问时，会出现跨域问题，即Access-Control-Allow-Origin问题

在这里插入图片描述

解决跨域

解决跨域问题的方法有很多：
1 jsonp解决跨域问题
2 nginx反向代理解决跨域问题
3 @CrossOrigin 解决跨域问题
4 配 WebMvcConfigure解决跨域问题
…

法(1) 其中最简单的当然是基于注解，在相应的controller上方添加 @CrossOrigin 解决跨域

在这里插入图片描述

法(2) 如果有些情况下注解无法满足跨域的问题，则需要手动配置configuration，具体操作如下：

在这里插入图片描述
CrosConfig.java 相关代码如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration //注解不能丢，丢了不会起效
public class CrosConfig implements WebMvcConfigurer {
    
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE","OPTIONS","HEAD")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

测试

在这里插入图片描述
【注】Axios向后台传值有两种方式，可以参见文档进入
1 param 传值

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
//上下 两者是一样的
// 请求格式为 localhost:8080/user?ID=12345
axios.get('/user', {
    
    
    params: {
    
    
      ID: 12345
    }
  })

2 传递Json数据

// 发送 POST 请求 ，传递的数据为 json 数据
axios({
    
    
  method: 'post',
  url: '/user/12345',
  data: {
    
    
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

本文记录使用axios请求后台的操作，可参看文档 进入