vue使用axios与springboot通讯
vue使用axios发送get请求springboot后台返回数据一、vue部分在vue项目下使用Terminal安装axios axiosnpm install --save axios vue-axiosnpm installmain.js 引入axios与vue-axiosimport Vue from 'vue'import App from './App.vue'import axios
·
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为前台
资源链接
https://download.csdn.net/download/qq_29752857/12534810
更多推荐
已为社区贡献13条内容
所有评论(0)