在当前的Web开发中，前后端分离的概念与好处显而易见。我想尝试下如何在前端展现一个springboot微服务返回的数据。我不打算使用模板引擎在后端完成数据绑定，那么就只有一条路可走了，在前端通过ajax技术来获取springboot微服务的数据，然后使用标准的前端技术来展现数据。
在前端开发中，当前流行的框架有三个：AngularJS, React与Vue。因为Vue是一个在美国的华人小伙开发的缘故，再加上Vue是独立于大公司平台的，因此获得了大众的推崇。
我看了几个Vue的教程Demo后，这项技术刷新了我对web前端开发技术的认知。兴奋之余，想自己动手做个demo来看看。对了我之前写了一个Springboot微服务JPADemo，这个微服务返回一个包含一条商品信息的json字符串。我们可以在浏览器上直接输入这个微服务的网址来查看返回的json字符串内容。不过这样太不友好了。我们可以写一个商品信息页面，然后将这个json包含的商品信息绑定到该页面的相应栏位上。
对于这个需求，我们需要做2件事情：
1. 设计呈现数据的html/css
2.使用ajax技术从后台获取数据并绑定到前端控件上。
我的html页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息</title>
</head>
<body>
<div id="pgBody">
<div id="bdGoods">
<div>
<label>商品编码：</label>
<input type="text" placeholder="请输入商品编码" />
</div>
<div>
<label>商品名称：</label>
<input type="text" placeholder="请输入商品名称" />
</div>
</div>
<div id="error"></div>
</div>
</body>
</html>
然后就是使用Vue来从后台获取数据并映射到控件上。要如何做呢？
使用Vue有2种方式，
第一种就是常规的JS方法，即下载Vue.js文件以及axios.js（axios是Vue的ajax插件），放入到规划的目录下，然后在html文档里使用script来引入Vue及axios.
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
然后我们可以在html的body下方加入我们访问后台的代码，例如：
<script>
var vmBody = new Vue({
el: '#pgBody',
data: {
seen: false,
pgContext: '这是页面内容。',
goods: {
idGoods: 0,
goodsCode: 'testcode1',
goodsName: 'testGoodsName1',
qtyOnHand: 0
}
},
mounted: function() {
let _this = this;
axios
.get('http://127.0.0.1:8081/goods/1')
.then(
function(response) {
_this.goods = response.data;
console.log(_this.goods);
})
.catch(function (err) {
_this.seen = true;
_this.error = err;
})
}
});
</script>
注意我的这个web前端页面并没有放在微服务里，因此在访问后端时存在浏览器跨域的问题，这个需要修改springboot的微服务，加入对跨域支持的处理。具体如何处理，可以度娘一下。
还有一个坑，就是mounted里需要定义一个变量来指向this，然后实现绑定数据的变化同步。
另外如何绑定数据呢？在Vue里很简单，使用v-bind或v-model指令即可完成，比如本例的商品编码与商品名称的绑定语句如下：
<input type="text" 或v-model="goods.goodsCode" placeholder="请输入商品编码" />
<input type="text" v-model="goods.goodsName" placeholder="请输入商品编码" />
v-bind与v-model的区别在于v-bind后用户修改的信息不会同步到Vue的Data域，而v-model则会同步。因此v-bind主要用于显示不做修改的数据，而v-model用于用户输入界面。
Vue是如何找到对应的元素的呢？这是通过el属性来指定的，本例中我的Vue绑定的是pgBody这个节点，因此Vue会自动在这个节点下去查找他需要处理的Vue绑定对象。
我们可以把这个html文档放到web服务下，然后访问看看效果。我是另作了一份spring web服务来提供这个html服务。运行效果如下：
Vue使用起来是不是很爽快？！
来源：oschina
链接：https://my.oschina.net/u/4234918/blog/4782326