关键词:
系统备份还原
在很多时候,我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。
后台接口准备
系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准备好了接口,相关内容可以查阅后台篇。
backup:系统备份创建接口,会在服务端_backup目录下生成以时间戳相关的备份目录,目录下有MySQL的备份SQL。
delete:系统备份删除接口,传入页面查询得到的备份名称作为参数,删除服务端备份记录。
findRecord:系统备份查询接口,查询所有备份记录,返回给前台页面展示,用于还原和删除。
restore:系统备份还原接口,传入页面查询得到的备份名称作为参数,还原系统数据到当前备份。
页面功能实现
在用户下拉菜单中添加系统数据备份还原操作入口。
HeadBar.vue
用户下拉菜单,备份还原操作入口。
封装备份还原显示和操作页面对话框。
HeadBar.vue
备份还原对话框组件内提供查询、创建、删除和还原操作。
Backup.vue
<template> <!--备份还原界面--> <el-dialog title="备份还原" width="40%" :visible.sync="visible" :close-on-click-modal="false" :before-close="handleClose" size="small" top="5vh"> <el-table :data="tableData" style="width: 100%;font-size:16px;" height="330px" :show-header="showHeader" size="mini" v-loading="tableLoading" element-tableLoading-text="拼命加载中"> <el-table-column prop="title" label="版本名称" header-align="center" align="center"> </el-table-column> <el-table-column fixed="right" label="操作" width="150"> <template slot-scope="scope"> <el-button @click="handleRestore(scope.row)" type="primary" size="mini">还原</el-button> <el-button @click="handleDelete(scope.row)" type="danger" :disabled="scope.row.name=='backup'?true:false" size="mini">删除</el-button> </template> </el-table-column> </el-table> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="visible = false">取消</el-button> <el-button size="small" type="primary" @click="handleBackup" :loading="backupLoading">备份</el-button> </span> </el-dialog> </template> <script> import axios from 'axios'; export default { data() { return { tableData: [], // 备份记录 editLoading: false, showHeader: false, visible: true, tableLoading: false, backupLoading: false, baseUrl: this.global.backupBaseUrl } }, methods: { init : function () { this.visible = true }, // 查询备份记录 findRecords: function () { this.tableLoading = true axios.get(this.baseUrl + 'backup/findRecords').then((res) => { res = res.data if(res.code == 200) { this.tableData = res.data } else { this.$message({message: '操作失败, ' + res.msg, type: 'error'}) } this.tableLoading = false }) }, // 数据备份 handleBackup: function () { this.backupLoading = true axios.get(this.baseUrl + 'backup/backup').then((res) => { res = res.data if(res.code == 200) { this.$message({ message: '操作成功', type: 'success' }) } else { this.$message({message: '操作失败, ' + res.msg, type: 'error'}) } this.backupLoading = false this.findRecords() }) }, // 数据还原 handleRestore: function (data) { this.backupLoading = true axios.get(this.baseUrl + 'backup/restore', {params : {name : data.name }}).then((res) => { res = res.data if(res.code == 200) { this.$message({ message: '操作成功', type: 'success' }) this.$emit('afterRestore', {}) } else { this.$message({message: '操作失败, ' + res.msg, type: 'error'}) } this.backupLoading = false }) }, // 删除备份 handleDelete: function (data) { this.backupLoading = true axios.get(this.baseUrl + 'backup/delete', {params : {name : data.name }}).then((res) => { res = res.data if(res.code == 200) { this.$message({ message: '操作成功', type: 'success' }) } else { this.$message({message: '操作失败, ' + res.msg, type: 'error'}) } this.findRecords() this.backupLoading = false }) }, handleClose(done) { this.visible = false } }, mounted() { this.findRecords() } } </script> <style scoped> </style>
测试效果
最终界面效果如图所示。
系统默认备份不可删除,以保留至少一个可用备份。
源码下载
后端:https://gitee.com/liuge1988/kitty
前端:https://gitee.com/liuge1988/kitty-ui.git
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
手把手教你实现java权限管理系统前端篇(十四):菜单功能实现
菜单功能实现菜单接口封装菜单管理是一个对菜单树结构的增删改查操作。提供一个菜单查询接口,查询整颗菜单树形结构。http/modules/menu.js添加 findMenuTree接口。importaxiosfrom‘../axios‘/**菜单管理模块*///保存exportconstsave=(data)... 查看详情
手把手教你实现java权限管理系统前端篇(十五):嵌套外部网页
嵌套外部网页在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我... 查看详情
手把手教你实现java权限管理系统后端篇(十六):容器部署项目
容器部署项目这一章我们引入docker,采用docker容器的方式部署我们的项目。首先需要有一个linux环境,并且安装java和maven以及docker环境,这个教程多如牛毛,不再赘述。这里以kitty-monitor为例。添加配置在 pom.xml的properties ... 查看详情
手把手教你实现java权限管理系统后端篇(十三):系统备份还原
系统备份还原在很多时候,我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。新建工程新建一个maven项目,并添加相关依赖,可以用Springboot脚手架生成。新建kitty-bakcup工程,这是一... 查看详情
手把手教你实现java权限管理系统后端篇:解决跨域问题
什么是跨域?同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。同源策略是浏览器安全的基石。如果一个请求地址里面的协议、域名和端口号都相同,就属于同源。举个栗子... 查看详情
手把手教你实现一个抽奖系统(java版)(代码片段)
点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/wang258533488/article/details/789013031概述项目开发中经常会有抽奖这样的营销活动的需求,例如:积分大转盘、刮刮乐、老虎机等等多种形式,其实后台的实... 查看详情
手把手教你在java后端使用bsdiff实现增量更新(代码片段)
之前写过一篇博客是:手把手教你在Android中使用bsdiff实现文件增量更新。由于AndroidStudio自带NDK的环境,所以实现JNI是比较简单的。但是在博客中也说到了,文件差分的功能肯定是要在服务端进行的。而服务端运行的... 查看详情
手把手教你在java后端使用bsdiff实现增量更新(代码片段)
之前写过一篇博客是:手把手教你在Android中使用bsdiff实现文件增量更新。由于AndroidStudio自带NDK的环境,所以实现JNI是比较简单的。但是在博客中也说到了,文件差分的功能肯定是要在服务端进行的。而服务端运行的... 查看详情
手把手教你数据恢复编程基础知识篇
好了。接上一篇,本篇,我们将详细讲解NTFS文件系统的一些重要的数据结构,闲话少叙,咱们开讲。NTFS文件系统一、NTFS简介NTFS(NewTechnologyFileSystem)文件系统是微软公司同时和WindowsNT(NewTechnology... 查看详情
手把手教你用java实现一套简单的鉴权服务(springboot,ssm)(万字长文)(代码片段)
...、利用servlet+jdbc实现简单的用户登录程序1.明确思路2.手把手教你实现一个简单的web登录程序①创建web项目②编写简单的登录页面③编写servlet程序④封装jdbc操作,编写简单的数据库连接池⑤操作数据库⑥配置web.xml⑦idea运... 查看详情
小白都能看得懂的教程一本教你如何在前端实现富文本编辑器(代码片段)
...f08;IDEA/PtChram/CLion)免费正版小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY1)小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY2)小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY3)小白都能看懂的实战教程... 查看详情
手把手教你从零写一个简单的vue(代码片段)
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的VUE2.手把手教你从零写一个简单的VUE--模板篇今天给大家带来的是实现一个简单的类似VUE一样的前端框架,VUE框架现在应该算是非常主流的前端数据驱动框架,今... 查看详情
手把手教你从零写一个简单的vue(代码片段)
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的VUE2.手把手教你从零写一个简单的VUE--模板篇今天给大家带来的是实现一个简单的类似VUE一样的前端框架,VUE框架现在应该算是非常主流的前端数据驱动框架,今... 查看详情
手把手教你用java实现syslog消息的收发,学不会你打我喽!
大家好,我是道哥,专注于后端java开发,喜欢写作和分享。如果觉得文章对你有用,那就点个赞呗!如果能转发那是对道哥最大的支持!syslog的定义见文知义,syslog,从英文名字上可以看出是指系统日志。以下内容摘自百度百... 查看详情
手把手教你用redis实现一个简单的mq消息队列(java)(代码片段)
众所周知,消息队列是应用系统中重要的组件,主要解决应用解耦,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构。目前使用较多的消息队列有ActiveMQ,RabbitMQ,ZeroMQ,Kafka,MetaMQ,RocketMQ.但是如果... 查看详情
手把手教你在vue3中自定义指令(代码片段)
文章目录1.成果展示2.指令基础2.1两种作用域2.1.1局部指令2.1.2全局指令2.2七个钩子函数2.3四个参数2.4动态参数3.自定义权限指令TienChin项目前端是Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来... 查看详情
手把手教你在vue3中自定义指令(代码片段)
文章目录1.成果展示2.指令基础2.1两种作用域2.1.1局部指令2.1.2全局指令2.2七个钩子函数2.3四个参数2.4动态参数3.自定义权限指令TienChin项目前端是Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来... 查看详情
《手把手教你》系列基础篇(七十三)-java+selenium自动化测试-框架设计基础-testng实现启动不同浏览器(详解教程)(代码片段)
1.简介上一篇文章中,从TestNg的特点我们知道支持变量,那么我们这一篇就通过变量参数来启动不同的浏览器进行自动化测试。那么如何实现同时启动不同的浏览器对脚本进行测试,且听我娓娓道来。2.项目实战2.1创... 查看详情