vue 调用 RESTful风格接口

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