SpringBoot+Mybatis+Vue 實現商品模組的crud操作
準備工作
第一步 建立新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進行訪問測試，如圖所示：
商品刪除設計及實現
在控制層方法中新增，處理刪除邏輯的方法，程式碼如如下：
@RequestMapping("/goods/doDeleteById/{id}")
public String doDeleteById(@PathVariable("id") Integer id){
System.out.println("delete id "+id);
goodsService.deleteById(id);
return "delete ok";
}
在商品列表中的tr物件內部新增刪除元素，程式碼如下：
<td><a @click="doDeleteById(g.id)">刪除</a></td>
在商品模組的vue物件中新增執行刪除邏輯的方法，程式碼如下：
doDeleteById:function(id){
var url="goods/doDeleteById/"+id;
axios.get(url)
.then(function(res){
alert(res.data);
this.vm.doFindGoods();
})
}
啟動服務進行訪問測試，檢測其結果。
商品新增設計及實現
在Controller類中新增用於處理商品新增邏輯的方法，程式碼如下：
@RequestMapping("/goods/doSaveGoods")
public String doSaveGoods(@RequestBody Goods entity){
System.out.println("entity="+entity);
goodsService.saveGoods(entity);
return "save ok";
}
在Goods頁面上新增表單元素，用於實現使用者輸入，程式碼如下：
<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="";
});
}
啟動服務進行訪問測試，檢測其結果。
總結(Summary)
本小節主要基於vue和axio技術實現了商品模組的基本操作，重點掌握客戶端與服務端的互動和傳值過程。
到此這篇關於SpringBoot+Mybatis+Vue 實現商品模組的crud操作的文章就介紹到這了,更多相關SpringBoot Mybatis Vue crud內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！