vue 调用 RESTful风格接口

来源：https://blog.csdn.net/qq_35160593/article/details/89180953

首先是简单的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);            });