一、后端
1、创建Springboot项目
在IDEA中新建一个Springboot项目
然后勾选Spring Web的依赖。
然后点击Finish，项目创建完成。
2、添加控制器
新建一个控制器HelloController，然后添加下面的代码
@RestController
public class HelloController {
@RequestMapping("/hello")
public String hello(){
return "hello wanmait";
}
}3、启动IDEA项目
点击右上角绿色箭头启动项目
项目正常启动如下图：
二、前端
首先，创建一个Vue项目，创建方法可以参考我之前写的：
https://www.wanmait.com/note/shaowei/javaee/e6e45814929347b2b50b88457733a59b.html
然后在首页index.html中添加下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>springboot+vue前后端交互hellworld示例代码</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
{{msg}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#box',
data: {
msg:""
},
methods: {
// 发送ajax请求，获取用户列表
loadData: function() {
var that = this;
axios.get('http://localhost:8080/hello')
.then(function (response) {
var data = response.data;
app.msg=data;
})
.catch(function (error) {
console.log(error);
});
}
},
mounted: function() {
// 页面加载执行方法
this.loadData();
}
});
</script>
</body>
</html>然后在终端Terminal中输入命令npm run dev 启动Vue项目
项目启动完成如下图：
打开浏览器，访问网址：http://localhost:8081
此时，页面什么都没有输出，控制台报了一个错误
这是跨域请求的问题
解决这个问题，需要在后端项目中新添加一个类CoreConfig
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
/*
* 一小时内不需要再预检
*/
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowCredentials(true)
.allowedHeaders(CorsConfiguration.ALL)
.allowedMethods(CorsConfiguration.ALL)
.maxAge(3600);
}
}然后重新启动后端项目
然后刷新前端页面
现在就可以正常在页面上输出
至此，我们成功使用Springboot和Vue进行的数据的交互。
0条评论
点击登录参与评论