Vue + Element UI 實現權限管理系統 前端篇（十六）：系統備份還原

系統備份還原

在不少時候，咱們須要系統數據進行備份還原。咱們這裏就使用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/ 版權全部，歡迎轉載，轉載請註明原文做者及出處。