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页面中
查询按钮
查询 对应的方法
/** 搜索按钮操作 */
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 list = kqBcglService.getBcListByName(kqBcgl);
return getDataTable(list);
} 通过(@RequestParam(required = false) 来接手参数，其中bcmc要与传递参数时左边的bcmc对应。
required = false表示此参数不是必传。
POST请求传递参数
比如在新增功能时需要提交表单并传递参数。
提交时的按钮
确 定 然后对应的点击的方法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 就能接受到前端传递过来的对象参数。