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:'xxxxxxx@cccc.com', 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
二、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为前台
资源链接
