系統備份還原
在很多時候，我們需要系統數據進行備份還原。我們這里就使用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/
版權所有，歡迎轉載，轉載請注明原文作者及出處。