vue 调用 RESTful风格接口
首先是简单的java接口代码写了四个让前端请求的接口,以下为代码@GetMapping("/v1/user/{username}/{password}")public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){...
·
首先是简单的java接口代码
写了四个让前端请求的接口,以下为代码
@GetMapping("/v1/user/{username}/{password}")
public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){
return Result.succResult(200,username+"--"+password);
}
@PostMapping("/v1/user")
public Result login3(@RequestBody User user){
return Result.succResult(200,"ok",user);
}
@PutMapping("/v1/user")
public Result putUser(@RequestBody User user){
return Result.succResult(200,user);
}
@DeleteMapping("/v1/user/{id}")
public Result delete(@PathVariable Integer id){
return Result.succResult(200,id);
}
前端请求需要在main.js中配置
import Axios from '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);
});
更多推荐
已为社区贡献1条内容
所有评论(0)