在学习Java后端的时候,如果自己写页面感觉很麻烦,不写页面又感觉测试起来很不方便,而且写完都是JSON数据,也没什么成就感。所以想自己实现一个简单的前端。
学技术一定要学最新的,现在很流行vue前后端分类,所以就搜了一些vue的资料,主要是看官网教程。
但是真正要将前后端结合在一起,搜的资料特别特别少,一般视频也是做后端前端页面直接拷过来,做前端直接拿着设计好的文档照着文档写,还是没有办法理解前后端到底是怎么交互的。
经过不断摸索,最终终于明白前后端交互的思路。
其实可以想象成是两个服务器上或者两个不同的地址在交互,然后就是通过RESTful接口交互的,后端在controller层有URL访问接口,连同参数可以写成一个完整的路径,前端通过访问这个路径来获取后端的数据。
比如后端访问路径为:
得到的数据为:
然后前端如何拿到数据并展示呢?
我这里有个简单的demo,主要是methods里面的Axios来获取数据,具体可以看GitHub上的Axios教程,主要明白的就是Axios.get()里面的路径就是后端访问数据的路径,只不过现在是通过前端访问的。也就是我标出来的这两个路径要一样。
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<input v-model="iid"/>
<button v-on:click="haData">点击</button>
<h1>{{this.msg.lastName}}</h1>
<hello></hello>
</div>
</template>
<script>
// 导入组件
import Hello from './components/manager/BlogLogin.vue'
import Axios from 'axios'
// import { error } from 'util';
// import { truncate } from 'fs';
export default {
name: 'app',
data () {
return {
msg: [],
iid: 2,
flag: true
}
},
methods: {
haData () {
Axios.get('http://localhost:8081/emp/' + this.iid).then((response) => {
console.log(response.data)
this.msg = response.data
}).catch((error) => {
console.log(error)
})
}
},
components: {
Hello
}
}
</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>