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 就能接受到前端傳遞過來的物件引數。
相關文章
- java傳送GET和post請求Java
- PHP傳送POST和GET請求PHP
- cURL實現傳送Get和Post請求(PHP)PHP
- SpringMVC中如何傳送GET請求、POST請求、PUT請求、DELETE請求。SpringMVCdelete
- httprequest- post- get -傳送請求HTTP
- php 利用socket傳送GET,POST請求PHP
- java傳送http的get、post請求JavaHTTP
- Android 傳送HTTP GET POST 請求以及通過 MultipartEntityBuilder 上傳檔案(二)AndroidHTTPUI
- Go語言開發傳送Get和Post請求Go
- postman(二):使用postman傳送get or post請求Postman
- file_get_contents傳送post請求
- Vue中封裝axios傳送請求Vue封裝iOS
- 【轉】怎麼用PHP傳送HTTP請求(POST請求、GET請求)?PHPHTTP
- vue axios資料請求get、post方法的使用VueiOS
- vue中使用axios傳送ajax請求VueiOS
- Golang:使用go-resty/resty傳送http請求get和postGolangRESTHTTP
- axios 發get,post 請求小結iOS
- vue2.0 axios post請求傳參問題(ajax請求)VueiOS
- Vue 使用 Axios 傳送請求的請求體問題VueiOS
- Postman傳送Post請求Postman
- Java傳送Post請求Java
- axios傳送post請求,request.getParamter接收不到iOS
- 傳送GET請求 示例
- vue 發起get請求和post請求Vue
- 通過PowerShell傳送TCP請求TCP
- C# 傳送POST請求C#
- java apache commons HttpClient傳送get和post請求的學習整理JavaApacheHTTPclient
- 使用HttpClient傳送GET請求HTTPclient
- python傳送HTTP POST請求PythonHTTP
- post 封裝Map 傳送請求封裝
- 用Fiddler 傳送post請求
- 使用C#傳送POST請求C#
- Get和Post請求詳解
- JAVA中Get和Post請求的區別Java
- SpringBoot使用Axios傳送請求,引數處理Spring BootiOS
- vue-cli3.x中使用axios傳送請求,配合webpack中的devServer編寫本地mock資料介面(get/post/put/delete)VueiOSWebdevServerMockdelete
- SpringBoot專案的html頁面使用axios進行get post請求Spring BootHTMLiOS
- linux用curl傳送post請求Linux