目錄

一、總述

1.1 前端思路

1.2 后端思路

二、前端部分

2.1 刪除功能

2.2 新增功能

2.3 修改功能

三、后端部分

3.1 刪除接口

3.2 新增接口

3.3 修改接口

四、總結(jié)

---

一、總述

1.1 前端思路

?刪除和新增以及修改的前端無非就是點擊按鈕，就向后端發(fā)送請求，交與后端真正的執(zhí)行相關(guān)操作。

具體來說，就是正確的找到按鈕，合理的綁定好點擊事件，然后處理的方法寫好：使用引入的請求對象，使用請求對象發(fā)送請求

對于刪除操作前和操作后是需要進行消息框提示的，這可以直接使用若依框架提供給我們進行提示。

對于新增和修改都是需要點擊后彈出一個彈窗，新增的話就是在表單輸入信息，然后將信息動態(tài)綁定到數(shù)據(jù)域中的字段，然后點擊提交將信息提交給后端完成新增操作即可，新增通常有些字段是需要有默認(rèn)值的，修改和新增差不多，就字段而言的話，就只是某幾個字段的修改，不涉及到默認(rèn)值什么的，就將修改的幾個字段提交給后端就行了，這點區(qū)別還是次要的，修改最關(guān)鍵的就是內(nèi)容回顯，需要回顯最新的數(shù)據(jù)，這點需要注意。就是打開彈窗，需要向后端獲取到最新數(shù)據(jù)，然后綁定到數(shù)據(jù)域中，由于和表單信息進行了綁定，表單里面的信息就能正常顯示最新信息了。

這里代碼如果要不冗余的話，那個彈窗完全就可以復(fù)用，當(dāng)點擊新增或者是修改按鈕的時候，記錄下當(dāng)前是什么情況打開的這個彈窗，然后最后點擊提交時按照不同的情況，做不同的處理。

1.2 后端思路

后端就沒什么了，簡單的增刪還有獲取信息接口，具體實現(xiàn)交由MyBatisPlus完成增刪獲取操作。

注意：增刪并不是直接無腦的使用，還是需要配置一些東西的。否則的話，會出現(xiàn)一些小的bug，比較煩躁，下面我會進行說明

二、前端部分

現(xiàn)在還是分類管理，所以不需要創(chuàng)建新的組件，仍然使用原先 顯示三級分類列表的那個組件就行了。下面我將以此介紹增刪改這三個功能的前端實現(xiàn)：

2.1 刪除功能

這個刪除功能的前端邏輯就那樣很簡單：

1. 當(dāng)點擊刪除按鈕給予提示信息，是否確認(rèn)刪除

2. 當(dāng)點擊確認(rèn)刪除之后，向后端發(fā)送請求，服務(wù)器進行刪除

3. 當(dāng)成功刪除之后，基于刪除成功的提示信息

代碼：

remove(node, data) {this.$modal.confirm('是否確認(rèn)刪除類別名稱為"' + 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(() => {});}

注意：新增和刪除之前要先調(diào)好彈窗

<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="圖標(biāo)地址"><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>

當(dāng)然這里發(fā)請求最重要的請求對象別落下：

export function deleteCategory(data) {return request({url: '/product/category',method: 'delete',data: data})
}

不要忘記在組件中進行導(dǎo)入哦！！！?

2.2 新增功能

新增的話，我在前端思路那里已經(jīng)說了，其實很簡單

1. 點擊新增按鈕，打開彈窗（也就是修改彈窗的屬性值，參考elementUI官網(wǎng)），并根據(jù)父級分類設(shè)置好當(dāng)前新增分類的必要屬性值（層級、父id），并保存打開彈窗的方式是新增的狀態(tài)（以便提交的時候作判斷）

注意：因為這里新增和刪除要到了同一套的屬性，一旦修改過后，其某些屬性其實已經(jīng)就有值了，倘若新增時不清空掉屬性值，就會出現(xiàn)錯誤的值，而新增我們是需要字段屬性都為空的。

先在數(shù)據(jù)域中定義好數(shù)據(jù)：

新增按鈕位置：?

?關(guān)鍵代碼：

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. 點擊提交的時候，將數(shù)據(jù)域中的信息提交給后端，完成添加操作，之后關(guān)閉彈窗，并給予添加成功的提示，最后注意要”還原現(xiàn)場“:也就是新增之后不要收縮起來，新增之后就要展開顯示這個新增，這里就參考elementUI文檔，展開當(dāng)前新增節(jié)點的父節(jié)點（注意這部分的邏輯都是單獨寫在一個方法中，最終點擊提交的時候，再去調(diào)用這個方法，至于為什么會調(diào)用這個方法而不會調(diào)用修改分類方法，原因就是當(dāng)初打開彈窗的時候保存了狀態(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ā)送請求獲取到分類的最新信息，綁定到數(shù)據(jù)域里面去，由于表單的字段屬性值與數(shù)據(jù)域中的進行了綁定，因此分類的最新信息就能進行回顯

修改按鈕位置：

?關(guān)鍵代碼：

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)的更新數(shù)據(jù)域中的信息（因為進行了綁定），抽取需要的信息發(fā)送到后端，完成分類信息的修改，然后和新增一樣也是關(guān)閉彈窗，給予提示，最后展開其當(dāng)前修改節(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)@DeleteMappingpublic AjaxResult remove(@RequestBody Long[] catIds) {return toAjax(categoryService.removeMenuByIds(Arrays.asList(catIds)));}

