vue使用axios与springboot通讯

vue使用axios发送get请求springboot后台返回数据

一、vue部分

在vue项目下使用Terminal安装axios vue-axios与依赖

npm install --save axios vue-axios
npm install

main.js 引入axios与vue-axios

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)
new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue 中使用axios

<template>
  <div id="app">
    <div style="width: 50%" class="container">
      <div>
        <h3>Regist</h3>
        <h5>Email</h5>
        <input type="text" class="form-control" v-model.trim="mail"/><br/>
        {
   
   {mail}}
        <h5>Password</h5>
        <input type="password" class="form-control" v-model.lazy="password"/><br/>
        {
   
   {password}}
        <h5>Gender</h5>
        <input type="radio" name="gender" v-model="gender" value="female/">男
        <input type="radio" name="gender" v-model="gender" value="male/">女<br/>
        <h5>Hobby</h5>
        <input type="checkbox" name="hobby" v-model="hobby" value="music">音乐
        <input type="checkbox" name="hobby" v-model="hobby" value="movie">电影
        <input type="checkbox" name="hobby" v-model="hobby" value="sport">运动
        {
   
   {hobby}}
        <button type="button" class="btn btn-success" @click="registbtn">注册</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return{
      mail:'[email protected]',
      password:"",
      gender:'',
      hobby:[]
    }
  },
  methods:{
    registbtn(){
      this.axios({
        method:'get',
        url:'http://localhost:8888/vue?mail='+this.mail+'&password='+this.password,
      })
        .then(function (response) {
          console.log(response.data)
        })
    }
  }

}
</script>

<style>

</style>

启动前端

npm run dev

浏览器访问http://localhost:8080/

二、springboot部分

使用IDEA创建springboot项目，使用web模块即可

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

配置文件中配置端口

server.port=8888

添加跨域访问配置类

package com.soibuza.demo.Config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class Crosconfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

添加访问接口

package com.soibuza.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @program: demo
 * @description:
 * @author: Minos
 * @create: 2020-06-19 09:14
 **/
@RestController
public class Vuetest {
    @GetMapping("/vue")
    public String hivue(@RequestParam("mail") String mail, @RequestParam("password") String password){
      
        System.out.println(mail);
        System.out.println(password);
        return "regist successs";
    }
}

三、vue访问springboot接口

打开浏览器开发者模式Shift+Ctrl+I

点击注册按钮，控制台返回了后台写的regist successs

后台状况打印了，前台发送的mail与password的值

四、源码下载

admin为后台 web为前台

资源链接

https://download.csdn.net/download/qq_29752857/12534810