axios简单练习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

今天做一个post请求前后端代码练习。实现思路：前端使用axios发送post请求，后端使用过springboot接受请求。

一、get请求

前端代码（vue+axios）

<template>
  <div class="test">
      用户名：<input v-model="username" type="text"/>
      密码：<input v-model="password" type="password"/>
      <button v-on:click="getTest">get测试</button>
  </div>
</template>
<script>
export default {
  name: "test",
  data(){
    return {
      username: ' ',
      password: ' '
    }
  },
  methods:{
    getTest(){
        let that = this;
        that.$axios.defaults.baseURL='http://localhost:8081'//设置请求地址
        that.$axios({
        method: 'get',//请求方式
        url: '/test/getTest?username='+that.username+'&password='+that.password,//请求路径和参数
      }).then((result) => {//回调函数
        console.log(result.data);
      });
    }
  }
}
</script>
<style scoped>
</style>

后端代码（springboot）

package com.example.myblog.controller;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/test")
public class TestController {

    @RequestMapping(value="/getTest",method={RequestMethod.GET})
    @ResponseBody
    @CrossOrigin
    public String test(String username,String password){
        System.out.println(username);
        System.out.println("------------");
        System.out.println(password);
        return "get请求测试成功";
    }
}

效果

二、post请求

普通参数

前端代码（vue+axios）

<template>
  <div class="test">
      用户名：<input v-model="username" type="text"/>
      密码：<input v-model="password" type="password"/>
      <button v-on:click="getTest">post测试</button>
  </div>
</template>
<script>
export default {
  name: "test",
  data(){
    return {
      username: '',
      password: ''
    }
  },
  methods:{
    getTest(){
        let that = this;
        that.$axios.defaults.baseURL='http://localhost:8081'//设置请求地址
        that.$axios({
        method: 'post',//请求方式
        url: '/test/postTest',//请求路径
        data: {
          username: that.username,
          password: that.password
        }
      }).then((result) => {//回调函数
        console.log(result.data);
      });
    }
  }
}
</script>
<style scoped>
</style>

后端代码（springboot）

package com.example.myblog.controller;

import com.example.myblog.vo.TestVo;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/test")
public class TestController {

    @RequestMapping(value="/postTest",method={RequestMethod.POST})
    @ResponseBody
    @CrossOrigin
    public String test(@RequestBody TestVo testVo){
        System.out.println(testVo.toString());
        return "post请求测试成功";
    }
}

效果

formdata参数

前端代码（vue+axios）

<template>
  <div class="test">
      用户名：<input v-model="username" type="text"/>
      密码：<input v-model="password" type="password"/>
      <button v-on:click="getTest">post测试</button>
  </div>
</template>
<script>
export default {
  name: "test",
  data(){
    return {
      username: '',
      password: ''
    }
  },
  methods:{
    getTest(){
        let that = this;
        let formData = new FormData();
        formData.append("username",that.username);
      formData.append("password",that.password);
        that.$axios.defaults.baseURL='http://localhost:8081'//设置请求地址
        that.$axios({
        method: 'post',//请求方式
        url: '/test/postTest',//请求路径
        data: formData
      }).then((result) => {//回调函数
        console.log(result.data);
      });
    }
  }
}
</script>
<style scoped>
</style>

后端代码（springboot）

package com.example.myblog.controller;

import com.example.myblog.vo.TestVo;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/test")
public class TestController {

    @RequestMapping(value="/postTest",method={RequestMethod.POST})
    @ResponseBody
    @CrossOrigin
    public String test(TestVo testVo){
        System.out.println(testVo.toString());
        return "post请求测试成功";
    }
}

或者

package com.example.myblog.controller;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/test")
public class TestController {

    @RequestMapping(value="/postTest",method={RequestMethod.POST})
    @ResponseBody
    @CrossOrigin
    public String test(@RequestParam("username") String username,@RequestParam("password") String password){
        System.out.println(username);
        System.out.println("----------");
        System.out.println(password);
        return "post请求测试成功";
    }
}

效果