14-SpringBoot+Mybatis+Vue 實現商品模塊的crud操做

時間 2020-10-16

標籤 html vue java ios spring axios tomcat springboot app maven 欄目 Spring 简体版

原文原文鏈接

準備工做

第一步建立新module,名字爲10-springboot-goods-vue.
第二步添加maven依賴並進行初步配置(拷貝便可)
第三步拷貝pojo,dao,service包中的全部接口和類.
第四步拷貝靜態資源到static目錄(例如vue.js,axios.min.js)html

商品查詢設計及實現

建立GoodsController並定義相關方法,代碼以下:vue

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呈現數據，代碼以下java

<!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進行訪問測試，如圖所示：
ios

商品刪除設計及實現

在控制層方法中添加，處理刪除邏輯的方法，代碼如以下：spring

@RequestMapping("/goods/doDeleteById/{id}")
public String doDeleteById(@PathVariable("id")  Integer id){
    System.out.println("delete id "+id);
    goodsService.deleteById(id);
    return "delete ok";
}

在商品列表中的tr對象內部添加刪除元素，代碼以下：axios

<td><a @click="doDeleteById(g.id)">刪除</a></td>

在商品模塊的vue對象中添加執行刪除邏輯的方法，代碼以下：tomcat

doDeleteById:function(id){
    var url="goods/doDeleteById/"+id;
    axios.get(url)
        .then(function(res){
            alert(res.data);
            this.vm.doFindGoods();
        })
}

啓動服務進行訪問測試，檢測其結果。springboot

商品添加設計及實現

在Controller類中添加用於處理商品添加邏輯的方法，代碼以下：app

@RequestMapping("/goods/doSaveGoods")
public String doSaveGoods(@RequestBody Goods entity){
    System.out.println("entity="+entity);
    goodsService.saveGoods(entity);
    return "save ok";
}

在Goods頁面上添加表單元素，用於實現用戶輸入，代碼以下：maven

<form>
    <ul>
        <li>name</li>
        <li><input v-model="name"></li>
        <li>remark</li>
        <li><textarea v-model="remark"></textarea></li>
        <li><input type="button" @click="doSaveOrUpdateGoods" value="Save Goods"></li>
    </ul>
</form>

在vue對象內部添加用於同步表單數據的Data屬性內容，代碼以下：

data:{
    name:"",
    remark:"",
    goods:"",
}

在vue對象內部添加處理添加操做的事件處理函數，代碼以下：

doSaveOrUpdateGoods:function(){
    var params={"name":this.name,"remark":this.remark};
    var url="goods/doSaveGoods";
    axios.post(url,params)
        .then(function(res){
            alert(res.data);
            this.vm.doFindGoods();
            this.vm.name="";
            this.vm.remark="";
        });
}

啓動服務，進行添加操做測試。

商品修改設計及實現

在Controller中添加基於商品id查詢和更新商品信息的方法，代碼以下：

@RequestMapping("/goods/doFindById/{id}")
public Goods doFindById(@PathVariable("id") Integer id){
    return goodsService.findById(id);
}

@RequestMapping("goods/doUpdateGoods")
public String doUpdateGoods(@RequestBody Goods entity){
    goodsService.updateGoods(entity);
    return "update ok";
}

在Goods頁面表單中添加隱藏的表單元素用於記錄id值，代碼以下：

<li><input type="hidden" v-model="id"></li>

在Goods頁面記錄中添加修改操做的須要的a元素，代碼以下：

<td><a @click="doFindById(g.id)">修改</a></td>

在Vue對象中添加基於id查詢的方法，代碼以下：

doFindById:function(id){
    var url="goods/doFindById/"+id;
    axios.get(url)
    .then(function(res){
        console.log(res.data);
        this.vm.id=res.data.id;
        this.vm.name=res.data.name;
        this.vm.remark=res.data.remark;
    })
}

修改Vue對象中的用於保存和修改數據的方法，代碼以下：

doSaveOrUpdateGoods:function(){
    var params={"id":this.id,"name":this.name,"remark":this.remark};
    var url=this.id?"goods/doUpdateGoods":"goods/doSaveGoods";
    axios.post(url,params)
        .then(function(res){
            this.vm.doFindGoods();
            alert(res.data);
            this.vm.id="";
            this.vm.name="";
            this.vm.remark="";
        });
}

啓動服務進行訪問測試，檢測其結果。