Vue+SpringMVC简单交互实践入门
前言
vue环境搭建与入门,请点击以下链接进入参考:https://blog.csdn.net/srfanqie/article/details/99413233
Vue前端编写
- vue目录结构
- App.vue的编写
<template>
<div id="app">
<h1>服务端数据:{
{data}}</h1>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
data: 'data from the server'
}
},
mounted: function () {
this.getData()
},
methods: {
getData () {
console.log('-------getData')
this.$http.get('http://localhost:8080/web/hello')
.then(response => {
console.log(response)
console.log(this)
this.data = response.data
}, response => {
console.log('错误...')
})
}
}
}
</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;