service：

接口：

boolean removeMenuByIds(List<Long> list);

實現(xiàn)：

 @Overridepublic boolean removeMenuByIds(List<Long> list) {boolean result = removeByIds(list);return result;}

這里直接使用的MP的批量刪除方法，所以就沒有顯式寫dao層了，逆向代碼自動生成的

注意：

1. 這里是邏輯刪除，不是物理刪除，所以可以在MP的全局配置中配一下字段，另外這里與實際含義相反，所以得在實體類中指明好

實際上刪除時0的，在實體類中標(biāo)明一下：

2. 這里我在測試的時候遇到一個坑，就是刪除不了，不知道主鍵是什么字段，因為我這是使用的MP的自帶的根據(jù)主鍵進行刪除，就需要指定好實體類哪個屬性是主鍵，得告訴MP

使用@TableId注解進行標(biāo)識?

/*** 新增商品三級分類*/@ApiOperation("新增商品三級分類")//@PreAuthorize("@ss.hasPermi('product:category:add')")@Log(title = "商品三級分類", businessType = BusinessType.INSERT)@PostMappingpublic AjaxResult add(@RequestBody Category category) {return toAjax(categoryService.save(category));}

所以最好實體類最開始就把這個注解加上，因為根據(jù)主鍵來進行修改或者是刪除這樣的操作實在是太多了。?

3. 明明聲明主鍵的注解也加上了，可是還是刪除不了，也不報錯。

最終是由于jdk版本高的緣故，MP對于高版本的jdk還不支持根據(jù)主鍵刪除的方法，將jdk修改為8可以解決

3.2 新增接口

這沒什么好說的也是直接使用MP的現(xiàn)成方法，也就是MP中直接插入對象

controller：

/*** 新增商品三級分類*/@ApiOperation("新增商品三級分類")//@PreAuthorize("@ss.hasPermi('product:category:add')")@Log(title = "商品三級分類", businessType = BusinessType.INSERT)@PostMappingpublic AjaxResult add(@RequestBody Category category) {return toAjax(categoryService.save(category));}

反正直接使用的MP中現(xiàn)成的service接口中的方法，我這里就不寫出來了。

注意：

默認(rèn)的話新增的話，MP默認(rèn)新增的主鍵值是按照雪花算法生成的，并不是我們通常想要的主鍵自增，所以得在配置文件中，在MP的配置那里加上主鍵自增的配置。這也是使用MP時經(jīng)常容易忘記的

這是全局配置

3.3 修改接口

同樣也是直接使用MP的現(xiàn)成方法

controller：

@ApiOperation("修改商品三級分類")//@PreAuthorize("@ss.hasPermi('product:category:edit')")@Log(title = "商品三級分類", businessType = BusinessType.UPDATE)@PutMappingpublic AjaxResult edit(@RequestBody Category category) {return toAjax(categoryService.updateById(category));}

下面沒什么好些的，都是MP的service

注意：這里和刪除一樣，一定得記得在實體類上標(biāo)明哪個字段是主鍵，否則找不到

四、總結(jié)

前端部分依舊是寫組件中的相關(guān)內(nèi)容。

這里主要是方法邏輯的編寫，新增刪除修改，新的東西也就是elementUI中的彈窗了，用一下。

其實最終練習(xí)的目的就是掌握，一張表的增刪改查操作，得掌握這種套路，都差不多的，當(dāng)然這里主要是練習(xí)，因為這里代碼很是固定，因此之后都不需要我們再去一個一個的自己去寫了，可以使用若依幫我們逆向自動生成的，可見逆向生成器是多么的厲害，后端代碼給我們生成好了一套，前端的組件以及api也幫我們生成好了。我們程序員只需要關(guān)注核心業(yè)務(wù)即可。

后端部分更沒什么好說的，基本上我都不需要寫什么，只是實際在測試的過程中發(fā)現(xiàn)了一些問題，

主要是MP的配置上面，比如說主鍵的指定，主鍵的增長方式等，以后注意即可。