关于springboot:14SpringBootMybatisVue-实现商品模块的crud操作

10次阅读

共计 1336 个字符，预计需要花费 4 分钟才能阅读完成。

第一步创立新 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;
@RestController
public 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 进行拜访测试，如图所示：

正文完