Spring and Vue(前后端分离)
spring后端 vue前端
一. 创建一个Vue项目(可以使用webpack创建,也可以使用Vue-cli创建),修改src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>Welcome {{ title }}</h1>
<p>Id: <span>{{greeting.id}}</span></p>
<p>Message: <span>{{greeting.content}}!</span></p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
title: 'Hello world',
greeting: {
id: 'XXX',
content: 'Hello World'
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
font-weight: normal;
}
</style>
在CMD中进入该项目目录,执行npm run dev,运行之后,在浏览器访问http://localhost:8080/
二. 新建一个Spring项目,添加web依赖(spring-boot-starter-web)。新建HelloController.java
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin(origins="*") //允许跨域请求
public class HelloController {
@GetMapping("/resource")
public Map<String,Object> home() {
Map<String,Object> model = new HashMap<String,Object>();
model.put("id", UUID.randomUUID().toString());
model.put("content", "Hello World");
return model;
}
}
运行Spring项目,在CMD中执行$ curl localhost:8080/resource
三. 在Vue项目中,使用 axios 访问 API
1. 安装axios和vue-axios(npm install --save-dev axios vue-axios)。
2. 修改src/main.js。
//main.js
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
3. 修改src/components/HelloWorld.vue,使用axios请求数据。
// components/HelloWorld.vue
mounted(){
this.axios.get('resource')
.then(response => {
console.log(response.data)
this.greeting = response.data;
})
.catch(error => {
console.log(error)
})
}
4. 修改config/index.js,设置代理服务器,解决跨域问题。
proxyTable: {
'/': { //1.对所有以"/"开头的url做处理
target: 'http://localhost:8080', //2.转发到localhost:8080上
changeOrigin: true,
}
}
以上代理服务器内容只能在“开发模式”下才能使用。在生产模式下,只能靠服务器的nginx特性来解决js跨域问题。
或者第3, 4步也可以直接使用这种方式:
// components/HelloWorld.vue
mounted(){
this.axios.get('http://localhost:8080/resource')
.then(response => {
console.log(response.data)
this.greeting = response.data;
})
.catch(error => {
console.log(error)
})
}
5. 运行Vue项目
Spring项目和Vue项目都没有配置端口的话,先运行Spring项目,Spring项目将运行在8080端口。再运行Vue项目(npm run dev),Vue项目将运行在8081端口。
6. 浏览器中访问http://localhost:8081/
参考:
https://spring.io/guides/tutorials/spring-security-and-angular-js/
更多推荐
所有评论(0)