Vue + Element UI 实现权限管理系统 前端篇（十六）：系统备份还原

系统备份还原

在很多时候，我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。

后台接口准备

系统备份还原是对数据库的备份还原，所以必须有后台接口的支持，我们准备好了接口，相关内容可以查阅后台篇。

backup:系统备份创建接口，会在服务端_backup目录下生成以时间戳相关的备份目录，目录下有MySQL的备份SQL。

delete:系统备份删除接口，传入页面查询得到的备份名称作为参数，删除服务端备份记录。

findRecord:系统备份查询接口，查询所有备份记录，返回给前台页面展示，用于还原和删除。

restore:系统备份还原接口，传入页面查询得到的备份名称作为参数，还原系统数据到当前备份。

页面功能实现

 在用户下拉菜单中添加系统数据备份还原操作入口。

HeadBar.vue

 用户下拉菜单，备份还原操作入口。

封装备份还原显示和操作页面对话框。

HeadBar.vue

备份还原对话框组件内提供查询、创建、删除和还原操作。

Backup.vue

测试效果

最终界面效果如图所示。

系统默认备份不可删除，以保留至少一个可用备份。

 

源码下载

后端：https://gitee.com/liuge1988/kitty

前端：https://gitee.com/liuge1988/kitty-ui.git

---

作者：朝雨忆轻尘
出处：https://www.cnblogs.com/xifengxiaoma/ 
版权所有，欢迎转载，转载请注明原文作者及出处。