系统备份还原

在很多时候,我们需要系统数据进行备份还原。我们这里就使用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/
版权所有,欢迎转载,转载请注明原文作者及出处。

Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原的更多相关文章

  1. Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题

    自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...

  2. Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制

    权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  4. Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境

    技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

  5. Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...

  6. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  7. Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

  8. Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

  9. Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例

    导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...

随机推荐

  1. innerHTML on ie6-9

    https://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx The innerHTML property is read-only on ...

  2. 使用sql server 链接服务器

    在我们的日常应用场景中经常会碰访问不同服务器上的数据库,即跨服务器访问操作不同的服务器上的SQL Sever数据库, 这个时候Sql Server的链接服务器就非常实用,创建SQL语句如下: --重新 ...

  3. JS转换HTML转义符

    JS转换HTML转义符 //去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+?>/g,'') ...

  4. linux开机自动启动

    1 .vi /etc/rc.local 2.编写开机后运行的命令 如:service httpd start

  5. 1. 用U盘安装Centos6.5 + Win7 双系统

    一. 用U盘安装Centos6.5 + Win7 双系统 准备工作:U盘(8G).需要安装的Centos6.5系统(64bit).EasyBCD(用来修复引导,否则开机只有一个系统).         ...

  6. strace排除Linux服务器故障

    strace是一个有用的小工具 – 大多数Linux系统默认已经安装 – 可以通过跟踪系统调用来让你知道一个程序在后台所做的事情.Strace是一个基础的调试工具;但是即便你不是在跟踪一个问题的时候它 ...

  7. javascript 高级程序设计 学习笔记

    <!--<script> // 异步请求封装 IE6即以上浏览器 // ajax(url,fnSucc,selectID,fnFaild) //url 请求地址 //fnSucc 异 ...

  8. DAO设计模式实现数据库的增删改查(进一步封装JDBC工具类)

    DAO设计模式实现数据库的增删改查(进一步封装JDBC工具类) 一.DAO模式简介 DAO即Data Access Object,数据访问接口.数据访问:故名思义就是与数据库打交道.夹在业务逻辑与数据 ...

  9. BUAAOO第二单元总结之电梯问题

    ---恢复内容开始--- Homework1 傻瓜电梯 程序架构 第一次题目非常简单,思考也非常简单,一部电梯傻瓜调度.将命令入公共的队列,电梯从公共队列中取命令即可,其中只需要使用ArrayBloc ...

  10. Python爬虫--简单的单词查询

    Refer to: https://github.com/gaopu/Python/blob/master/Dict.py 本程序参考自上面Github连接 该程序功能是输入一个单词可以给出这个单词的 ...