Three-level classification deletion-logical deletion
Background processing
Background configuration changes
First need to modify the background configuration
Set up gateway routing
Since our front-end calls are called through the gateway, we must first modify the routing so that the front-end can access the interfaces of other modules normally.
Set application.yml
spring:
cloud:
gateway:
routes:
- id: test_route
uri: https://www.baidu.com
predicates:
- Query=url,baidu
- id: qq_route
uri: https://www.qq.com
predicates:
- Query=url,qq
- id: product_route
uri: lb://gulimall-product
predicates:
- Path=/api/product/**
filters:
- RewritePath=/api/(?<segment>.*),/$\{
segment}
- id: admin_route
uri: lb://renren-fast
predicates:
- Path=/api/**
filters:
- RewritePath=/api/(?<segment>.*),/renren-fast/$\{
segment}
nacos:
discovery:
server-addr: 123.57.234.28:8848
application:
name: gulimall-gateway
server:
port: 8070
Increase routing access to product module
Set up renrenfast, nacos configuration center
The renrenfast module will report an error every time it is started because the nacos configuration center is not set
. Add bootstrap.properties under the resource of the project
spring.cloud.nacos.config.server-addr=123.57.234.28:8848
Set the product module mybatis-plus configuration
You can check the official website of myabtis-plus, which has global configuration for logical deletion
mybatis-plus official website document
application.yml
server:
port: 10001
spring:
datasource:
url: jdbc:mysql://123.57.235.28:3306/gulimall_pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
username:
password:
driver-class-name: com.mysql.jdbc.Driver
application:
name: gulimall-product
cloud:
nacos:
discovery:
server-addr: 123.57.234.18:8848
# MapperScan
#
mybatis-plus:
mapper-locations: classpath:/mapper/**/*.xml
global-config:
db-config:
id-type: auto
logic-delete-value: 1
logic-not-delete-value: 0
Step 2: Add @TableLogic annotation to the entity class field.
If the delete flag is different from the global configuration, it can be configured separately through the annotation attribute
as follows
CategoryEntity.java
/**
* 是否显示[0-不显示，1显示]
*/
@TableLogic(value="1",delval = "0")
private Integer showStatus;
Background code modification
Modify the batch delete interface
categoryController
/**
* 删除
*/
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
categoryService.removeMenus(Arrays.asList(catIds));
return R.ok();
}
categoryService
Integer removeMenus(Collection<? extends Serializable> idList);
categoryServiceImpl
@Override
public Integer removeMenus(Collection<? extends Serializable> idList) {
//TODO 如果有子分类就不删除
//逻辑删除
return baseMapper.deleteBatchIds(idList);
}
Restart background services
Frontend changes
Set up the tree component
Introduce the function of the tree component
<template>
<el-tree
:data="menus"
node-key="catId"
:props="defaultProps"
@node-click="handleNodeClick"
show-checkbox
:expand-on-click-node="false"
:default-expanded-keys="expandedKey"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
{
node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)"
v-if="node.level <= 2"
>
添加下级分类
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)"
v-if="node.childNodes.length == 0"
>
删除
</el-button>
</span>
</span>
</el-tree>
</template>
Call background method joint debugging
Configure product module log input
yml
logging:
level:
com.xfwang.gulimall.product: debug
Method and data configuration
export default {
//import引入的组件需要注入到对象中才能使用
components: {
},
data() {
//这里存放数据
return {
menus: [],
expandedKey: [],
defaultProps: {
children: "child",
label: "name",
},
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {
},
//方法集合
methods: {
handleNodeClick(data) {
console.log(data);
},
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(({
data }) => {
this.menus = data.data;
});
},
append(data) {
console.log(111);
},
remove(node, data) {
var ids = [data.catId];
this.$confirm(`是否删除【${
data.name}】菜单?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$http({
url: this.$http.adornUrl("/product/category/delete"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({
data }) => {
this.$message({
message: "菜单删除成功",
type: "success",
});
//刷新出新的菜单
this.getDataList();
//设置需要默认展开的菜单
this.expandedKey = [node.parent.data.catId];
});
})
.catch(() => {
});
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getDataList();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
};
</script>