筹备工作
第一步 创立新module,名字为10-springboot-goods-vue.
第二步 增加maven依赖并进行初步配置(拷贝即可)
第三步 拷贝pojo,dao,service包中的所有接口和类.
第四步 拷贝动态资源到static目录(例如vue.js,axios.min.js)
商品查问设计及实现
创立GoodsController并定义相干办法,代码如下:
package com.cy.pj.goods.controller;import com.cy.pj.goods.pojo.Goods;import com.cy.pj.goods.service.GoodsService;import java.util.List;@RestControllerpublic class GoodsController { @Autowired private GoodsService goodsService; /**查问所有商品信息*/ @GetMapping("/goods/doFindGoods") public List<Goods> doFindGoods(){ return goodsService.findGoods(); }}在我的项目static目录创立goods-vue.html,并基于vue出现数据，代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h1>The Goods Page</h1> <table> <thead> <tr> <th>id</th> <th>name</th> <th>remark</th> <th>createdTime</th> </tr> </thead> <tbody> <tr v-for="g in goods"> <td>{{g.id}}</td> <td>{{g.name}}</td> <td>{{g.remark}}</td> <td>{{g.createdTime}}</td> </tr> </tbody> </table> </div> <script src="js/axios.min.js"></script> <script src="js/vue.js"></script> <script> var vm=new Vue({//vue对象时vue.js利用的入口对象 el:"#app",//vue对象要监控的区域 data:{//此对象用于同步页面数据的一个对象 goods:{} }, methods:{//同步与页面元素事件处理函数 doFindGoods:function(){ let url="goods/doFindGoods"; axios.get(url) .then(function(result){ this.vm.goods=result.data; }); } }, mounted:function(){ this.doFindGoods(); } }); </script></body></html>启动tomcat进行拜访测试，如图所示：