Vue中通過Axios向SpringBoot發送get和post請求

場景

前端使用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
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

然后在需要發送請求的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 就能接受到前端傳遞過來的對象參數。