怎么在手机上做网站,浙江网站建设电话,青岛手机端建站模板,网站建设与组织管理目录
一、总述
1.1 前端思路
1.2 后端思路
二、前端部分
2.1 删除功能
2.2 新增功能
2.3 修改功能
三、后端部分
3.1 删除接口
3.2 新增接口
3.3 修改接口
四、总结 一、总述
1.1 前端思路 删除和新增以及修改的前端无非就是点击按钮#xff0c;就向后端发送请求…目录
一、总述
1.1 前端思路
1.2 后端思路
二、前端部分
2.1 删除功能
2.2 新增功能
2.3 修改功能
三、后端部分
3.1 删除接口
3.2 新增接口
3.3 修改接口
四、总结 一、总述
1.1 前端思路 删除和新增以及修改的前端无非就是点击按钮就向后端发送请求交与后端真正的执行相关操作。
具体来说就是正确的找到按钮合理的绑定好点击事件然后处理的方法写好使用引入的请求对象使用请求对象发送请求
对于删除操作前和操作后是需要进行消息框提示的这可以直接使用若依框架提供给我们进行提示。
对于新增和修改都是需要点击后弹出一个弹窗新增的话就是在表单输入信息然后将信息动态绑定到数据域中的字段然后点击提交将信息提交给后端完成新增操作即可新增通常有些字段是需要有默认值的修改和新增差不多就字段而言的话就只是某几个字段的修改不涉及到默认值什么的就将修改的几个字段提交给后端就行了这点区别还是次要的修改最关键的就是内容回显需要回显最新的数据这点需要注意。就是打开弹窗需要向后端获取到最新数据然后绑定到数据域中由于和表单信息进行了绑定表单里面的信息就能正常显示最新信息了。
这里代码如果要不冗余的话那个弹窗完全就可以复用当点击新增或者是修改按钮的时候记录下当前是什么情况打开的这个弹窗然后最后点击提交时按照不同的情况做不同的处理。
1.2 后端思路
后端就没什么了简单的增删还有获取信息接口具体实现交由MyBatisPlus完成增删获取操作。
注意增删并不是直接无脑的使用还是需要配置一些东西的。否则的话会出现一些小的bug比较烦躁下面我会进行说明
二、前端部分
现在还是分类管理所以不需要创建新的组件仍然使用原先 显示三级分类列表的那个组件就行了。下面我将以此介绍增删改这三个功能的前端实现
2.1 删除功能
这个删除功能的前端逻辑就那样很简单
1. 当点击删除按钮给予提示信息是否确认删除
2. 当点击确认删除之后向后端发送请求服务器进行删除
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 :titletitle :visible.syncdialogVisible width30%el-form :modelcategoryel-form-item label分类名称el-input v-modelcategory.name autocompleteoff /el-input/el-form-itemel-form-item label图标地址el-input v-modelcategory.icon autocompleteoff/el-input/el-form-itemel-form-item label计量单位el-input v-modelcategory.productUnit autocompleteoff/el-input/el-form-item/el-formspan slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clicksubmitData确 定/el-button/span/el-dialog
当然这里发请求最重要的请求对象别落下 export function deleteCategory(data) {return request({url: /product/category,method: delete,data: data})
}
不要忘记在组件中进行导入哦
2.2 新增功能
新增的话我在前端思路那里已经说了其实很简单
1. 点击新增按钮打开弹窗也就是修改弹窗的属性值参考elementUI官网并根据父级分类设置好当前新增分类的必要属性值层级、父id并保存打开弹窗的方式是新增的状态以便提交的时候作判断
注意因为这里新增和删除要到了同一套的属性一旦修改过后其某些属性其实已经就有值了倘若新增时不清空掉属性值就会出现错误的值而新增我们是需要字段属性都为空的。 先在数据域中定义好数据 新增按钮位置 关键代码 append(data) {this.dialogType add;this.title 添加分类;this.category.parentCid data.catId;this.category.catLevel data.catLevel1;this.category.name ;this.category.icon ;this.category.productUnit ;this.dialogVisible true;}
2. 点击提交的时候将数据域中的信息提交给后端完成添加操作之后关闭弹窗并给予添加成功的提示最后注意要”还原现场“:也就是新增之后不要收缩起来新增之后就要展开显示这个新增这里就参考elementUI文档展开当前新增节点的父节点注意这部分的逻辑都是单独写在一个方法中最终点击提交的时候再去调用这个方法至于为什么会调用这个方法而不会调用修改分类方法原因就是当初打开弹窗的时候保存了状态再最终提交的时候做了判断 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. 同样也是点击修改按钮之后打开弹窗需要保存打开方式是修改的状态
在打开弹窗之前向后端发送请求获取到分类的最新信息绑定到数据域里面去由于表单的字段属性值与数据域中的进行了绑定因此分类的最新信息就能进行回显
修改按钮位置 关键代码 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. 填写好信息填写好的信息会动态的更新数据域中的信息因为进行了绑定抽取需要的信息发送到后端完成分类信息的修改然后和新增一样也是关闭弹窗给予提示最后展开其当前修改节点的父节点 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(ListLong list);
实现 Overridepublic boolean removeMenuByIds(ListLong 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)PostMappingpublic 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)PostMappingpublic 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)PutMappingpublic AjaxResult edit(RequestBody Category category) {return toAjax(categoryService.updateById(category));}
下面没什么好些的都是MP的service
注意这里和删除一样一定得记得在实体类上标明哪个字段是主键否则找不到
四、总结
前端部分依旧是写组件中的相关内容。
这里主要是方法逻辑的编写新增删除修改新的东西也就是elementUI中的弹窗了用一下。
其实最终练习的目的就是掌握一张表的增删改查操作得掌握这种套路都差不多的当然这里主要是练习因为这里代码很是固定因此之后都不需要我们再去一个一个的自己去写了可以使用若依帮我们逆向自动生成的可见逆向生成器是多么的厉害后端代码给我们生成好了一套前端的组件以及api也帮我们生成好了。我们程序员只需要关注核心业务即可。
后端部分更没什么好说的基本上我都不需要写什么只是实际在测试的过程中发现了一些问题
主要是MP的配置上面比如说主键的指定主键的增长方式等以后注意即可。
