<template> <!-- <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> --> <div id="app"> <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie> <Hello></Hello> <Hello1></Hello1> </div> </template> <script> // import HelloWorld from './components/HelloWorld.vue' import Movie from './components/Movie.vue' import Hello from './components/Hello.vue' import Hello1 from './components/Hello1.vue' import axios from 'axios' Movie,name export default { name: 'App', data:function(){ return{ movies:[ {id:1,title:"金刚狼",rating:8.7}, {id:2,title:"金刚狼",rating:8.8}, {id:3,title:"金刚狼",rating:8.6} ] } }, created:function(){ axios.get("http://localhost:8088/Movie/find") .then(function(response){ alert(response) }) }, mounted:function(){ }, components: { // HelloWorld Movie, Hello, Hello1 } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<template>
<!-- <div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div> -->
<div id="app">
<Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
<Hello></Hello>
<Hello1></Hello1>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Movie from './components/Movie.vue'
import Hello from './components/Hello.vue'
import Hello1 from './components/Hello1.vue'
import axios from 'axios'
Movie,name
export default {
name: 'App',
data:function(){
return{
movies:[
{id:1,title:"金刚狼",rating:8.7},
{id:2,title:"金刚狼",rating:8.8},
{id:3,title:"金刚狼",rating:8.6}
]
}
},
created:function(){
axios.get("http://localhost:8088/Movie/find")
.then(function(response){
alert(response)
})
},
mounted:function(){
},
components: {
// HelloWorld
Movie,
Hello,
Hello1
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
package com.example.springbootvue.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 CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**")//允许跨域访问的范围 .allowedOrigins("*")//允许跨域访问的源 .allowedMethods("POST","GET","PUT","OPTIONS","DELETE")//允许请求方法 .maxAge(168000)//预设间隔时间 .allowCredentials(true);//是否发送cookie } }
package com.example.springbootvue.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 CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**")//允许跨域访问的范围 .allowedOrigins("*")//允许跨域访问的源 .allowedMethods("POST","GET","PUT","OPTIONS","DELETE")//允许请求方法 .maxAge(168000)//预设间隔时间 .allowCredentials(true);//是否发送cookie } }