第一步:写一个request拦截器,并在项目中或者首页引入
这是我写的:jsp+jquery项目中正常使用vue组件并调用接口封装的request拦截器-互联网文档类资源-CSDN下载
我写得js文件需要注意的是,下面这些地方需要根据你们自己和后台约定的情况而定:
第二步:创建一个api申明的js文件,内容如下
var api= {
//更新接口
update: function (query) {
return request({
url: `XXX`,
method: "post",
// config: true,
data: query,
transformRequest: [
function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' +
encodeURIComponent(data[it]) + '&'
}
ret = ret.substring(0, ret.lastIndexOf('&'));
return ret
}
],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
},
//拉取列表接口
getList:function (query) {
return request({
url: `XXX`,
method: "get",
params:query,
})
},
}
第三步:在指定项目或者在首页引用上面的文件,引入之后,使用如下
var params = {} //对应的参数
api.getList(params).then(res => {
//业务逻辑处理
let {page} = res.data;
let records= page.list
records = records==null?[]:records
records.forEach((n,index)=>{
n.order = index+1;
});
this.tableData = records
this.paginationOpt.total = page.totalResults;
}).catch((res)=>{
//异常处理
alert(res.erroMessage)
})
如果不知道怎么引用vue组件看这篇文章:
干货:jsp+jquery(非vue)项目中怎样正常使用vue组件_-敏敏特穆尔-的博客-CSDN博客