場景

前端使用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 => {// 是否需要設置 tokenconst isToken = (config.headers || {}).isToken === falseif (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) {debuggerreturn 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;//debuggerbcxiangxi.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);});debuggerdata.bcglXiangXiList=bcglxiangxiList;debuggerreturn 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 就能接受到前端傳遞過來的對象參數。

總結

以上是生活随笔為你收集整理的Vue中通过Axios向SpringBoot发送get和post请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。