Mazer 是一套面向数据看板、内部运营系统和管理工具的 Bootstrap 5 多页面后台模板。本地 1.0.0 下载包包含 58 个页面模板,覆盖仪表盘、组件、表单、富文本编辑器、数据表、图表、认证和错误页,并附带 Nunjucks、SCSS 与 Laravel Mix 构建源码。它采用 MIT License,但账户、聊天、邮件、结算和数据查询仍属于前端演示,需要自行接入真实后端。

Mazer Bootstrap 5 管理后台仪表盘与组件预览

资源目录同时保留 srcdist 两套内容:前者用于修改布局、侧栏和主题样式,后者是已经生成的静态页面。只想替换页面文字时,可以先从 dist/index.html 入手;需要统一调整页面骨架、菜单或主题时,应修改 Nunjucks、sidebar-items.json 与 SCSS,再重新生成静态文件。

58 个页面模板覆盖哪些后台场景

页面组 数量 主要内容
仪表盘 1 统计卡片、访问图表、地区数据、评论和消息列表
基础与扩展组件 19 警告、按钮、卡片、轮播、模态框、分页、进度、头像、评分和提示消息等
布局 4 默认侧栏、单列、顶部导航和横向菜单布局
表单与编辑器 11 输入、选择、单选、复选、文本域、表单布局及四种富文本编辑器
表格、图表与数据组件 7 基础表格、数据表、Chart.js、ApexCharts、文件上传和两类地图入口
小部件与图标 6 聊天框、价格卡、待办列表及三套图标页面
应用、认证与错误页 10 邮件、聊天、图库、结算、登录、注册、找回密码和 403/404/500 页面

以上分组合计 58 个源页面模板。dist 中实际可以数到 59 个 HTML 文件,多出的 sidebar-items.html 是构建时由侧栏数据生成的文件,并不代表多出一个独立业务页面。因此,资源属性写成“58 页 + 1 个构建文件”更接近当前压缩包的实际结构。

数据表、图表与表单组件提供哪些交互

数据表页面使用 Simple-DataTables,可在浏览器端完成关键词搜索、排序和分页;待办小部件通过 Dragula 支持拖动排序;仪表盘和图表示例分别使用 ApexCharts 与 Chart.js。SweetAlert、Toastify、评分、轮播和模态框也提供了可操作的界面示例,适合用来参考后台反馈、数据展示和组件状态。

富文本区域包含 Quill、CKEditor、Summernote 与 TinyMCE 四种编辑器示例。主要导航和 Bootstrap 组件不依赖 jQuery,但 Summernote 页面会单独加载 jQuery,所以不能把整个资源包概括为“完全没有 jQuery”。如果项目不需要 Summernote,可以连同相关页面和依赖一起移除,保持主要工程的原生 JavaScript 路线。

Nunjucks、SCSS 与 Laravel Mix如何协同工作

源页面通过 extends 复用 layouts/master.html 等公共布局,侧栏结构集中在 src/sidebar-items.json。修改菜单名称、链接或分组时,不必逐页编辑生成后的导航;构建配置会把同一份侧栏数据交给 Nunjucks,再输出到各个静态页面。

样式入口位于 src/assets/scss,其中包含 Bootstrap 定制、页面样式、组件样式以及聊天、待办等小部件样式。包内提供 npm run devnpm run watchnpm run prod 脚本,由 Laravel Mix 6、Webpack 5 与 Sass 负责资源生成。本文只依据文件与配置整理结构,没有执行依赖安装和生产构建,因此正式改造前仍需在目标 Node 环境中核对依赖与构建输出。

认证、应用页面和文件上传的功能边界

登录、注册和找回密码表单的提交目标都是本地 index.html,不会创建账户、发送重置邮件或保存会话。邮件编辑器指向占位地址;聊天应用、图库、结算页、Google Map 和矢量地图页面在本地 1.0.0 源码中显示“Coming Soon”,不能当作已经完成的业务模块。

文件上传页面集成 FilePond,并包含向第三方图片服务发送文件的 XMLHttpRequest 示例,其中还写有示例 API Key。正式项目不应直接沿用这类配置,应移除公开 Key、改接自有受控接口,并补充文件去向、大小限制、格式校验和隐私说明。文件选择、预览和校验界面也不等于文件已经保存到自己的服务器。

在线演示与本地 1.0.0 下载包存在差异

当前在线演示仍是 Mazer 管理后台,但导航中已经出现 RTL 布局、表单验证、Profile、Security、Leaflet Map 和 OpenLayers Map 等新增入口;这些页面没有包含在本地 1.0.0 下载包中。选择功能时应以实际压缩包为准,不能只根据在线演示菜单判断本地资源已经具备对应文件。

二次开发建议顺序

  1. 先从 dist 选择实际需要的页面,删除“Coming Soon”和不使用的演示入口。
  2. src/sidebar-items.json 中收缩菜单,并同步修改公共 Nunjucks 布局、页脚和品牌信息。
  3. 通过 SCSS 调整主色、间距、字体和卡片状态,不要只维护构建后的 CSS。
  4. 将仪表盘数字、图表数组和数据表样例替换为接口数据,同时补充加载、空数据、失败和无权限状态。
  5. 接入认证、会话、角色权限和服务端校验;邮件、聊天、结算和上传则按业务分别设计接口。
  6. 处理外部字体、视频、文件上传和第三方编辑器依赖,最后执行生产构建并检查不同尺寸下的页面表现。

MIT 许可与演示内容说明

MIT License 允许使用、修改和分发源码,但在软件副本或重要代码部分中需要保留版权声明和许可文本。模板内的人名、头像、统计数字、评论、地图和交易相关信息均为演示内容,上线前应替换为有权使用且符合实际业务的数据。模板附带的第三方字体、视频、上传服务、编辑器和依赖包仍应分别核对各自的授权条款。

支付赞助获取下载注意:
1.支付赞助成功后请勿关闭窗口或其他操作,等待系统自动确认,支付按钮 变为 下载按钮。2.游客操作请使用 Chrome 、Edge 或 FireFox浏览器 ,以免支付刷新失败(浏览器缓存7天有效)。3.如支付赞助成功后刷新无法显示下载按钮、链接失效等问题请到 【公告留言】 处理或参考下载说明文档
免责声明:
1.本站资源售价仅为赞助网站,收费仅用于网站维护运营更新,感谢您的支持。2.本站所发布资源仅限用于学习和研究测试使用,不得用于商业。3.如果获得下载权限测试后满意,请前往支持正版,得到更好的正版服务。4.本站仅保证资源的正常下载和测试使用,售后不包含相关技术咨询服务,请知悉谅解。5.本站所发布资源为非实物商品,不接受退款,请考虑好再进行支付赞助获取下载。