不借助后端，前端本地如何将内容写入文件并保存

2023-11-12 03:23| 来源: 网络整理| 查看: 265

需求背景

我司后台系统的路由菜单为了做权限控制，都是将其保存在后端中，登录后再通过接口将其返回给前台。

在每次有新版本新页面增加时，上线前再在后台中录入路由页面。

虽然路由菜单页面的数据是通过接口来的，但在开发时一般都是前端先定义好路由，到上线时再到后台录入，所以其实前端本地是维护有一份完整的路由表的，这样也有利于团队协作时对整个项目的页面有一个统一的了解入口，其次也可以防止后台菜单数据丢失或因维护错乱导致的问题等，有备无患嘛。

需求：后端同学希望前端将所有路由导出成一个json文件给后端，后端直接将其导入到数据库中，避免每次上线新增页面时都要花时间去后台录入。

果然程序员都是懒的。。。。。

如何实现

再看看这个需求，读写文件，第一反应前端来做这玩意得上node了吧，node也就几个api的事，但我又想了想，不用node行不行呢，答案是行的。

获取前端所有权限路由 // src/router/dynamic.js // 自动扫描导入modules文件夹里的所有路由 const files = require.context('./modules', false, /\.js$/) let modules = [] files.keys().forEach(key => { modules = modules.concat(files(key).default) }) export default modules

各个模块的路由存放在 router/modules 下，方便管理，再通过上面的代码自动扫描导出所有路由

将路由数据转换为 Blob，再通过 file-saver.js 保存到本地导出路由 import dynamicRouters from '@/router/dynamic' import FileSaver from 'file-saver' export default { name: 'ExportRouterJson', computed: { visible() { return process.env.NODE_ENV === 'development' } }, methods: { exportRouters() { const jsonStr = JSON.stringify(dynamicRouters) const blob = new Blob([jsonStr], { type: "text/json" }) FileSaver.saveAs(blob, '系统路由表.json') } } }

【本文地址】

公司简介

联系我们