Vue中通过Axios向SpringBoot发送get和post请求

快来打我* 2023-10-06 13:52 49阅读 0赞

## 场景 ##

前端使用Vue+ElementUI实现页面布局。

跨域请求使用axios。

为了将axios的请求对象封装成公共的。新建request.js

import axios from 'axios'
    import { Notification, MessageBox, Message } from 'element-ui'
    import store from '@/store'
    import { getToken } from '@/utils/auth'
    import errorCode from '@/utils/errorCode'
    
    axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    // 创建axios实例
    const service = axios.create({
      // axios中请求配置有baseURL选项，表示请求URL公共部分
      baseURL: process.env.VUE_APP_BASE_API,
      // 超时
      timeout: 10000
    })
    // request拦截器
    service.interceptors.request.use(config => {
      // 是否需要设置 token
      const isToken = (config.headers || {}).isToken === false
      if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
        console.log(error)
        Promise.reject(error)
    })
    
    // 响应拦截器
    service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200;
        // 获取错误信息
        const message = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
          MessageBox.confirm(
            '登录状态已过期，您可以继续留在该页面，或者重新登录',
            '系统提示',
            {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          })
        } else if (code === 500) {
          Message({
            message: message,
            type: 'error'
          })
          return Promise.reject(new Error(message))
        } else if (code !== 200) {
          Notification.error({
            title: message
          })
          return Promise.reject('error')
        } else {
          return res.data
        }
      },
      error => {
        console.log('err' + error)
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

这里引入了axios模块和token模块验证是否登录，token这部分可以忽略。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

然后在需要发送请求的js中

import request from '@/utils/request'

引入该request模块。

### get请求传递参数 ###

在对应的vue页面中

查询按钮

<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>

对应的方法

/** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },

此方法中调用了getList方法

/** 查询班次管理列表 */
        getList() {
          listBcgl(this.queryParams).then((response) => {
            this.bcglList = response.rows;
            this.total = response.total;
          });
        }

其中listBcgl是在对应的js中通过

import {
      listBcgl,
    } from "@/api/kqgl/bcgl";

引入进来的

this.bcglList 就是页面上表格的数据源。

来到对应的js的方法listBcgl中

// 查询班次管理列表
    export function listBcgl(query) {
      debugger
      return request({
        url: '/kqgl/bcgl/getBcListByName',
        method: 'get',
        params:
        {
          bcmc:query.bcmc
        }
      })
    }

这样就可以将字符串作为参数传递给后端。

来到SpringBoot中对应的接口

@GetMapping("/getBcListByName")
        public TableDataInfo getBcListByName(@RequestParam(required = false) String bcmc)
        {
            KqBcgl kqBcgl = new KqBcgl();
            kqBcgl.setBcmc(bcmc);
            List<KqBcgl> list = kqBcglService.getBcListByName(kqBcgl);
            return getDataTable(list);
        }

通过(@RequestParam(required = false) 来接手参数，其中bcmc要与传递参数时左边的bcmc对应。

required = false表示此参数不是必传。

### POST请求传递参数 ###

比如在新增功能时需要提交表单并传递参数。

提交时的按钮

<el-button type="primary" @click="submitForm">确 定</el-button>

然后对应的点击的方法submitForm中

/** 提交按钮 */
        submitForm: function () {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              if (this.form.id != undefined) {
                debugger;
                updateBcgl(this.form, this.bcglXiangXiList).then((response) => {
                  if (response.code === 200) {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  }
                });
              } else {
                addBcgl(this.form, this.bcglXiangXiList).then((response) => {
                  debugger;
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  }
                });
              }
            }
          });
        },

这里新增和编辑是走的同一个方法，只看新增时的逻辑。

传递了两个参数，其中addBcgl也是在vue中通过

import {
      addBcgl,
    } from "@/api/kqgl/bcgl";

引入

在对应的js的方法addBcgl中

// 新增班次管理
    export function addBcgl(data,bcglXiangXiListParam) {
      var bcglxiangxiList = new Array();
      var bcxiangxi  = {};
      bcglXiangXiListParam.forEach(element => {
        bcxiangxi.xh = element.xh;
        bcxiangxi.bcbh = data.bcbh;
        //debugger
        bcxiangxi.dkkssj = element.sjfw[0];
        bcxiangxi.dkjssj = element.sjfw[1];
        bcxiangxi.ts = element.ts;
        bcxiangxi.dkdd = element.dkdd;
        bcxiangxi.zxjxljsj = element.jxsjfw[0];
        bcxiangxi.zdjxljsj = element.jxsjfw[1];
        bcglxiangxiList.push(bcxiangxi);
      });
      debugger
      data.bcglXiangXiList=bcglxiangxiList;
      debugger
      return request({
        url: '/kqgl/bcgl/addBcgl',
        method: 'post',
        data: data
      })
    }

上面是对传递的两个参数进行一个处理，最终是封装成一个对象参数，

其中这个对象的属性要和你后端对应的实体类的属性对应，这样后端才能接收到相同属性的值。

注意这里最后的传递参数的

return request({
        url: '/kqgl/bcgl/addBcgl',
        method: 'post',
        data: data
      })

这里是使用的data不再是params。最后要传递的参数就是data这个对象。

前端传递的data对应的对象声明

// 添加或者修改班次表单参数
          form: {
            pageNum: 1,
            pageSize: 10,
            id: undefined,
            bcbh: undefined,
            bcmc: undefined,
            bclx: undefined,
            sfkt: undefined,
            xss: undefined,
            sfyb: undefined,
            bzc: undefined,
            kqts: undefined,
            mzxx: undefined,
            bz: undefined,
          },

对应的后台的model类

@ApiModel("班次管理对象")
    public class KqBcgl extends BaseEntity
    {
        private static final long serialVersionUID = 1L;
    
        /** id */
        private Long id;
    
        /** 班次编号 */
        @Excel(name = "班次编号")
        @ApiModelProperty("班次编号")
        private String bcbh;
    
        /** 班次名称 */
        @Excel(name = "班次名称")
        @ApiModelProperty("班次名称")
        private String bcmc;
    
        /** 班次类型 */
        @Excel(name = "班次类型")
        @ApiModelProperty("班次类型")
        private String bclx;
    
        /** 是否跨天 */
        @Excel(name = "是否跨天")
        @ApiModelProperty("是否跨天")
        private Boolean sfkt;
    
        /** 小时数 */
        @Excel(name = "小时数")
        @ApiModelProperty("小时数")
        private String xss;
    
        /** 是否夜班 */
        @Excel(name = "是否夜班")
        @ApiModelProperty("是否夜班")
        private Boolean sfyb;
    
        /** 班中餐 */
        @Excel(name = "班中餐")
        @ApiModelProperty("班中餐")
        private String bzc;
    
    
        /** 备注 */
        @Excel(name = "备注")
        @ApiModelProperty("备注")
        private String bz;
    }

省略get和set方法

然后在请求对应的SpringBoot方法中

@PostMapping("/addBcgl")
        public AjaxResult add(@RequestBody KqBcgl kqBcgl)
        {
            return kqBcglService.insertKqBcgl(kqBcgl);
        }

通过(@RequestBody 就能接受到前端传递过来的对象参数。

[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi