快捷導(dǎo)航

SpringBoot+Mybatis+Vue 實(shí)現(xiàn)商品模塊的crud操作

更新時間：2020年10月29日 08:28:03 作者：小韓

這篇文章主要介紹了SpringBoot+Mybatis+Vue 實(shí)現(xiàn)商品模塊的crud操作,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

準(zhǔn)備工作

第一步創(chuàng)建新module,名字為10-springboot-goods-vue.

第二步添加maven依賴并進(jìn)行初步配置(拷貝即可)

第三步拷貝pojo,dao,service包中的所有接口和類.

第四步拷貝靜態(tài)資源到static目錄(例如vue.js,axios.min.js)

商品查詢設(shè)計(jì)及實(shí)現(xiàn)

創(chuàng)建GoodsController并定義相關(guān)方法,代碼如下:

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();
   }
}

在項(xiàng)目static目錄創(chuàng)建goods-vue.html,并基于vue呈現(xiàn)數(shù)據(jù)，代碼如下

<!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應(yīng)用的入口對象
       el:"#app",//vue對象要監(jiān)控的區(qū)域
       data:{//此對象用于同步頁面數(shù)據(jù)的一個對象
       goods:{}
       },
       methods:{//同步與頁面元素事件處理函數(shù)
        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進(jìn)行訪問測試，如圖所示：

商品刪除設(shè)計(jì)及實(shí)現(xiàn)

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

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

在商品列表中的tr對象內(nèi)部添加刪除元素，代碼如下：

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

在商品模塊的vue對象中添加執(zhí)行刪除邏輯的方法，代碼如下：

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

啟動服務(wù)進(jìn)行訪問測試，檢測其結(jié)果。

商品添加設(shè)計(jì)及實(shí)現(xiàn)

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

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

在Goods頁面上添加表單元素，用于實(shí)現(xiàn)用戶輸入，代碼如下：

<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對象內(nèi)部添加用于同步表單數(shù)據(jù)的Data屬性內(nèi)容，代碼如下：

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

在vue對象內(nèi)部添加處理添加操作的事件處理函數(shù)，代碼如下：

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="";
    });
}

啟動服務(wù)，進(jìn)行添加操作測試。

商品修改設(shè)計(jì)及實(shí)現(xiàn)

在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對象中的用于保存和修改數(shù)據(jù)的方法，代碼如下：

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="";
    });
}

啟動服務(wù)進(jìn)行訪問測試，檢測其結(jié)果。

總結(jié)(Summary)

本小節(jié)主要基于vue和axio技術(shù)實(shí)現(xiàn)了商品模塊的基本操作，重點(diǎn)掌握客戶端與服務(wù)端的交互和傳值過程。

到此這篇關(guān)于SpringBoot+Mybatis+Vue 實(shí)現(xiàn)商品模塊的crud操作的文章就介紹到這了,更多相關(guān)SpringBoot Mybatis Vue crud內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: