快捷導(dǎo)航

Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法

更新時間：2023年06月25日 15:11:42 作者：ogenes

這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

應(yīng)用場景：

有一個菜單管理的功能，主要用來跟管理后臺的菜單對應(yīng)，方便后臺菜單權(quán)限控制。每次新加功能菜單都需要開發(fā)人員在后臺手動輸入，在測試環(huán)境操作完待發(fā)布時又要到生產(chǎn)環(huán)境操作一遍，非常繁瑣。

為了簡化操作流程，計劃做一個導(dǎo)出再導(dǎo)入的功能，基于適用人群和數(shù)據(jù)特征，覺得json文件比較適合。開發(fā)人員只需要在配置一次，發(fā)布時從測試環(huán)境導(dǎo)出json文件，再導(dǎo)入到生成即可。

安裝file-saver

?  permission git:(feature/init) npm install file-saver --save

或者直接在 package.json 中添加

&#34;file-saver&#34;: &#34;^2.0.5&#34;,

導(dǎo)出

onclick: (item) => {
  this.exportMenu(item)
},
  ………………
		exportMenu(row) {
      const filename = row?.menuName || 'unknown';
      const data = JSON.stringify(this.generalExportData(row));//格式化導(dǎo)出的數(shù)據(jù)，轉(zhuǎn)成JSON字符串
      const blob = new Blob([data], { type: '' });
      FileSaver.saveAs(blob, filename +'.json');
    },
      //遞歸格式化，用來處理要導(dǎo)出的json對象
    generalExportData(item) {
      const menu = {
        parent: item.parent,
        type: item.type,
        name: item.name,
        title: item.title,
        icon: item.icon,
        path: item.path
      }
      if (item.children) {
        menu.children = [];
        item.children.forEach(child => {
          menu.children.push(this.generalExportData(child))
        })
      }
      return menu;
    },

導(dǎo)入

    <el-upload
        v-permission="['MenuAdd']"
        :limit="1"
        action="https://jsonplaceholder.typicode.com/posts/"
        ref="upload"
        accept=".json"
        :file-list="fileList"
        :show-file-list="false"
        :on-change="importMenu"
      >
        <el-button
          v-loading="uploadLoading"
          v-no-more-click
          class="el-icon-upload"
          type="primary"
        >
          {{ $trans_btn('import') }}
        </el-button>
      </el-upload>	
		importMenu(file) {
      let reader = new FileReader();
      reader.readAsText(file.raw);
      reader.onload = (e) => {
        this.uploadLoading = true;
        const menu = JSON.parse(e.target.result);//轉(zhuǎn)成JSON對象
        //提交給后端處理
        importMenu({systemId: this.systemId, menu: menu}).then((res) => {
          if (res.code > 0) {
            this.$message.error(res.msg)
          } else {
            this.$message.success(this.$trans('msg.success'));
            this.saveSuccess();//處理成功要重新渲染列表
          }
          this.uploadLoading = false
        }).catch((e) => {
          console.log(e);
          this.uploadLoading = false
        });
      };
    },

到此這篇關(guān)于Vue-element-admin 導(dǎo)出json和導(dǎo)入json文件的文章就介紹到這了,更多相關(guān)Vue-element-admin 導(dǎo)出json內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: