前端

// 批量删除权限
async deletePermissions(ids: number[]): Promise<void> {
    const response = await request.post<ApiResponse<void>>('/permissionAction/batch_delete', {
         ids 
    })
    if (response.code !== 200) {
        throw new Error(response.message || '批量删除权限失败')
    }
},

后端
controller

@PostMapping("/batch_delete")
public R<String> batchDeleteMenus(@RequestBody BatchDeleteDTO dto) {
    try {
        boolean success = permissionActionService.batchDelete(dto.getIds());
        if (success) {
            return R.ok("批量删除菜单成功");
        } else {
            return R.error("批量删除菜单失败");
        }
    } catch (Exception e) {
        return R.error("批量删除菜单失败：" + e.getMessage());
    }
}

Service

boolean batchDelete(List<Long> ids);

@Override
public boolean batchDelete(List<Long> ids) {
    return permissionActionMapper.deleteBatchIds(ids)>0;
}

mapper

int deleteBatchIds(@Param("ids") List<Long> ids);

XML

<delete id="deleteBatchIds" parameterType="java.util.List">
    DELETE FROM permission_action
    WHERE id IN
    <foreach collection="ids" item="id" open="(" separator="," close=")">
        #{id}
    </foreach>
</delete>

Promise 是 JavaScript 中用于处理异步操作的对象。它代表一个可能还未完成但最终会完成的操作，并返回结果。Promise 有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）。你可以用 .then() 处理成功结果，用 .catch() 处理失败结果。这样可以避免回调地狱，让异步代码更清晰易读。

emit 是 Vue 组件中用于触发自定义事件的方法。它可以让子组件向父组件发送消息或数据。

const emit = defineEmits(['update:currentPage'])
emit('update:currentPage', page) // 触发事件并传递参数

父组件可以通过 @update:currentPage="方法" 监听这个事件，实现子传父

Vue.js与Angular的应用场景

1）何时选择使用Vue.js前端框架

（1）如果开发的时候希望以最简单的方式来制作Web应用程序，那么应该选择Vue.js。如果对JavaScript的知识基础掌握不太好，或者有严格的开发截止日期，短时间内不能完成，Vue.js将是一个很好的选择。

（2）如果使用的前端是Laravel，那么可以选择使用Vue.js进行开发。Laravel社区的开发者认为，Vue.js是比较适用的框架，使用Vue.js会将总处理时间缩短50%左右，并释放服务器上的空间。

（3）如果是开发小规模应用系统或者开发时不喜欢受到开发的约束，请选择Vue.js。

（4）如果开发者很熟悉使用ES 5 JavaScript和HTML，那么可以完全使用Vue.js完成开发项目。

（5）如果想要在浏览器中编译模板且使用其简单性，使用独立版本的Vue.js会比较好。

（6）如果打算构建性能关键型SPA或需要功能范围的CSS，使用Vue.js开发的单文件组件会非常完美。

2）何时选择使用Angular前端框架

（1）如果需要构建大型复杂的应用程序，那么应该选择Angular，因为Angular为客户端应用程序开发提供了一个完整而全面的解决方案。

（2）对于希望处理客户端和服务器端模式的开发者来说，Angular是一个不错的选择。开发者喜欢Angular的主要原因是，它能够使他们专注于任何类型的设计（无论是jQuery调用还是DOM配置干扰）。

（3）对于创建具有多个组件和复杂需求的Web应用程序来说，Angular也同样适用。当选择Angular时，本地开发者会更容易理解应用程序功能和编码结构。

（4）如果想在新项目中选择现有组件，也可以选择Angular，因为只需复制和粘贴代码即可。

（5）Angular可以使用双向数据绑定功能来管理DOM和模型之间的同步。这使得Angular成了Web应用程序开发的强有力工具。对于希望制作更轻更快Web应用程序的开发者来说，可以选择使用Angular中的MVC结构和独立的逻辑及数据组件，这有助于加速开发过程。

5．Vue.js和Angular的代码比较

分析Vue.js和Angular的代码、包含标记、样式和行为的代码可以帮助开发者构建高效且可重用的接口。在Angular中，控制器和指令等实体包含在模块中，而在Vue.js中的模块中包含组件逻辑。

Vue.js组件，代码如下：

    Vue.extend({
       data: function(){ return{…} },
       created: function(){…},
       ready: function(){…},
       components:{…},
       methods:{…},
       watch:{…}
    });

Angular模块，代码如下：

    angular.module('myModule', […]);

相比Vue.js，Angular中的directive更加强大。

Vue.js指令，代码如下：

    Vue.directive('my-directive', {
       bind: function(){…},
       update: function(newValue, oldValue){…},
       unbind: function(){…}
    });

Angular指令，代码如下：

由于Vue.js受到Angular的启发借用了其模板语法，因此这两个框架的循环、插值和条件的语法都非常相似。例如，下面给出的代码片段。

    //Vue插值
    {{myVariable}}
    //Angular插值
    {{myVariable}}
    //Vue循环
    <li v-repeat="items" class="item-{{$index}}">
    {{myProperty}}</li>
    //Angular循环
    <li ng-repeat="item in items" class="item-{{$index}}">
    {{item.myProperty}}</li>
    //Vue条件
    <div v-if="myVar"></div>
    <div v-show="myVar"></div>
    //Angular条件
    <div ng-if="myVar"></div>
    <div ng-show="myVar"></div>

Vue.js的编码使页面渲染变得非常简单。事实上，Vue.js更像是一个库，而不是框架，因为它不提供Angular的所有功能。开发者不得不使用Vue.js的第三方代码，而Angular提供了HTTP请求服务或路由器等功能。

总之，Vue.js是轻量级的开发框架，很适合开发小规模的Web应用程序；而Angular尽管学习曲线较为陡峭，但却是构建完整复杂应用程序的好工具。

MVP的英文全称为Model View Presenter，它是从经典的MVC模式演变而来的。它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。MVP从MVC演变而来，通过表示器将视图与模型巧妙地分开。在该模式中，视图通常由表示器初始化，它负责呈现用户界面（UI），并接收用户所发出的命令，但不对用户的输入做任何逻辑处理，而仅仅是将用户输入转发给表示器。通常每一个视图对应一个表示器，但是也可能一个拥有较复杂业务逻辑的视图会对应多个表示器，每个表示器完成该视图的一部分业务处理工作，降低了单个表示器的复杂程度；一个表示器也能被多个有着相同业务需求的视图复用，增加单个表示器的复用度。表示器包含大多数表示逻辑，用以处理视图，与模型交互以获取或更新数据等。模型描述了系统的处理逻辑，但对于表示器和视图一无所知。

1．MVP模式的优点

MVP模式的优点体现在以下三个方面。

（1）View与Model完全隔离。Model和View之间具有良好解耦性的设计，这就意味着，如果Model或View中的一方发生变化，只要交互接口不发生变化，另一方就无须对上述变化做出相应的变化，这使得Model层的业务逻辑具有很好的灵活性和可重用性。

（2）Presenter与View的具体实现技术无关。也就是说，采用诸如Windows表单、WPF（Windows Presentation Foundation）框架、Web表单等用户界面构建技术中的任意一种来实现View层，都无须改变系统的其他部分。甚至为了使B/S、C/S部署架构能够被同时支持，应用程序可以用同一个Model层适配多种技术构建的View层。

（3）可以进行View的模拟测试。由于View和Model之间的紧耦合，在Model和View同时开发完成前对其中一方进行测试是不可能的。出于同样的原因，对View或Model进行单元测试很困难。MVP模式解决了上述所有的问题。在MVP模式中，View和Model之间没有直接依赖，开发者能够借助模拟对象注入测试两者中的任意一方。

2．MVP模式与MVC模式的区别

MVP模式示意图如图1-1所示。作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Controller来进行的，所有的交互都发生在Controller内部；而在MVC中View会直接从Model中读取数据，而不是通过Controller。在MVC中，View是可以直接访问Model的。View中会包含Model信息，不可避免地还要包括一些业务逻辑。在MVC模式中，更关注Model的不变，而同时有多个对Model的不同显示及View。所以在MVC模式中，Model不依赖于View，但View是依赖于Model的。不仅如此，因为有一些业务逻辑在View中实现，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的，代码复用率低。

图1-1　MVP模式

Boolean 是 Java 的包装类，boolean 是基本类型。

boolean：基本类型，占 1 位，默认值是 false，不能为 null。
Boolean：包装类，可以为 null，有更多方法（如 toString()、parseBoolean()），常用于对象、泛型、集合等场景。
举例：

boolean a = false;      // 只能 true/false
Boolean b = null;       // 可以为 null

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Bypass

注意：放宽执行策略有安全风险，仅在信任的环境下操作。

一定要在package.json下运行

在 IntelliJ IDEA 中配置调试 Spring Boot 项目步骤如下：

打开项目，点击右上角的“运行/调试配置”按钮（或菜单栏 Run -> Edit Configurations）。
点击左上角“+”，选择“Spring Boot”或“Application”。
填写主类（如 com.mobizone.kb.YourApplication），确保 VM options、Program arguments、Working directory 等参数正确。
点击“确定”保存配置。
点击绿色虫子图标（Debug）启动调试模式。
这样就可以在代码中设置断点，调试 Spring Boot 项目了。

Vue 3 的 <Transition> 组件要求被包裹的内容必须是单一根元素（一个 DOM 元素），否则会报 “Component inside <transition> renders non-element root node that cannot be animated.” 这个警告，并且内容区会不显示。</transition>
你在 Permission.vue 的 <template> 最外层加了一个 <div>，把所有内容包裹起来，这样就变成了单一根元素，警告消失，内容也能正常显示。
总结：
只要内容页 <template> 只有一个根元素，Vue 的 <Transition> 动画和内容渲染都能正常工作。
这是 Vue 官方推荐的写法，所有内容页都建议这样处理。