vue 调用 RESTful风格接口操作

2023-07-18 23:14:03 284

首先是简单的java接口代码

写了四个让前端请求的接口，以下为代码

@GetMapping("/v1/user/{username}/{password}")
publicResultlogin2(@PathVariable("username")Stringusername,@PathVariable("password")Stringpassword){
returnResult.succResult(200,username+"--"+password);
}

@PostMapping("/v1/user")
publicResultlogin3(@RequestBodyUseruser){
returnResult.succResult(200,"ok",user);
}

@PutMapping("/v1/user")
publicResultputUser(@RequestBodyUseruser){
returnResult.succResult(200,user);
}

@DeleteMapping("/v1/user/{id}")
publicResultdelete(@PathVariableIntegerid){
returnResult.succResult(200,id);
}

前端请求需要在main.js中配置

importAxiosfrom'axios'Vue.prototype.$axios=Axios

前端请求方式如下

在调用的时候用以下方式进行请求

this.$axios.get('/api/v1/user/'+this.username+'/'+this.password)
.then(data=>{
alert('get//'+data.data.code);
}).catch(error=>{
alert(error);
});

this.$axios.get('/api/v1/user',{
params:{
username:this.username,
password:this.password
}
}).then(data=>{
alert('get'+data.data.data)
}).catch(error=>{
alert(error)
});

this.$axios.put('/api/v1/user',{
id:1,
username:this.username,
password:this.password
}).then(data=>{
alert('数据password:'+data.data.data.password)
alert('数据username:'+data.data.data.username)
}).catch(error=>{
alert(error)
});

this.$axios.delete('/api/v1/user/1')
.then(data=>{
alert('delete//'+data.data.code);
}).catch(error=>{
alert(error);
});

this.$axios.post('/api/v1/user',{
username:this.username,
password:this.password
}).then(data=>{
alert('post'+data.data.data.password)
}).catch(error=>{
alert(error);
});

补充知识：vue结合axios封装form,restful,get,post四种风格请求

axios特点

1.从浏览器中创建XMLHttpRequests

2.从node.js创建http请求

3.支持PromiseAPI

4.拦截请求和响应（就是有interceptor）

5.转换请求数据和响应数据

6.取消请求

7.自动转换JSON数据

8.客户端支持防御XSRF

安装

npmiaxios–save
npmiqs--save
npmielement-ui--save
npmilodash--save

引入

1.在入口文件中引入所需插件

main.js

importVuefrom'vue'
importAppfrom'./App.vue'
importrouterfrom'./router'
importstorefrom'./store'
importElementUIfrom'element-ui';
import'element-ui/lib/theme-chalk/index.css';
importurlfrom'./apiUrl'
importapifrom'./apiUtil'

Vue.prototype.$axios=api.generateApiMap(url);
Vue.config.productionTip=false

Vue.use(ElementUI);
newVue({
router,
store,
render:h=>h(App)
}).$mount('#app')

2.新建一个util文件夹（只要存放工具类）

在util中建apiUtil.js，apiUrl.js两个文件

apiUtil.js封装请求体

importaxiosfrom'axios'
import_from'lodash'
importrouterfrom'@/util/baseRouter.js'
import{Message}from'element-ui'
importqsfrom'qs'

constgenerateApiMap=(map)=>{
letfacade={}
_.forEach(map,function(value,key){
facade[key]=toMethod(value)
})
returnfacade
}

//整合配置
consttoMethod=(options)=>{
options.method=options.method||'post'
return(params,config={})=>{
returnsendApiInstance(options.method,options.url,params,config)
}
}

//创建axios实例
constcreateApiInstance=(config={})=>{
const_config={
withCredentials:false,//跨域是否
baseURL:'',
validateStatus:function(status){
if(status!=200){
Message(status+'：后台服务异常')
}
returnstatus;
}
}
config=_.merge(_config,config)
returnaxios.create(config)
}

//入参前后去空格
consttrim=(param)=>{
for(letainparam){
if(typeofparam[a]=="string"){
param[a]=param[a].trim();
}else{
param=trim(param[a])
}
}
returnparam
}

//restful路径参数替换
consttoRest=(url,params)=>{
letparamArr=url.match(/(?<=\{).*?(?=\})/gi)
paramArr.forEach(el=>{
url=url.replace('{'+el+'}',params[el])
})
returnurl
}

//封装请求体
constsendApiInstance=(method,url,params,config={})=>{
params=trim(params)
if(!url){
return
}
letinstance=createApiInstance(config)
//响应拦截
instance.interceptors.response.use(response=>{
letdata=response.data//服务端返回数据
letcode=data.meta.respcode//返回信息状态码
letmessage=data.meta.respdesc//返回信息描述
if(data===undefined||typeofdata!="object"){
Message('后台对应服务异常');
returnfalse;
}elseif(code!=0){
Message(message);
returnfalse;
}else{
returndata.data;
}
},
error=>{
returnPromise.reject(error).catch(res=>{
console.log(res)
})
}
)
//请求方式判断
let_method='';
let_params={}
let_url=''
if(method==='form'){
_method='post'
config.headers={'Content-Type':'application/x-www-form-urlencoded'}
_params=qs.stringify(params)
_url=url
}elseif(method==='resetful'){
_method='get'
_params={}
_url=toRest(url,params)
}elseif(method==='get'){
_method='get'
_params={
params:params
}
_url=url
}elseif(method==='post'){
_method='post'
_params=params
_url=url
}else{
Message('请求方式不存在')
}
returninstance[_method](_url,_params,config)

}

exportdefault{
generateApiMap:generateApiMap
}

apiUrl.js配置所有请求路径参数

其中resetful风格请求的路径中的请求字段必须写在‘{}'中

consthost='/api'//反向代理
exportdefault{
userAdd:{url:host+"/user/add",method:"post"},
userList:{url:host+"/user/userList",method:"get"},
userInfo:{url:host+"/user/userInfo/{id}/{name}",method:"resetful"},
userInsert:{url:host+"/login",method:"form"},
}

使用

四种请求方式的入参统一都以object形式传入

APP.vue

ps：入参也可以再请求interceptors.request中封装

以上这篇vue调用RESTful风格接口操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 调用 RESTful风格接口操作

热门推荐

随机推荐