目錄
一、總述
1.1 前端思路
1.2 后端思路
二、前端部分
2.1 刪除功能
2.2 新增功能
2.3 修改功能
三、后端部分
3.1 刪除接口
3.2 新增接口
3.3 修改接口
四、總結
一、總述
1.1 前端思路
?刪除和新增以及修改的前端無非就是點擊按鈕，就向后端發(fā)送請求，交與后端真正的執(zhí)行相關操作。
具體來說，就是正確的找到按鈕，合理的綁定好點擊事件，然后處理的方法寫好：使用引入的請求對象，使用請求對象發(fā)送請求
對于刪除操作前和操作后是需要進行消息框提示的，這可以直接使用若依框架提供給我們進行提示。
對于新增和修改都是需要點擊后彈出一個彈窗，新增的話就是在表單輸入信息，然后將信息動態(tài)綁定到數據域中的字段，然后點擊提交將信息提交給后端完成新增操作即可，新增通常有些字段是需要有默認值的，修改和新增差不多，就字段而言的話，就只是某幾個字段的修改，不涉及到默認值什么的，就將修改的幾個字段提交給后端就行了，這點區(qū)別還是次要的，修改最關鍵的就是內容回顯，需要回顯最新的數據，這點需要注意。就是打開彈窗，需要向后端獲取到最新數據，然后綁定到數據域中，由于和表單信息進行了綁定，表單里面的信息就能正常顯示最新信息了。
這里代碼如果要不冗余的話，那個彈窗完全就可以復用，當點擊新增或者是修改按鈕的時候，記錄下當前是什么情況打開的這個彈窗，然后最后點擊提交時按照不同的情況，做不同的處理。
1.2 后端思路
后端就沒什么了，簡單的增刪還有獲取信息接口，具體實現交由MyBatisPlus完成增刪獲取操作。
注意：增刪并不是直接無腦的使用，還是需要配置一些東西的。否則的話，會出現一些小的bug，比較煩躁，下面我會進行說明
二、前端部分
現在還是分類管理，所以不需要創(chuàng)建新的組件，仍然使用原先 顯示三級分類列表的那個組件就行了。下面我將以此介紹增刪改這三個功能的前端實現：
2.1 刪除功能
這個刪除功能的前端邏輯就那樣很簡單：
1. 當點擊刪除按鈕給予提示信息，是否確認刪除
2. 當點擊確認刪除之后，向后端發(fā)送請求，服務器進行刪除
3. 當成功刪除之后，基于刪除成功的提示信息
代碼：
remove(node, data) {
this.$modal
.confirm('是否確認刪除類別名稱為"' + data.name + '"的類別？')
.then(function () {
var ids = [];
ids.push(data.catId);
return deleteCategory(ids);
})
.then(() => {
this.getTreeList();
this.selectCids.push(data.parentCid);
this.$modal.msgSuccess("刪除成功");
})
.catch(() => {});
}注意：新增和刪除之前要先調好彈窗
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
<el-form :model="category">
<el-form-item label="分類名稱">
<el-input v-model="category.name" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="圖標地址">
<el-input v-model="category.icon" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="計量單位">
<el-input v-model="category.productUnit" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitData">確 定</el-button>
</span>
</el-dialog>當然這里發(fā)請求最重要的請求對象別落下：
export function deleteCategory(data) {
return request({
url: '/product/category',
method: 'delete',
data: data
})
}不要忘記在組件中進行導入哦！??！?
2.2 新增功能
新增的話，我在前端思路那里已經說了，其實很簡單
1. 點擊新增按鈕，打開彈窗（也就是修改彈窗的屬性值，參考elementUI官網），并根據父級分類設置好當前新增分類的必要屬性值（層級、父id），并保存打開彈窗的方式是新增的狀態(tài)（以便提交的時候作判斷）
注意：因為這里新增和刪除要到了同一套的屬性，一旦修改過后，其某些屬性其實已經就有值了，倘若新增時不清空掉屬性值，就會出現錯誤的值，而新增我們是需要字段屬性都為空的。
先在數據域中定義好數據：
新增按鈕位置：?
?關鍵代碼：
append(data) {
this.dialogType = "add";
this.title = "添加分類";
this.category.parentCid = data.catId;
this.category.catLevel = data.catLevel+1;
this.category.name = "";
this.category.icon = "";
this.category.productUnit = "";
this.dialogVisible = true;
}2. 點擊提交的時候，將數據域中的信息提交給后端，完成添加操作，之后關閉彈窗，并給予添加成功的提示，最后注意要”還原現場“:也就是新增之后不要收縮起來，新增之后就要展開顯示這個新增，這里就參考elementUI文檔，展開當前新增節(jié)點的父節(jié)點（注意這部分的邏輯都是單獨寫在一個方法中，最終點擊提交的時候，再去調用這個方法，至于為什么會調用這個方法而不會調用修改分類方法，原因就是當初打開彈窗的時候保存了狀態(tài)，再最終提交的時候做了判斷）
?
addCategoty() {
console.log(this.category);
addCategory(this.category).then((response) => {
this.dialogVisible = false;
this.$modal.msgSuccess("添加成功");
this.getTreeList();
this.selectCids.push(this.category.parentCid);
});
}
submitData(){
if(this.dialogType == "add"){
this.addCategory();
}
if(this.dialogType == "edit"){
this.editCategory();
}
}最后重要的請求對象不要忘記編寫：
export function addCategory(data) {
return request({
url: '/product/category',
method: 'post',
data: data
})
}2.3 修改功能
修改和新增類似
1. 同樣也是點擊修改按鈕之后，打開彈窗，需要保存打開方式是修改的狀態(tài)
在打開彈窗之前，向后端發(fā)送請求獲取到分類的最新信息，綁定到數據域里面去，由于表單的字段屬性值與數據域中的進行了綁定，因此分類的最新信息就能進行回顯
修改按鈕位置：
?關鍵代碼：
edit(data){
this.dialogType = "edit";
this.title = "修改分類";
//拿到分類的最新信息
getCategory(data.catId).then((response)=>{
this.category.name = response.data.name;
this.category.icon = response.data.icon;
this.category.productUnit = response.data.productUnit;
this.category.parentCid = response.data.parentCid;
this.category.catId = response.data.catId;
})
this.dialogVisible = true;
}2. 填寫好信息，填寫好的信息會動態(tài)的更新數據域中的信息（因為進行了綁定），抽取需要的信息發(fā)送到后端，完成分類信息的修改，然后和新增一樣也是關閉彈窗，給予提示，最后展開其當前修改節(jié)點的父節(jié)點
editCategory(){
var {name,icon,productUnit,catId} = this.category;
updateCategory({name,icon,productUnit,catId}).then((response)=>{
this.dialogVisible = false;
this.$modal.msgSuccess("修改成功");
this.getTreeList();
this.selectCids.push(this.category.parentCid);
})
}?最終邏輯，封裝的
submitData(){
if(this.dialogType == "add"){
this.addCategory();
}
if(this.dialogType == "edit"){
this.editCategory();
}
}?同樣請求對象：
export function updateCategory(data) {
return request({
url: '/product/category',
method: 'put',
data: data
})
}三、后端部分
3.1 刪除接口
沒什么好說的
controller：
/**
* 刪除商品三級分類
*/
@ApiOperation("刪除商品三級分類")
//@PreAuthorize("@ss.hasPermi('product:category:remove')")
@Log(title = "商品三級分類", businessType = BusinessType.DELETE)
@DeleteMapping
public AjaxResult remove(@RequestBody Long[] catIds) {
return toAjax(categoryService.removeMenuByIds(Arrays.asList(catIds)));
}service：
接口：
boolean removeMenuByIds(List<Long> list);實現：
@Override
public boolean removeMenuByIds(List<Long> list) {
boolean result = removeByIds(list);
return result;
}這里直接使用的MP的批量刪除方法，所以就沒有顯式寫dao層了，逆向代碼自動生成的
注意：
1. 這里是邏輯刪除，不是物理刪除，所以可以在MP的全局配置中配一下字段，另外這里與實際含義相反，所以得在實體類中指明好
實際上刪除時0的，在實體類中標明一下：
2. 這里我在測試的時候遇到一個坑，就是刪除不了，不知道主鍵是什么字段，因為我這是使用的MP的自帶的根據主鍵進行刪除，就需要指定好實體類哪個屬性是主鍵，得告訴MP
使用@TableId注解進行標識?
/**
* 新增商品三級分類
*/
@ApiOperation("新增商品三級分類")
//@PreAuthorize("@ss.hasPermi('product:category:add')")
@Log(title = "商品三級分類", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody Category category) {
return toAjax(categoryService.save(category));
}所以最好實體類最開始就把這個注解加上，因為根據主鍵來進行修改或者是刪除這樣的操作實在是太多了。?
3. 明明聲明主鍵的注解也加上了，可是還是刪除不了，也不報錯。
最終是由于jdk版本高的緣故，MP對于高版本的jdk還不支持根據主鍵刪除的方法，將jdk修改為8可以解決
3.2 新增接口
這沒什么好說的也是直接使用MP的現成方法，也就是MP中直接插入對象
controller：
/**
* 新增商品三級分類
*/
@ApiOperation("新增商品三級分類")
//@PreAuthorize("@ss.hasPermi('product:category:add')")
@Log(title = "商品三級分類", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody Category category) {
return toAjax(categoryService.save(category));
}反正直接使用的MP中現成的service接口中的方法，我這里就不寫出來了。
注意：
默認的話新增的話，MP默認新增的主鍵值是按照雪花算法生成的，并不是我們通常想要的主鍵自增，所以得在配置文件中，在MP的配置那里加上主鍵自增的配置。這也是使用MP時經常容易忘記的
這是全局配置
3.3 修改接口
同樣也是直接使用MP的現成方法
controller：
@ApiOperation("修改商品三級分類")
//@PreAuthorize("@ss.hasPermi('product:category:edit')")
@Log(title = "商品三級分類", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody Category category) {
return toAjax(categoryService.updateById(category));
}下面沒什么好些的，都是MP的service
注意：這里和刪除一樣，一定得記得在實體類上標明哪個字段是主鍵，否則找不到
四、總結
前端部分依舊是寫組件中的相關內容。
這里主要是方法邏輯的編寫，新增刪除修改，新的東西也就是elementUI中的彈窗了，用一下。
其實最終練習的目的就是掌握，一張表的增刪改查操作，得掌握這種套路，都差不多的，當然這里主要是練習，因為這里代碼很是固定，因此之后都不需要我們再去一個一個的自己去寫了，可以使用若依幫我們逆向自動生成的，可見逆向生成器是多么的厲害，后端代碼給我們生成好了一套，前端的組件以及api也幫我們生成好了。我們程序員只需要關注核心業(yè)務即可。
后端部分更沒什么好說的，基本上我都不需要寫什么，只是實際在測試的過程中發(fā)現了一些問題，文章來源：http://www.zghlxwxcb.cn/news/detail-618814.html
主要是MP的配置上面，比如說主鍵的指定，主鍵的增長方式等，以后注意即可。文章來源地址http://www.zghlxwxcb.cn/news/detail-618814.html
到了這里，關于谷粒商城第七天-商品服務之分類管理下的刪除、新增以及修改商品分類的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
